@seed-design/css 1.1.0 → 1.1.3

package/all.css

@@ -1343,8 +1343,12 @@
 }
 
 .seed-app-bar__iconButton {
+  background: none;
+  border: none;
   justify-content: center;
   align-items: center;
+  padding: 0;
+  font-family: inherit;
   display: flex;
 }
 
@@ -2720,6 +2724,7 @@
   --seed-prefix-icon-size: var(--seed-dimension-x4);
   --seed-suffix-icon-size: var(--seed-dimension-x4);
   border: none;
+  text-decoration: none;
   display: flex;
 }
 
@@ -4537,6 +4542,7 @@
   transition: box-shadow var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d3) var(--seed-timing-function-easing);
   background-color: #0000;
   border: none;
+  padding: 0;
   position: absolute;
   inset: 0;
 }
@@ -4628,6 +4634,7 @@
   --seed-icon-color: var(--seed-color-fg-neutral-subtle);
   background-color: #0000;
   border: none;
+  padding: 0;
 }
 
 .seed-link-content {
@@ -4680,6 +4687,7 @@
 .seed-list-header {
   align-items: center;
   gap: var(--seed-dimension-x2_5);
+  box-sizing: border-box;
   width: 100%;
   padding-inline: var(--seed-dimension-spacing-x-global-gutter);
   padding-block: var(--seed-dimension-x2);
@@ -4759,9 +4767,13 @@
   align-items: flex-start;
   gap: var(--seed-box-gap);
   --seed-box-padding-right: var(--seed-dimension-x2_5);
-  padding-right: var(--seed-box-padding-right);
+  padding: 0 var(--seed-box-padding-right) 0 0;
+  background: none;
+  border: none;
   flex-direction: column;
   flex-grow: 1;
+  font-family: inherit;
+  text-decoration: none;
   display: inline-flex;
 }
 
@@ -5025,6 +5037,7 @@
   font-size: var(--seed-font-size-t6);
   line-height: var(--seed-line-height-t6);
   font-weight: var(--seed-font-weight-bold);
+  margin: 0;
 }
 
 .seed-menu-sheet__list {
@@ -5056,9 +5069,12 @@
   padding-block: var(--seed-dimension-x3_5);
   border-radius: var(--seed-radius-r3);
   color: var(--seed-color-fg-neutral);
+  font-family: inherit;
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-medium);
+  border: none;
+  outline: none;
   justify-content: center;
   align-items: center;
   display: flex;
@@ -5079,6 +5095,9 @@
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
+  border: none;
+  outline: none;
+  font-family: inherit;
   display: flex;
 }
 
@@ -5726,6 +5745,32 @@
   --seed-prefix-icon-size: 18px;
 }
 
+.seed-scroll-fog {
+  --scroll-fog-from-color: #0000;
+  --scroll-fog-to-color: #000;
+  width: 100%;
+  height: 100%;
+  mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
+  -webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
+  -webkit-mask-composite: source-in;
+  position: relative;
+  overflow: auto;
+  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
+  mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-composite: intersect;
+}
+
+.seed-scroll-fog--hideScrollBar_true {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.seed-scroll-fog--hideScrollBar_true::-webkit-scrollbar {
+  display: none;
+}
+
 .seed-segmented-control__root {
   box-sizing: border-box;
   max-width: 100%;
@@ -6941,10 +6986,9 @@
 }
 
 .seed-text-input__root {
-  align-items: center;
-  gap: var(--seed-dimension-x2_5);
   width: 100%;
   transition: box-shadow var(--seed-duration-d3) var(--seed-timing-function-easing);
+  align-items: center;
   display: flex;
   overflow: hidden;
 }
@@ -6967,11 +7011,6 @@
   width: 0;
 }
 
-.seed-text-input__value:is(textarea) {
-  min-height: 95px;
-  padding-block: var(--seed-dimension-x3_5);
-}
-
 .seed-text-input__value::placeholder {
   color: var(--seed-color-fg-placeholder);
   font-weight: var(--seed-font-weight-regular);
@@ -6981,10 +7020,6 @@
   color: var(--seed-color-fg-disabled);
 }
 
-.seed-text-input__value[data-readonly], .seed-text-input__value[data-readonly]::placeholder {
-  color: var(--seed-color-fg-neutral-muted);
-}
-
 .seed-text-input__prefixText {
   color: var(--seed-color-fg-neutral-muted);
   font-weight: var(--seed-font-weight-regular);
@@ -7006,7 +7041,6 @@
 }
 
 .seed-text-input__root--variant_outline {
-  min-height: var(--seed-dimension-x13);
   border-radius: var(--seed-radius-r3);
   box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
 }
@@ -7019,15 +7053,10 @@
   box-shadow: inset 0 0 0 2px var(--seed-color-stroke-critical-solid);
 }
 
-.seed-text-input__root--variant_outline:is(:disabled, [disabled], [data-disabled]) {
+.seed-text-input__root--variant_outline:is(:disabled, [disabled], [data-disabled]), .seed-text-input__root--variant_outline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled])) {
   background-color: var(--seed-color-bg-disabled);
 }
 
