fix(select-styles): add border-radius to select component (#1287)

Co-authored-by: SNosenko <user@MacBook-Pro-user.local> Co-authored-by: Fenko Alex <30617230+FenkoAlex@users.noreply.github.com>
alfa-laboratory · Jun 2, 2021 · 83b2b3b · 83b2b3b
1 parent fa807cc
commit 83b2b3b
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 119 deletions.
diff --git a/src/select/select.css b/src/select/select.css
@@ -18,6 +18,7 @@
     max-width: 100%;
     font-family: var(--font);
     font-weight: var(--font-weight-normal);
+    border-radius: 4px 4px 0 0;
 
     &,
     *,
@@ -306,3 +307,127 @@
         }
     }
 }
+
+.select.select_view_filled {
+    &.select_size_s {
+        .select__top {
+            padding: 0 var(--gap-xs);
+            line-height: 42px;
+        }
+
+        .select-button {
+            height: 42px;
+            padding: 0 var(--gap-xs);
+
+            &__content {
+                padding-right: 14px;
+            }
+
+            .icon-button {
+                &_size_s {
+                    margin-right: var(--gap-xs);
+                }
+            }
+        }
+
+        .select__top,
+        .select-button {
+            font-size: var(--font-size-s);
+        }
+
+        &__sub {
+            padding-top: var(--gap-2xs);
+            padding-right: var(--gap-xs);
+            font-size: var(--font-size-xs);
+        }
+
+        &.select_has-label {
+            .select-button__content {
+                padding-top: 11px;
+            }
+        }
+
+        &.select_has-value,
+        &.select_has-placeholder {
+            .select__top {
+                font-size: var(--font-size-xs);
+                transform: translateY(-8px);
+                width: auto;
+            }
+        }
+    }
+
+    &.select_size_m {
+        .select__top {
+            padding: 0 var(--gap-s);
+            line-height: 56px;
+        }
+
+        .select-button {
+            height: 56px;
+            padding: 0 var(--gap-s);
+
+            &__content {
+                padding-right: 18px;
+            }
+
+            .icon-button {
+                &_size_m {
+                    margin-right: var(--gap-2xs);
+                }
+            }
+        }
+
+        .select__top,
+        .select-button {
+            font-size: var(--font-size-m);
+        }
+
+        &__sub {
+            padding-top: var(--gap-2xs);
+            padding-right: var(--gap-s);
+            font-size: var(--font-size-s);
+        }
+
+        &.select_has-label {
+            .select-button__content {
+                padding-top: 17px;
+            }
+        }
+
+        &.select_has-value,
+        &.select_has-placeholder {
+            .select__top {
+                font-size: var(--font-size-s);
+                transform: translateY(-12px);
+                width: auto;
+            }
+        }
+    }
+
+    .select__top {
+        transform-origin: 0 50%;
+    }
+
+    .select-button {
+        border-radius: 4px 4px 0 0;
+
+        &__content {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    &.select_no-tick .select-button__text {
+        padding-right: 0;
+    }
+
+    &__sub {
+        line-height: var(--line-height-condensed);
+    }
+
+    &.select_has-label {
+        padding-top: 0;
+    }
+}
diff --git a/src/select/select_theme_alfa-on-white.css b/src/select/select_theme_alfa-on-white.css
@@ -95,130 +95,15 @@
         }
     }
     &.select.select_view_filled {
-        &.select_size_s {
-            .select__top {
-                padding: 0 var(--gap-xs);
-                line-height: 42px;
-            }
-
-            .select-button {
-                height: 42px;
-                padding: 0 var(--gap-xs);
-
-                &__content {
-                    padding-right: 14px;
-                }
-
-                .icon-button {
-                    &_size_s {
-                        margin-right: var(--gap-xs);
-                    }
-                }
-            }
-
-            .select__top,
-            .select-button {
-                font-size: var(--font-size-s);
-            }
-
-            &__sub {
-                padding-top: var(--gap-2xs);
-                padding-right: var(--gap-xs);
-                font-size: var(--font-size-xs);
-            }
-
-            &.select_has-label {
-                .select-button__content {
-                    padding-top: 11px;
-                }
-            }
-
-            &.select_has-value,
-            &.select_has-placeholder {
-                .select__top {
-                    font-size: var(--font-size-xs);
-                    transform: translateY(-8px);
-                    width: auto;
-                }
-            }
-        }
-
-        &.select_size_m {
-            .select__top {
-                padding: 0 var(--gap-s);
-                line-height: 56px;
-            }
-
-            .select-button {
-                height: 56px;
-                padding: 0 var(--gap-s);
-
-                &__content {
-                    padding-right: 18px;
-                }
-
-                .icon-button {
-                    &_size_m {
-                        margin-right: var(--gap-2xs);
-                    }
-                }
-            }
-
-            .select__top,
-            .select-button {
-                font-size: var(--font-size-m);
-            }
-
-            &__sub {
-                padding-top: var(--gap-2xs);
-                padding-right: var(--gap-s);
-                font-size: var(--font-size-s);
-            }
-
-            &.select_has-label {
-                .select-button__content {
-                    padding-top: 17px;
-                }
-            }
-
-            &.select_has-value,
-            &.select_has-placeholder {
-                .select__top {
-                    font-size: var(--font-size-s);
-                    transform: translateY(-12px);
-                    width: auto;
-                }
-            }
-        }
-
-        .select__top {
-            transform-origin: 0 50%;
-        }
-
         .select-button {
             color: var(--color-dark-indigo);
             border-bottom-color: var(--color-dark-indigo-15);
             background-color: var(--color-dark-indigo-05);
-            border-radius: 4px 4px 0 0;
 
             &.select-button_hovered {
                 background-color: var(--color-dark-indigo-10);
                 border-color: var(--color-dark-indigo-60);
             }
-
-            &__content {
-                display: block;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-
-        &.select_no-tick .select-button__text {
-            padding-right: 0;
-        }
-
-        &__sub {
-            line-height: var(--line-height-condensed);
         }
 
         .select__top,
@@ -237,10 +122,6 @@
             }
         }
 
-        &.select_has-label {
-            padding-top: 0;
-        }
-
         &.select_disabled {
             .select-button {
                 color: var(--color-dark-indigo-60);