aboutsummaryrefslogtreecommitdiffstats
path: root/components/button/_button.scss
diff options
context:
space:
mode:
Diffstat (limited to 'components/button/_button.scss')
-rw-r--r--components/button/_button.scss168
1 files changed, 0 insertions, 168 deletions
diff --git a/components/button/_button.scss b/components/button/_button.scss
deleted file mode 100644
index 3c21a45..0000000
--- a/components/button/_button.scss
+++ /dev/null
@@ -1,168 +0,0 @@
-.sdc-button {
- order:1;
- @include box-sizing;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- flex-direction: row;
- outline: none;
- border-radius: 2px;
- padding: 0 12px;
- height: 36px;
- line-height: 36px;
- width: 120px;
- min-width: 90px;
- cursor: pointer;
- text-align: center;
- text-transform: uppercase;
- @include body-1;
-
- &:disabled {
- cursor: default;
- }
-
- // Primary button
- &.sdc-button__primary {
- border: 1px solid transparent;
- background-color: $blue;
- color: $white;
-
- &:not(:disabled) {
- &:hover, &:active {
- background-color: $light-blue;
- }
- &:focus:not(:active) {
- border: 1px solid $white;
- background-color: $light-blue;
- box-shadow: 0px 0px 0px 1px $light-blue;
- }
- }
-
- &:disabled{
- background: $blue-disabled;
- }
- }
-
- // Secondary button
- &.sdc-button__secondary {
- border: 1px solid $blue;
- background-color: transparent;
- color: $blue;
-
- &:not(:disabled) {
- &:hover, &:active {
- background-color: $light-blue;
- color:$white;
- }
- &:focus:not(:active) {
- color: $light-blue;
- box-shadow: inset 0px 0px 0px 0px $dark-blue, 0px 0px 0px 1px $blue;
- &:hover {
- color: $white;
- }
- }
- }
-
- &:disabled {
- color: $blue-disabled;
- border-color: $blue-disabled;
- }
- }
-
- // Link button
- &.sdc-button__link {
- background-color: transparent;
- color: $blue;
- fill: $blue;
- border: none;
-
- &:not(:disabled) {
- &:hover, &:active {
- color: $light-blue;
- }
- &:focus:not(:active) {
- border: 1px solid $dark-blue;
- color: $light-blue;
- }
- }
-
- &:disabled{
- color: $blue-disabled;
- }
- }
-
-
- // alert button
- &.sdc-button__alert {
- border: none;
- background-color: $red;
- color: $white;
-
- &:not(:disabled) {
- &:hover, &:active {
- background-color: $light-red;
- }
- &:focus:not(:active) {
- border: 0.5px solid $white;
- background-color: $light-red;
- box-shadow: 0px 0px 0px 1px $light-red;
- }
- }
-
- &:disabled{
- background: $disabled-red;
- }
- }
-
-
- /*** Sizes ***/
- &.btn-large{
- width: $btn-large;
- }
-
- &.btn-medium{
- width: $btn-medium;
- }
-
- &.btn-small{
- width: $btn-small;
- }
-
- &.btn-x-small{
- width: $btn-extra-small;
- }
-
- &.btn-default{
- width: $btn-default;
- }
-
- /*** Buttons with icons ***/
- &.sdc-icon-right {
- flex-direction: row-reverse;
- .svg-icon {
- margin-left: 15px;
- }
- }
-
- &.sdc-icon-left {
- flex-direction: row;
- .svg-icon {
- margin-right: 15px;
- }
- }
-
- svg {
- display: inline-block;
- vertical-align: middle;
- }
-}
-.sdc-button__wrapper {
- display: inline-flex;
-}
-.sdc-button__spinner {
- padding-top: 6px;
- margin:0 2px;
- &.left {
- order:2;
- }
-}