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.scss232
1 files changed, 232 insertions, 0 deletions
diff --git a/components/button/_button.scss b/components/button/_button.scss
new file mode 100644
index 0000000..329f80b
--- /dev/null
+++ b/components/button/_button.scss
@@ -0,0 +1,232 @@
+.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: $disabled-blue;
+ }
+ }
+
+ // 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: $disabled-blue;
+ border-color: $disabled-blue;
+ }
+ }
+
+ // 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: $disabled-blue;
+ }
+ }
+
+ // success
+ &.sdc-button__success {
+ border: 1px solid transparent;
+ background-color: $green;
+ color: $white;
+
+ &:not(:disabled) {
+ &:hover, &:active {
+ background-color: $light-green;
+ }
+ &:focus:not(:active) {
+ border: 1px solid $white;
+ background-color: $light-green;
+ box-shadow: 0px 0px 0px 1px $light-green;
+ }
+ }
+
+ &:disabled{
+ background: $disabled-green;
+ }
+ }
+
+ // error
+ &.sdc-button__error, &.sdc-button__alert {
+ border: 1px solid transparent;
+ background-color: $red;
+ color: $white;
+
+ &:not(:disabled) {
+ &:hover, &:active {
+ background-color: $light-red;
+ }
+ &:focus:not(:active) {
+ border: 1px solid $white;
+ background-color: $light-red;
+ box-shadow: 0px 0px 0px 1px $light-red;
+ }
+ }
+
+ &:disabled{
+ background: $disabled-red;
+ }
+ }
+
+ // warning
+ &.sdc-button__warning {
+ border: 1px solid transparent;
+ background-color: $yellow;
+ color: $white;
+
+ &:not(:disabled) {
+ &:hover, &:active {
+ background-color: $light-yellow;
+ }
+ &:focus:not(:active) {
+ border: 1px solid $white;
+ background-color: $light-yellow;
+ box-shadow: 0px 0px 0px 1px $light-yellow;
+ }
+ }
+
+ &:disabled{
+ background: $disabled-yellow;
+ }
+ }
+
+ // info
+ &.sdc-button__info {
+ 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: $disabled-blue;
+ }
+ }
+
+ /*** 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;
+ }
+}