style: adjust the styles to the antd-design updates

pkorchak · May 7, 2023 · c7b3f79 · c7b3f79
1 parent c4e5da3
commit c7b3f79
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --poll 500",
     "build": "ng build",
     "build-for-prod": "ng build --prod",
     "test": "ng test",
@@ -50,4 +50,4 @@
     "tslint": "~6.1.0",
     "typescript": "^4.0.8"
   }
-}
+}
diff --git a/src/app/app.component.less b/src/app/app.component.less
@@ -32,14 +32,19 @@
   margin-right: 16px;
   height: 48px;
   width: 48px;
-  font-size: 20px;
   color: @green;
   border-color: @green;
   border-width: 1.6px;
+  line-height: 1;
 
   &:hover, &:focus {
     background-color: fade(@green, 10%);
   }
+
+  i {
+    font-size: 20px;
+    height: 20px;
+  }
 }
 
 .trigger:hover {

diff --git a/src/app/styles/global/lib-custom/ant-design/_button.less b/src/app/styles/global/lib-custom/ant-design/_button.less
@@ -1,3 +1,7 @@
 .ant-btn {
   transition: none;
 }
+
+.ant-btn-icon-only {
+  padding: 0;
+}
diff --git a/src/app/styles/global/lib-custom/ant-design/_date-picker.less b/src/app/styles/global/lib-custom/ant-design/_date-picker.less
@@ -1,3 +1,3 @@
-.ant-calendar-picker {
+.ant-picker {
   display: block;
 }
diff --git a/src/app/styles/global/lib-custom/ant-design/_select.less b/src/app/styles/global/lib-custom/ant-design/_select.less
@@ -1,28 +1,25 @@
 @import "../../_colors";
 
-.ant-select-dropdown-menu-item {
-  font-size: 13px;
-}
-
-.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
-  color: @blueviolet;
-}
-
 .element-type-select {
-  .ant-select-selection--single {
-    height: 22px;
-  }
-
-  .ant-select-selection__rendered {
+  .ant-select-selection {
     margin-left: 3px;
     margin-right: 16px;
     font-size: 16px;
     line-height: 22px;
   }
 
-  .ant-select-open,
-  .ant-select-selection:focus {
-    color: @blueviolet;
+  .ant-select-selector {
+    height: 22px !important;
+    padding: 0 16px 0 3px !important;
+  }
+
+  .ant-select-selection-item {
+    padding-right: 0 !important;
+    line-height: 22px !important;
+  }
+
+  .ant-select-single.ant-select-open .ant-select-selection-item {
+    color: @blueviolet !important;
   }
 
   .ant-select-arrow {

diff --git a/src/app/styles/global/lib-custom/ant-design/_theme.less b/src/app/styles/global/lib-custom/ant-design/_theme.less
@@ -4,13 +4,17 @@
 // Colors
 @text-color: @dark-grey;
 @primary-color: @blueviolet;
+@select-item-selected-color: @primary-color;
 
 @font-family: sans-serif;
+@dropdown-font-size: 13px;
 
 @text-selection-bg: @blue;
 
 @layout-header-background: @white;
 
+@line-height-base: 1.5;
+@border-radius-base: 4px;
 @border-color-base: @light-grey-3;
 
 @btn-disable-color: fade(@black, 35%);

diff --git a/src/app/widgets/form-editor/element/type-select/element-type-select.component.html b/src/app/widgets/form-editor/element/type-select/element-type-select.component.html
@@ -15,5 +15,6 @@
 </nz-select>
 
 <ng-template #selectTmp>
-  <i nz-icon [nzType]="type.value"></i>
+  <i nz-icon class="select-icon"
+     [nzType]="type.value"></i>
 </ng-template>
diff --git a/src/app/widgets/form-editor/element/type-select/element-type-select.component.less b/src/app/widgets/form-editor/element/type-select/element-type-select.component.less
@@ -7,3 +7,7 @@
   margin-right: 12px;
   font-size: 16px;
 }
+
+.select-icon {
+  font-size: 16px;
+}
diff --git a/src/app/widgets/form-editor/form-editor.component.html b/src/app/widgets/form-editor/form-editor.component.html
@@ -1,6 +1,6 @@
 <app-form-container [formGroup]="form">
   <app-editable-label [parentFormControl]="formName"
-                      [options]="{fontSize: '21px', color: '#000', borderBottomColor: '#e8e8e8'}"
+                      [options]="{fontSize: '21px', height: '32px', color: '#000', borderBottomColor: '#e8e8e8'}"
                       style="margin-bottom: 25px">
   </app-editable-label>
 

diff --git a/src/app/widgets/form-editor/form-editor.component.less b/src/app/widgets/form-editor/form-editor.component.less
@@ -1,9 +1,12 @@
 .add-element-btn {
-  font-size: 28px;
   line-height: 28px;
   border: 2px solid white;
 
-  &:focus {
+  i {
+    font-size: 28px;
+  }
+
+  &:focus > i {
     font-size: 32px;
     line-height: 32px;
     border-width: 0;

diff --git a/src/app/widgets/form-editor/settings-drawer/settings-drawer.component.less b/src/app/widgets/form-editor/settings-drawer/settings-drawer.component.less
@@ -54,6 +54,7 @@
 
     i {
       height: 30px;
+      font-size: 30px;
       transition: transform 2s;
     }