aboutsummaryrefslogtreecommitdiffstats
path: root/components/dropdown
diff options
context:
space:
mode:
Diffstat (limited to 'components/dropdown')
-rw-r--r--components/dropdown/_dropdown.scss346
-rw-r--r--components/dropdown/dropdown-disabled.html11
-rw-r--r--components/dropdown/dropdown-groups.html10
-rw-r--r--components/dropdown/dropdown-requiered.html18
-rw-r--r--components/dropdown/dropdown.html9
5 files changed, 0 insertions, 394 deletions
diff --git a/components/dropdown/_dropdown.scss b/components/dropdown/_dropdown.scss
deleted file mode 100644
index 908bbaa..0000000
--- a/components/dropdown/_dropdown.scss
+++ /dev/null
@@ -1,346 +0,0 @@
-.sdc-dropdown {
- @include body-1;
- position: relative;
- display: block;
-
- .sdc-dropdown__error--block {
- display: none;
- }
-
- &.headless {
- display: none;
- }
-
- /*************************************
- SDC DropDown styles
- *************************************/
- .sdc-dropdown__component-container {
- position: relative;
- height: 40px;
-
- .sdc-dropdown__header {
- background: $white;
- text-align: left;
- position: relative;
- color: $dark-gray;
- @include base-font-regular;
- font-size: 14px;
- text-indent: 6px;
- border: solid 1px $light-gray;
- width: 100%;
- height: 40px;
- line-height: 36px;
- box-sizing: border-box;
- border-radius: 2px;
-
- &.placeholder {
- @include base-font-italic;
- color: $gray;
- }
-
- &.disabled {
- border: solid 1px $light-gray;
- background-color: $light-silver;
- color: $light-gray;
- cursor: default;
-
- &:focus {
- border: solid 1px $light-gray;
- outline: none;
- .svg-icon>svg {
- fill: $light-gray;
- }
- }
- .svg-icon>svg {
- fill: $light-gray;
- }
- }
-
- &:focus {
- border: solid 1px $light-blue;
- outline: none;
- .svg-icon>svg {
- fill: $light-blue;
- }
- }
-
- .sdc-dropdown-handle {
- float: right;
- .svg-icon>svg {
- fill: $dark-gray;
- }
- }
-
- svg-icon {
- margin: 10px 6px;
- float: right;
- }
-
- }
-
- }
-
- &.open-bottom {
- .sdc-dropdown__header {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
-
- border: 1px solid $light-blue;
- box-sizing: border-box;
- .svg-icon>svg {
- fill: $light-blue;
- }
-
- }
- }
-
- &.open-top {
- .sdc-dropdown__header {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- }
-
- .sdc-dropdown__options-list {
- position: relative;
- opacity: 0;
- top: 100%;
- left: 0;
- width: 100%;
- max-height: 0;
- overflow-y: auto;
- box-sizing: border-box;
- border: 1px solid $light-blue;
- background-color: white;
- box-shadow: 0 3px 7px -3px $dark-gray;
- z-index: 999;
- &.sdc-dropdown__options-wrapper--top {
- bottom: 40px;
- border-top: 1px solid $light-blue;
- }
- &.sdc-dropdown__options-list--headless {
- border-top: 1px solid $light-blue;
- }
- .sdc-dropdown__option {
- @include base-font-regular;
- font-size: 14px;
- text-indent: 10px;
- padding: 10px;
- background: transparent;
- cursor: pointer;
- height: 40px;
- box-sizing: border-box;
- &.sdc-dropdown__option--hr {
- height: 1px;
- overflow: hidden;
- border-top: 1px solid $silver;
- padding: 0;
- margin: 10px 20px;
- }
- &.sdc-dropdown__option--group {
- text-indent: 30px;
- }
- &:hover {
- background-color: $light-silver;
- //@include base-font-semibold;
- }
- &.selected {
- background-color: $lighter-blue;
- color: $blue;
- @include base-font-semibold;
- }
- &.sdc-dropdown__option--header {
- @include base-font-semibold;
- color: $text-black;
- cursor: default;
- &.sdc-dropdown__option--group {
- text-indent: 10px;
- }
- &:hover {
- background-color: transparent;
- }
- }
- &.sdc-dropdown__option--disabled {
- color: $gray;
- cursor: default;
- &:hover {
- background-color: transparent;
- }
- &::after {
- color: $gray;
- }
- &:focus {
- border: solid 1px $light-gray;
- outline: none;
- }
- }
- }
- }
- .sdc-dropdown__select {
- @include base-font-regular;
- text-indent: 6px;
- border: solid 1px $light-gray;
- width: 100%;
- &.disabled {
- opacity: 0.7;
- }
- option {
- padding: 3px;
- }
- }
- .sdc-dropdown__label {
- margin-bottom: 5px;
- display: block;
- @include body-3-emphasis;
- color: $text-black;
- &.required::before {
- content: '*';
- color: $red;
- margin: 0 4px 0 0;
- }
- }
-
- /*************************************
- SDC Auto-DropDown styles
- *************************************/
- &.open-bottom {
- .sdc-dropdown-auto__wrapper {
- border: 1px solid $light-blue;
- box-sizing: border-box;
- .svg-icon>svg {
- fill: $light-blue;
- }
- }
- }
-
- .sdc-dropdown-auto__wrapper {
- display: flex;
- border: solid 1px $light-gray;
- border-radius: 2px;
-
- .sdc-dropdown__header {
- border: none;
- color: $gray;
-
- &:focus {
- border: none;
- }
- }
-
- svg-icon {
- margin: 12px 10px;
- float: right;
- }
- }
-
- /*************************************
- SDC Error styles
- *************************************/
- &.sdc-dropdown__error {
- .sdc-dropdown__header {
- border: solid 1px $red;
- @include font-error;
- &::after {
- @include font-error;
- }
- &:focus {
- border: solid 1px $red;
- .sdc-dropdown-handle {
- use {
- fill: $red;
- }
- }
- }
- .sdc-dropdown-handle {
- use {
- fill: $red;
- }
- }
- }
- .sdc-dropdown__error--block {
- display: block;
- @include font-error;
- margin: 4px 0;
- @include body-3;
- }
- .sdc-dropdown__options-wrapper--frame {
- .sdc-dropdown__options-list {
- border: 1px solid $red;
- border-top: none;
- }
- &.sdc-dropdown__options-wrapper--top {
- .sdc-dropdown__options-list {
- border-top: 1px solid $red;
- }
- }
- }
- .svg-icon.__exclamationTriangleFull {
- width: 12px;
- height: 10px;
- margin-right: 6px;
- }
- }
-}
-
-.sdc-dropdown__error--icon {
- fill: $red;
-}
-
-/********************************************************/
-
-/* Animation */
-
-/********************************************************/
-
-@include keyframes-expand-animation('top-to-bottom-exp', 244px);
-@include keyframes-collapse-animation('top-to-bottom', 244px);
-@include keyframes-expand-animation('bottom-to-top-exp', 244px);
-@include keyframes-collapse-animation('bottom-to-top', 244px);
-.sdc-dropdown__options-wrapper--frame {
- overflow: hidden;
- position: absolute;
- top: auto;
- width: 100%;
- &.sdc-dropdown__options-wrapper--top {
- bottom: 40px;
- top: auto;
- padding: 10px 0 0 0;
- /* Expend animation from bottom to top */
- .sdc-dropdown__options-list {
- border-top: 1px solid $light-blue;
- box-shadow: 0 0 7px -1px $dark-gray;
- &.sdc-dropdown__options-list--animation-init {
- border-bottom: none;
- padding: 0;
- animation: bottom-to-top .0s forwards;
- }
- }
- &.sdc-dropdown__options-wrapper--uncollapsed {
- .sdc-dropdown__options-list {
- animation: bottom-to-top-exp .0s forwards;
- }
- }
- }
-}
-
-/**
-Fold animation from top to bottom
- */
-
-.sdc-dropdown {
- .sdc-dropdown__options-list.sdc-dropdown__options-list--animation-init {
- animation: top-to-bottom .0s forwards;
- }
-}
-
-/**
-Expend animation from top to bottom
- */
-
-.sdc-dropdown {
- .sdc-dropdown__options-wrapper--uncollapsed {
- .sdc-dropdown__options-list.sdc-dropdown__options-list--animation-init {
- animation: top-to-bottom-exp .0s forwards;
- }
- }
-}
diff --git a/components/dropdown/dropdown-disabled.html b/components/dropdown/dropdown-disabled.html
deleted file mode 100644
index 9e0bd86..0000000
--- a/components/dropdown/dropdown-disabled.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="sdc-dropdown">
- <label class="sdc-dropdown__label">DropDown example</label>
- <button class="sdc-dropdown__header disabled">Please choose option</button>
- <!--[This part won't be created on disabled drop-down]-->
- <ul class="sdc-dropdown__options-list">
- <li class="sdc-dropdown__option selected">First Option</li>
- <li class="sdc-dropdown__option">Second Option</li>
- <li class="sdc-dropdown__option">Third Option</li>
- </ul>
- <!--[...]-->
-</div>
diff --git a/components/dropdown/dropdown-groups.html b/components/dropdown/dropdown-groups.html
deleted file mode 100644
index 3e32f16..0000000
--- a/components/dropdown/dropdown-groups.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="sdc-dropdown">
- <label class="sdc-dropdown__label">DropDown example</label>
- <button class="sdc-dropdown__header">Please choose option</button>
- <ul class="sdc-dropdown__options-list">
- <li class="sdc-dropdown__option sdc-dropdown__option--group sdc-dropdown__option--header">Group 1 title</li>
- <li class="sdc-dropdown__option sdc-dropdown__option--group selected">First Option</li>
- <li class="sdc-dropdown__option sdc-dropdown__option--group">Second Option</li>
- <li class="sdc-dropdown__option sdc-dropdown__option--group">Third Option</li>
- </ul>
-</div>
diff --git a/components/dropdown/dropdown-requiered.html b/components/dropdown/dropdown-requiered.html
deleted file mode 100644
index 4fd555d..0000000
--- a/components/dropdown/dropdown-requiered.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<div class="sdc-dropdown">
- <label class="sdc-dropdown__label">DropDown example</label>
- <button class="sdc-dropdown__header">Please choose option</button>
- <ul class="sdc-dropdown__options-list">
- <li class="sdc-dropdown__option selected">First Option</li>
- <li class="sdc-dropdown__option">Second Option</li>
- <li class="sdc-dropdown__option">Third Option</li>
- </ul>
- <div class="sdc-dropdown__error">
- <!--[Will be replaced by the correct error icon]-->
- <svg class="svg-icon __exclamationTriangleFull" version="1.1" id="exclamation-triangle-full_icon" x="0px" y="0px" viewBox="0 0 19.9 18" xml:space="preserve"><path class="sdc-dropdown__error--icon" d="M19.6,14.3L12,1.3c-0.3-0.6-0.8-1-1.4-1.2C10-0.1,9.3,0,8.7,0.3c-0.4,0.3-0.6,0.6-0.9,1l-7.6,13c-0.3,0.5-0.4,1.2-0.2,1.8
- c0.2,0.6,0.6,1.1,1.1,1.4C1.6,17.8,1.9,18,2.4,18h15.1c1.3,0,2.4-1.1,2.4-2.4C19.9,15.1,19.8,14.7,19.6,14.3z M10.5,14.2
- c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,14.2z M10.5,9.9c0,0.3-0.2,0.5-0.5,0.5
- s-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,9.9z"></path></svg>
- Error message!
- </div>
-</div>
-
diff --git a/components/dropdown/dropdown.html b/components/dropdown/dropdown.html
deleted file mode 100644
index 440f70b..0000000
--- a/components/dropdown/dropdown.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="sdc-dropdown">
- <label class="sdc-dropdown__label">DropDown example</label>
- <button class="sdc-dropdown__header">Please choose option</button>
- <ul class="sdc-dropdown__options-list">
- <li class="sdc-dropdown__option selected">First Option</li>
- <li class="sdc-dropdown__option">Second Option</li>
- <li class="sdc-dropdown__option">Third Option</li>
- </ul>
-</div>