diff --git a/styles/atat.scss b/styles/atat.scss index 1b7b65fd..3d70a544 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -33,6 +33,8 @@ @import 'components/progress_menu.scss'; @import 'components/search_bar'; @import 'components/forms'; +@import 'components/selector'; + @import 'sections/login'; @import 'sections/request_approval'; diff --git a/styles/components/_selector.scss b/styles/components/_selector.scss new file mode 100644 index 00000000..7b95b325 --- /dev/null +++ b/styles/components/_selector.scss @@ -0,0 +1,54 @@ +.selector { + max-width: 30em; + + .trigger { + display: block !important; + } + + legend { + @include h4; + padding-bottom: $gap / 2; + } + + .selector__button { + width: 100%; + height: $input-height; + margin: 0; + padding: $input-padding-vertical 0.7em; + line-height: $input-line-height; + color: $color-base; + font-size: $base-font-size; + font-weight: $font-normal; + text-align: left; + border-width: 1px; + border-style: solid; + border-color: $color-gray; + border-radius: 0; + box-sizing: border-box; + background-color: $color-white; + background-image: none, url('#{$image-path}/arrow-both.svg'), url('#{$image-path}/arrow-both.png'); + background-position: right 1.3rem center; + background-repeat: no-repeat; + background-size: 1rem; + } + + .tooltip { + &.popover { + .popover-inner { + padding: 0; + + .block-list { + margin: 0; + + label { + padding: 0; + } + } + } + + .popover-arrow { + background-color: $color-white; + } + } + } +} diff --git a/styles/elements/_block_lists.scss b/styles/elements/_block_lists.scss index 1da1c14d..a0f3071a 100644 --- a/styles/elements/_block_lists.scss +++ b/styles/elements/_block_lists.scss @@ -106,6 +106,8 @@ justify-content: space-between; &::before { flex-shrink: 0; + margin-right: 0; + margin-left: $gap * 2; } &:hover { diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss index 53fb9d9f..e3f49aac 100644 --- a/styles/elements/_inputs.scss +++ b/styles/elements/_inputs.scss @@ -37,7 +37,8 @@ input, textarea, - select { + select, + .selector__button { border-color: $state-color; border-width: $border-width; } @@ -72,6 +73,10 @@ position: relative; clear: both; + dd { + font-weight: normal; + } + .icon-validation { position: absolute; top: 100%; @@ -105,7 +110,8 @@ input, textarea, - select { + select, + .selector__button { @include line-max; margin: 0; box-sizing: border-box; diff --git a/styles/elements/_tooltip.scss b/styles/elements/_tooltip.scss index 44876171..0c81d50a 100644 --- a/styles/elements/_tooltip.scss +++ b/styles/elements/_tooltip.scss @@ -68,7 +68,7 @@ background: $color; color: black; padding: 24px; - border-radius: 5px; + //border-radius: 5px; box-shadow: 0 5px 30px rgba(black, .1); }