diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx index 65033b2..eb2aa72 100644 --- a/src/Checkbox/Checkbox.stories.tsx +++ b/src/Checkbox/Checkbox.stories.tsx @@ -13,4 +13,5 @@ const Template: ComponentStory = (args: CheckboxProps) export const Checkbox = Template.bind({}); Checkbox.args = { label: "Text", + disabled: false, }; diff --git a/src/Checkbox/style/Checkbox.module.scss b/src/Checkbox/style/Checkbox.module.scss index 58a62a2..e60ed91 100644 --- a/src/Checkbox/style/Checkbox.module.scss +++ b/src/Checkbox/style/Checkbox.module.scss @@ -34,21 +34,29 @@ &:checked::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); - box-shadow: inset 1em 1em var(--color-input-background); + box-shadow: inset 1em 1em var(--color-text-on-primary); } - //&:not(:disabled) { - // &:focus { - // outline: 1px solid var(--color-border); - // outline-offset: 3px; - // } - //} + &:not(:disabled) { + &:focus-visible { + outline: 1px solid var(--color-border); + outline-offset: 3px; + } + } &:disabled { --container-color: var(--container-disabled); color: var(--container-disabled); cursor: default; background-color: var(--color-input-disabled); + border-color: var(--color-border-soft); + + &:checked { + &::before { + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + box-shadow: inset 1em 1em var(--color-border-soft); + } + } } } } diff --git a/src/Input/Input.stories.tsx b/src/Input/Input.stories.tsx index e3d05ad..0a43984 100644 --- a/src/Input/Input.stories.tsx +++ b/src/Input/Input.stories.tsx @@ -135,6 +135,6 @@ Dropdown.args = { "Option III": { value: "3" }, "Option IV": { value: "4" }, "Option V": { value: "5" }, - "Option V": { value: "required", required: true }, + "Option VI": { value: "required", required: true }, }, }; diff --git a/src/Input/style/Input.module.scss b/src/Input/style/Input.module.scss index 02c4104..fa14ea2 100644 --- a/src/Input/style/Input.module.scss +++ b/src/Input/style/Input.module.scss @@ -1,222 +1,223 @@ @import "../../style/mixins.scss"; .container { - margin-bottom: var(--m); - text-align: left; + margin-bottom: var(--m); + text-align: left; - &:only-child { - margin: var(--m-xxs) 0; - } + &:only-child { + margin: var(--m-xxs) 0; + } - &:has(input[disabled]) { - .label { - cursor: default; - } + &:has(input[disabled]) { + .label { + cursor: default; } + } } .label { - display: inline-block; - margin-bottom: var(--m-xxs); - cursor: pointer; - line-height: 1; - font-weight: 500; - font-family: var(--font-family-1); - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + display: inline-block; + margin-bottom: var(--m-xxs); + cursor: pointer; + line-height: 1; + font-weight: 500; + font-family: var(--font-family-1); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .inputWrapper { - background-color: var(--color-input-background); - border-radius: var(--border-radius-2); - outline: 1px solid transparent; - padding: calc(var(--m-xxs) / 2); - border: 1px solid var(--color-border); - font-weight: 400; - display: flex; - align-items: center; - min-width: 270px; - position: relative; - - svg { - display: block; + background-color: var(--color-input-background); + border-radius: var(--border-radius-2); + outline: 1px solid transparent; + padding: calc(var(--m-xxs) / 2); + border: 1px solid var(--color-border); + font-weight: 400; + display: flex; + align-items: center; + min-width: 270px; + position: relative; + + svg { + display: block; + } + + &:focus-within, + &:has(.open) { + outline-color: var(--color-text); + z-index: 11; + + .icon svg:not([data-stroke="no-stroke"]) path { + stroke: var(--color-text); } - &:focus-within, - &:has(.open) { - outline-color: var(--color-text); - z-index: 11; + .options { + display: flex; + } + } - .icon svg:not([data-stroke="no-stroke"]) path { - stroke: var(--color-text); - } + &:has(> [error]), + &.hasError { + border-color: var(--color-text-error); - .options { - display: flex; - } + .icon svg:not([data-stroke="no-stroke"]) path { + stroke: var(--color-text-error); } + } - &:has(> [error]), - &.hasError { - border-color: var(--color-text-error); + &:has(> [disabled]) { + background-color: var(--color-input-disabled); + color: var(--color-input-text-disabled); + border-color: var(--color-border-soft); - .icon svg:not([data-stroke="no-stroke"]) path { - stroke: var(--color-text-error); - } + .icon.dropdownIcon { + cursor: default; } + } - &:has(> [disabled]) { - background-color: var(--color-input-disabled); - color: var(--color-input-text-disabled); + .icon { + padding: 0 var(--m-xxxs); + cursor: pointer; + display: flex; - .icon.dropdownIcon { - cursor: default; - } + button { + background: none; + padding: 0; + border: none; + cursor: pointer; } - .icon { - padding: 0 var(--m-xxxs); - cursor: pointer; - display: flex; - - button { - background: none; - padding: 0; - border: none; - cursor: pointer; - } - - svg:not([data-stroke="no-stroke"]) path { - display: block; - stroke: var(--color-text-soft); - } + svg:not([data-stroke="no-stroke"]) path { + display: block; + stroke: var(--color-text-soft); } + } + + input, + select, + textarea { + -webkit-tap-highlight-color: transparent; + appearance: none; + resize: none; + width: 100%; + display: block; + padding: calc(var(--m-xxs) / 2); + border: none; + background-color: transparent; + flex-grow: 1; + color: var(--color-text); - input, - select, - textarea { - -webkit-tap-highlight-color: transparent; - appearance: none; - resize: none; - width: 100%; - display: block; - padding: calc(var(--m-xxs) / 2); - border: none; - background-color: transparent; - flex-grow: 1; - color: var(--color-text); - - @include placeholder { - color: var(--color-text-soft); - } - - option:disabled { - color: var(--color-text-soft); - } - option:not([value]) { - display: none; - } - - &:focus { - outline: none; - } + @include placeholder { + color: var(--color-text-soft); } - select option { - background-color: var(--color-input-background); - border: none; - padding: var(--m); + option:disabled { + color: var(--color-text-soft); + } + option:not([value]) { + display: none; } - .fluid & { - min-width: auto; + &:focus { + outline: none; } + } - .small & { - padding: 0 var(--m-xxxs); - min-width: auto; - border-radius: var(--border-radius-1); + select option { + background-color: var(--color-input-background); + border: none; + padding: var(--m); + } - .options { - border-radius: var(--border-radius-1); + .fluid & { + min-width: auto; + } - .option { - border-radius: var(--border-radius-1); - } - } - } + .small & { + padding: 0 var(--m-xxxs); + min-width: auto; + border-radius: var(--border-radius-1); - .optionsRef { - display: flex; - position: absolute; - top: 100%; - right: 0; - left: 0; - } + .options { + border-radius: var(--border-radius-1); - .select:not([disabled]) { - cursor: pointer; + .option { + border-radius: var(--border-radius-1); + } } -} + } -.options { + .optionsRef { + display: flex; position: absolute; top: 100%; right: 0; left: 0; - z-index: 1000; - - .inner { - display: flex; - background-color: var(--color-input-background); - border-radius: var(--border-radius-2); - padding: var(--m-xxxxs); - outline: 1px solid var(--color-border); - display: flex; - flex-direction: column; - gap: var(--m-xxxxs); - max-height: calc(100vh - 8px); - overflow-y: auto; - margin-top: var(--m-xxxxs); + } + + .select:not([disabled]) { + cursor: pointer; + } +} + +.options { + position: absolute; + top: 100%; + right: 0; + left: 0; + z-index: 1000; + + .inner { + display: flex; + background-color: var(--color-input-background); + border-radius: var(--border-radius-2); + padding: var(--m-xxxxs); + outline: 1px solid var(--color-border); + display: flex; + flex-direction: column; + gap: var(--m-xxxxs); + max-height: calc(100vh - 8px); + overflow-y: auto; + margin-top: var(--m-xxxxs); + } + + .option { + padding: var(--m-xxs) var(--m-xxs); + border-radius: var(--border-radius-2); + + &[disabled] { + color: var(--color-text-soft); } - .option { - padding: var(--m-xxs) var(--m-xxs); - border-radius: var(--border-radius-2); - - &[disabled] { - color: var(--color-text-soft); - } - - &:not([disabled]) { - cursor: pointer; - - &:hover, - &:focus, - &.selected { - background-color: var(--color-background-menu-hover); - } - &.placeholder { - color: var(--color-text-soft); - } - } - .requiredMark { - color: var(--color-text-error); - } + &:not([disabled]) { + cursor: pointer; + + &:hover, + &:focus, + &.selected { + background-color: var(--color-background-menu-hover); + } + &.placeholder { + color: var(--color-text-soft); + } + } + .requiredMark { + color: var(--color-text-error); } + } } .error { - color: var(--color-text-error); - margin-top: var(--m-xxs); - line-height: 1; - font-weight: 400; + color: var(--color-text-error); + margin-top: var(--m-xxs); + line-height: 1; + font-weight: 400; } .footer { - color: var(--color-text-soft); - margin-top: var(--m-xxs); - line-height: 1; - font-weight: 400; + color: var(--color-text-soft); + margin-top: var(--m-xxs); + line-height: 1; + font-weight: 400; } diff --git a/src/Table/style/Default.module.scss b/src/Table/style/Default.module.scss index 4fcefc3..f036321 100644 --- a/src/Table/style/Default.module.scss +++ b/src/Table/style/Default.module.scss @@ -1,176 +1,183 @@ $radius: var(--border-radius-2); .table { - display: table; - width: 100%; - border-collapse: collapse; - border-spacing: 0; - border-radius: $radius; - outline: 1px solid var(--color-border); - table-layout: fixed; + display: table; + width: 100%; + border-collapse: collapse; + border-spacing: 0; + border-radius: $radius; + outline: 1px solid var(--color-border); + table-layout: fixed; + + .thead { + display: table-header-group; + } + + .tbody { + display: table-row-group; + } + .tr { + display: table-row; + } + .td { + display: table-cell; + vertical-align: middle; + max-width: 300px; + height: 48px; + } + .caption { + display: table-caption; + border-bottom: 1px solid var(--color-border); + background-color: var(--color-background-modal); + padding: 0 var(--m-s); + border-radius: var(--border-radius-2) var(--border-radius-2) 0 0; + } + + .thead { + .tr { + margin-bottom: var(--m-s); - .thead { - display: table-header-group; + .td { + font-weight: 600; + white-space: nowrap; + padding: var(--m-xxxs) var(--m-s); + border-bottom: 1px solid var(--color-border); + color: var(--color-text-soft); + } } + } - .tbody { - display: table-row-group; + &.fixHeader { + border-radius: 0 0 $radius $radius; + .thead { + position: sticky; + top: 0; + z-index: 1; + outline: 1px solid var(--color-border); + + .tr { + margin-bottom: var(--m-s); + .td { + background-color: var(--color-background-modal); + } + } } + } + + &:not(.fixHeader) .thead { .tr { - display: table-row; - } - .td { - display: table-cell; - vertical-align: middle; - max-width: 300px; - height: 48px; - } - .caption { - display: table-caption; - border-bottom: 1px solid var(--color-border); - background-color: var(--color-background-modal); - padding: 0 var(--m-s); + // .td { + // &:first-of-type { + // border-radius: $radius 0 0 0; + // } + + // &:last-child { + // border-radius: 0 $radius 0 0; + // } + // } } + } - .thead { - .tr { - margin-bottom: var(--m-s); - - .td { - font-weight: 600; - white-space: nowrap; - padding: var(--m-xxxs) var(--m-s); - border-bottom: 1px solid var(--color-border); - background-color: var(--color-background-modal); - color: var(--color-text-soft); - } + .tbody { + .tr { + .td { + vertical-align: middle; + padding: var(--m-xxxs) var(--m-s); + font-weight: 400; + + & > span, + & > small { + text-overflow: ellipsis; + white-space: nowrap; + display: block; + overflow: hidden; } - } - &.fixHeader { - border-radius: 0 0 $radius $radius; - .thead { - position: sticky; - top: 0; - z-index: 1; - outline: 1px solid var(--color-border); + &.highlight { + font-weight: 500; } - } - &:not(.fixHeader) .thead { - .tr { - // .td { - // &:first-of-type { - // border-radius: $radius 0 0 0; - // } - - // &:last-child { - // border-radius: 0 $radius 0 0; - // } - // } + &.element { + padding: 0 var(--m-s); } - } + } + + // &:nth-child(odd) { + // .td { + // .zebra & { + // background-color: var(--color-background); + // } + // } + // } + + &:hover { + box-shadow: 0 0 0 2px var(--color-border); + position: relative; + } + + &:last-child { + border-radius: 0 0 $radius $radius; - .tbody { - .tr { - .td { - vertical-align: middle; - padding: var(--m-xxxs) var(--m-s); - font-weight: 400; - - & > span, - & > small { - text-overflow: ellipsis; - white-space: nowrap; - display: block; - overflow: hidden; - } - - &.highlight { - font-weight: 500; - } - - &.element { - padding: 0 var(--m-s); - } - } - - // &:nth-child(odd) { - // .td { - // .zebra & { - // background-color: var(--color-background); - // } - // } - // } - - &:hover { - box-shadow: 0 0 0 2px var(--color-border); - position: relative; - } - - &:last-child { - border-radius: 0 0 $radius $radius; - - .td { - border-bottom-color: transparent; - - &:first-of-type { - border-radius: 0 0 0 $radius; - } - &:last-child { - border-radius: 0 0 $radius 0; - } - } - } + .td { + border-bottom-color: transparent; + + &:first-of-type { + border-radius: 0 0 0 $radius; + } + &:last-child { + border-radius: 0 0 $radius 0; + } } + } } + } - &.zebra { - background-color: var(--color-background-modal); - .tbody { - .tr { - &:nth-child(odd) { - .td { - background-color: var(--color-background); - } - } - } + &.zebra { + background-color: var(--color-background-modal); + .tbody { + .tr { + &:nth-child(odd) { + .td { + background-color: var(--color-background); + } } + } } + } - &.dark { - background-color: var(--color-background); - } + &.dark { + background-color: var(--color-background); + } - &.light { - background-color: var(--color-background-modal); - } + &.light { + background-color: var(--color-background-modal); + } - &.dark, - &.light { - .tbody { - .tr { - &:hover { - box-shadow: none; - position: static; - } - .td { - } - &:first-of-type .td { - padding-top: var(--m-s); - } - &:last-of-type .td { - padding-bottom: var(--m-s); - } - } + &.dark, + &.light { + .tbody { + .tr { + &:hover { + box-shadow: none; + position: static; + } + .td { + } + &:first-of-type .td { + padding-top: var(--m-s); + } + &:last-of-type .td { + padding-bottom: var(--m-s); } + } } + } } .emptyMsg { - display: flex; - justify-content: center; - align-items: center; - margin-top: 15vh; - text-align: center; + display: flex; + justify-content: center; + align-items: center; + margin-top: 15vh; + text-align: center; }