@itcase/ui 1.8.133 → 1.8.135

package/dist/css/components/Icon/Icon.css

@@ -34,7 +34,31 @@
 .icon_fill {
   @each $type in accent, primary, secondary, tertiary, quaternary, surface,
     error, success, warning, info, danger {
-    &_$(type) {
+    &_active_hover_$(type) {
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary {
+          &-$(color) {
+            &:hover {
+              & svg {
+                stroke: none;
+                fill: var(--color-$(type)-item-$(color));
+              }
+            }
+          }
+        }
+      }
+      @each $color in primary, secondary, tertiary, quaternary {
+        &-$(color) {
+          &:hover {
+            & svg {
+              stroke: none;
+              fill: var(--color-$(type)-fill-$(color));
+            }
+          }
+        }
+      }
+    }
+    &_active_$(type) {
       &-item {
         @each $color in primary, secondary, tertiary, quaternary {
           &-$(color) {
@@ -54,38 +78,7 @@
         }
       }
     }
-  }
-  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
-    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
-    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
-    &_$(palette) {
-      &-item {
-        & svg {
-          stroke: none;
-          fill: var(--color-palette-$(palette));
-        }
-      }
-      & svg {
-        stroke: none;
-        fill: var(--color-palette-$(palette));
-      }
-    }
-  }
-}
-.icon_fill_hover {
-  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-    error, success, warning, info, danger {
-    &_$(type) {
+    &_hover_$(type) {
       &-item {
         @each $color in primary, secondary, tertiary, quaternary {
           &-$(color) {
@@ -99,6 +92,26 @@
         }
       }
     }
+    &_$(type) {
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary {
+          &-$(color) {
+            & svg {
+              stroke: none;
+              fill: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+      @each $color in primary, secondary, tertiary, quaternary {
+        &-$(color) {
+          & svg {
+            stroke: none;
+            fill: var(--color-$(type)-fill-$(color));
+          }
+        }
+      }
+    }
   }
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
@@ -113,136 +126,60 @@
     dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
     stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
     sonic-silver {
-    &_$(palette) {
+    &_active_hover_$(palette) {
       &:hover {
         & svg {
           stroke: none;
-          fill: var(--color-$(type)-fill-$(color));
+          fill: var(--color-palette-$(palette));
         }
       }
       &-item {
         &:hover {
           & svg {
             stroke: none;
-            fill: var(--color-$(type)-item-$(color));
+            fill: var(--color-palette-$(palette));
           }
         }
       }
     }
-  }
-}
-.icon_fill {
-  &_active {
-    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-        error, success, warning, info, danger {
-      &_$(type) {
-        &-item {
-          @each $color in primary, secondary, tertiary, quaternary {
-            &-$(color) {
-              & svg {
-                stroke: none;
-                fill: var(--color-$(type)-item-$(color));
-              }
-            }
-          }
-        }
-        @each $color in primary, secondary, tertiary, quaternary {
-          &-$(color) {
-            & svg {
-              stroke: none;
-              fill: var(--color-$(type)-fill-$(color));
-            }
-          }
+    &_active_$(palette) {
+      &-item {
+        & svg {
+          stroke: none;
+          fill: var(--color-palette-$(palette));
         }
       }
+      & svg {
+        stroke: none;
+        fill: var(--color-palette-$(palette));
+      }
     }
-    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
-      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
-      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
-      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
-      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
-      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
-      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
-      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
-      alto, athens-gray, sonic-silver {
-      &_$(palette) {
-        &-item {
+    &_hover_$(palette) {
+      &:hover {
+        & svg {
+          stroke: none;
+          fill: var(--color-$(type)-fill-$(color));
+        }
+      }
+      &-item {
+        &:hover {
           & svg {
             stroke: none;
-            fill: var(--color-palette-$(palette));
+            fill: var(--color-$(type)-item-$(color));
           }
         }
+      }
+    }
+    &_$(palette) {
+      &-item {
         & svg {
           stroke: none;
           fill: var(--color-palette-$(palette));
         }
       }
-    }
-  }
-}
-.icon_fill {
-  &_active {
-    &_hover {
-      @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-        error, success, warning, info, danger {
-        &_$(type) {
-          &-item {
-            @each $color in primary, secondary, tertiary, quaternary {
-              &-$(color) {
-                &:hover {
-                  & svg {
-                    stroke: none;
-                    fill: var(--color-$(type)-item-$(color));
-                  }
-                }
-              }
-            }
-          }
-          @each $color in primary, secondary, tertiary, quaternary {
-            &-$(color) {
-              &:hover {
-                & svg {
-                  stroke: none;
-                  fill: var(--color-$(type)-fill-$(color));
-                }
-              }
-            }
-          }
-        }
-      }
-      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
-        clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-        rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-        canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-        spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
-        surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
-        denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
-        lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
-        storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
-        alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
-        gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
-        alto, athens-gray, sonic-silver {
-        &_$(palette) {
-          &:hover {
-            & svg {
-              stroke: none;
-              fill: var(--color-palette-$(palette));
-            }
-          }
-          &-item {
-            &:hover {
-              & svg {
-                stroke: none;
-                fill: var(--color-palette-$(palette));
-              }
-            }
-          }
-        }
+      & svg {
+        stroke: none;
+        fill: var(--color-palette-$(palette));
       }
     }
   }
@@ -273,9 +210,9 @@
       @each $size in 12, 14, 16, 20, 24, 32, 40 {
         &^^&_size_$(size) {
           & ^^^&__badge {
+            position: absolute;
             top: 0;
             right: 0;
-            position: absolute;
             transform: translate(var(--icon-size-$(size)-badge-position));
           }
         }

package/dist/css/components/Modal/Modal.css

@@ -18,6 +18,16 @@
     &:focus {
       outline: 0;
     }
+    &-absolute-header {
+      & .modal__header {
+        position: sticky;
+        top: 0;
+        z-index: 100;
+      }
+      & .modal__close {
+        position: absolute;
+      }
+    }
     &-wrapper {
       width: 100%;
     }
@@ -46,14 +56,16 @@
     &_size_$(size) {
       min-width: var(--modal-$(size)-min-width);
       min-height: var(--modal-$(size)-min-height);
-      padding: var(--modal-$(size)-padding) 0;
       ^&__header {
-        padding: 0 var(--modal-$(size)-padding);
         gap: var(--modal-$(size)-gap);
+        padding: var(--modal-$(size)-header-padding);
       }
-      ^&__content {
-        &-wrapper {
-          padding: 0 var(--modal-$(size)-padding);
+      ^&__content-wrapper {
+        padding: var(--modal-$(size)-content-padding);
+      }
+      &^&__content-no-header {
+        ^^&__content-wrapper {
+          padding: var(--modal-$(size)-content-no-header-padding);
         }
       }
     }
@@ -62,26 +74,22 @@
 .modal {
   &-scroll {
     &_header_sticky {
+      max-height: 80vh;
+      overflow: hidden auto;
       ^^&__header {
         position: sticky;
         top: 0;
+        z-index: 100;
       }
       ^^&__content {
         &-wrapper {
           position: relative;
-          overflow: hidden auto;
           display: flex;
           flex-direction: column;
         }
       }
     }
-    &_true {
-      max-height: 80vh;
-      position: relative;
-      overflow: hidden auto;
-      display: flex;
-      flex-direction: column;
-    }
+    &_true,
     &_vertical {
       max-height: 80vh;
       position: relative;
@@ -99,23 +107,32 @@
 }
 :root {
   --modal-max-width: 500px;
-  --modal-xl-padding: 24px;
+
   --modal-xl-gap: 24px;
+  --modal-xl-header-padding: 24px 24px 0 24px;
+  --modal-xl-content-padding: 0 24px 24px 24px;
+  --modal-xl-content-no-header-padding: 24px;
   --modal-xl-min-width: 500px;
   --modal-xl-min-height: 240px;
 
-  --modal-l-padding: 24px;
   --modal-l-gap: 24px;
+  --modal-l-header-padding: 24px 24px 0 24px;
+  --modal-l-content-padding: 0 24px 24px 24px;
+  --modal-l-content-no-header-padding: 24px;
   --modal-l-min-width: 500px;
   --modal-l-min-height: 240px;
 
-  --modal-m-padding: 24px;
   --modal-m-gap: 24px;
+  --modal-m-header-padding: 24px 24px 0 24px;
+  --modal-m-content-padding: 0 24px 24px 24px;
+  --modal-m-content-no-header-padding: 24px;
   --modal-m-min-width: 500px;
   --modal-m-min-height: 240px;
 
-  --modal-s-padding: 24px;
   --modal-s-gap: 24px;
+  --modal-s-header-padding: 24px 24px 0 24px;
+  --modal-s-content-padding: 0 24px 24px 24px;
+  --modal-s-content-no-header-padding: 24px;
   --modal-s-min-width: 320px;
   --modal-s-min-height: 240px;
 }