|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- //
- // Buttons and things that look like buttons
- //
- // stylelint-disable color-named
-
- .btn {
- display: inline-block;
- box-sizing: border-box;
- padding-top: 0.3em;
- padding-right: 1em;
- padding-bottom: 0.3em;
- padding-left: 1em;
- margin: 0;
- font-family: inherit;
- font-size: inherit;
- font-weight: 500;
- line-height: 1.5;
- color: $link-color;
- text-decoration: none;
- vertical-align: baseline;
- cursor: pointer;
- background-color: $base-button-color;
- border-width: 0;
- border-radius: $border-radius;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
- appearance: none;
-
- &:focus {
- text-decoration: none;
- outline: none;
- box-shadow: 0 0 0 3px rgba(blue, 0.25);
- }
-
- &:focus:hover,
- &.selected:focus {
- box-shadow: 0 0 0 3px rgba(blue, 0.25);
- }
-
- &:hover,
- &.zeroclipboard-is-hover {
- color: darken($link-color, 2%);
- }
-
- &:hover,
- &:active,
- &.zeroclipboard-is-hover,
- &.zeroclipboard-is-active {
- text-decoration: none;
- background-color: darken($base-button-color, 1%);
- }
-
- &:active,
- &.selected,
- &.zeroclipboard-is-active {
- background-color: darken($base-button-color, 3%);
- background-image: none;
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
- }
-
- &.selected:hover {
- background-color: darken(#dcdcdc, 5%);
- }
-
- &:disabled,
- &.disabled {
- &,
- &:hover {
- color: rgba(102, 102, 102, 0.5);
- cursor: default;
- background-color: rgba(229, 229, 229, 0.5);
- background-image: none;
- box-shadow: none;
- }
- }
- }
-
- .btn-outline {
- color: $link-color;
- background: transparent;
- box-shadow: inset 0 0 0 2px $grey-lt-300;
-
- &:hover,
- &:active,
- &.zeroclipboard-is-hover,
- &.zeroclipboard-is-active {
- color: darken($link-color, 4%);
- text-decoration: none;
- background-color: transparent;
- box-shadow: inset 0 0 0 3px $grey-lt-300;
- }
-
- &:focus {
- text-decoration: none;
- outline: none;
- box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
- }
-
- &:focus:hover,
- &.selected:focus {
- box-shadow: inset 0 0 0 2px $grey-dk-100;
- }
- }
-
- .btn-primary {
- @include btn-color($white, $btn-primary-color);
- }
-
- .btn-purple {
- @include btn-color($white, $purple-100);
- }
-
- .btn-blue {
- @include btn-color($white, $blue-000);
- }
-
- .btn-green {
- @include btn-color($white, $green-100);
- }
|