-.seed-text-input__value--variant_outline {
-  font-size: var(--seed-font-size-t5);
-  line-height: var(--seed-line-height-t5);
-}
-
 .seed-text-input__value--variant_outline:first-child {
   padding-inline-start: var(--seed-dimension-x4);
 }
@@ -7036,43 +7065,16 @@
   padding-inline-end: var(--seed-dimension-x4);
 }
 
-.seed-text-input__value--variant_outline::placeholder, .seed-text-input__prefixText--variant_outline {
-  font-size: var(--seed-font-size-t5);
-  line-height: var(--seed-line-height-t5);
-}
-
-.seed-text-input__prefixText--variant_outline:first-child {
+.seed-text-input__prefixText--variant_outline:first-child, .seed-text-input__prefixIcon--variant_outline:first-child {
   margin-inline-start: var(--seed-dimension-x4);
 }
 
-.seed-text-input__prefixIcon--variant_outline {
-  width: var(--seed-dimension-x5);
-  height: var(--seed-dimension-x5);
-}
-
-.seed-text-input__prefixIcon--variant_outline:first-child {
-  margin-inline-start: var(--seed-dimension-x4);
-}
-
-.seed-text-input__suffixText--variant_outline {
-  font-size: var(--seed-font-size-t5);
-  line-height: var(--seed-line-height-t5);
-}
-
-.seed-text-input__suffixText--variant_outline:last-child {
-  margin-inline-end: var(--seed-dimension-x4);
-}
-
-.seed-text-input__suffixIcon--variant_outline {
-  width: var(--seed-dimension-x5);
-  height: var(--seed-dimension-x5);
-}
-
-.seed-text-input__suffixIcon--variant_outline:last-child {
+.seed-text-input__suffixText--variant_outline:last-child, .seed-text-input__suffixIcon--variant_outline:last-child {
   margin-inline-end: var(--seed-dimension-x4);
 }
 
 .seed-text-input__root--variant_underline {
+  gap: var(--seed-dimension-x2_5);
   min-height: var(--seed-dimension-x10);
   box-shadow: inset 0 calc(1px * -1) 0 0 var(--seed-color-stroke-neutral-weak);
 }
@@ -7085,7 +7087,16 @@
   box-shadow: inset 0 calc(2px * -1) 0 0 var(--seed-color-stroke-critical-solid);
 }
 
-.seed-text-input__value--variant_underline, .seed-text-input__value--variant_underline::placeholder, .seed-text-input__prefixText--variant_underline {
+.seed-text-input__value--variant_underline, .seed-text-input__value--variant_underline::placeholder {
+  font-size: var(--seed-font-size-t6);
+  line-height: var(--seed-line-height-t6);
+}
+
+.seed-text-input__value--variant_underline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled])), .seed-text-input__value--variant_underline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled]))::placeholder {
+  color: var(--seed-color-fg-neutral-muted);
+}
+
+.seed-text-input__prefixText--variant_underline {
   font-size: var(--seed-font-size-t6);
   line-height: var(--seed-line-height-t6);
 }
@@ -7105,6 +7116,66 @@
   height: var(--seed-dimension-x6);
 }
 
+.seed-text-input__value--size_large:is(textarea) {
+  min-height: 95px;
+  padding-block: var(--seed-dimension-x3_5);
+}
+
+.seed-text-input__value--size_medium:is(textarea) {
+  min-height: 90px;
+  padding-block: 11px;
+}
+
+.seed-text-input__root--variant_outline-size_large {
+  gap: var(--seed-dimension-x2_5);
+  min-height: var(--seed-dimension-x13);
+}
+
+.seed-text-input__value--variant_outline-size_large, .seed-text-input__value--variant_outline-size_large::placeholder, .seed-text-input__prefixText--variant_outline-size_large {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+}
+
+.seed-text-input__prefixIcon--variant_outline-size_large {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+}
+
+.seed-text-input__suffixText--variant_outline-size_large {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+}
+
+.seed-text-input__suffixIcon--variant_outline-size_large {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+}
+
+.seed-text-input__root--variant_outline-size_medium {
+  gap: var(--seed-dimension-x1_5);
+  min-height: var(--seed-dimension-x10);
+}
+
+.seed-text-input__value--variant_outline-size_medium, .seed-text-input__value--variant_outline-size_medium::placeholder, .seed-text-input__prefixText--variant_outline-size_medium {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-text-input__prefixIcon--variant_outline-size_medium {
+  width: var(--seed-dimension-x4);
+  height: var(--seed-dimension-x4);
+}
+
+.seed-text-input__suffixText--variant_outline-size_medium {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-text-input__suffixIcon--variant_outline-size_medium {
+  width: var(--seed-dimension-x4);
+  height: var(--seed-dimension-x4);
+}
+
 .seed-toggle-button {
   box-sizing: border-box;
   cursor: pointer;