91 lines
1.7 KiB
SCSS
91 lines
1.7 KiB
SCSS
|
/* decor */
|
||
|
|
%button {
|
||
|
|
@extend %user-select-none;
|
||
|
|
cursor: pointer;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
%primary-button,
|
||
|
|
%secondary-button,
|
||
|
|
%copy-button,
|
||
|
|
%dangerous-button {
|
||
|
|
@extend %button;
|
||
|
|
}
|
||
|
|
%primary-button,
|
||
|
|
%secondary-button,
|
||
|
|
%dangerous-button {
|
||
|
|
border: $decor-border-100;
|
||
|
|
border-radius: $radius-small;
|
||
|
|
box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12);
|
||
|
|
}
|
||
|
|
%primary-button,
|
||
|
|
%copy-button {
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
%copy-button {
|
||
|
|
@extend %with-clipboard;
|
||
|
|
}
|
||
|
|
/* color */
|
||
|
|
%secondary-button,
|
||
|
|
%dangerous-button,
|
||
|
|
%copy-button {
|
||
|
|
border-color: currentColor;
|
||
|
|
}
|
||
|
|
%secondary-button {
|
||
|
|
color: $ui-gray-400;
|
||
|
|
}
|
||
|
|
%secondary-button:hover,
|
||
|
|
%secondary-button:focus {
|
||
|
|
color: $ui-gray-600;
|
||
|
|
}
|
||
|
|
%secondary-button:active {
|
||
|
|
color: $ui-gray-600;
|
||
|
|
}
|
||
|
|
%primary-button {
|
||
|
|
background-color: $ui-color-action;
|
||
|
|
color: $ui-white;
|
||
|
|
}
|
||
|
|
%primary-button:hover,
|
||
|
|
%primary-button:focus {
|
||
|
|
background-color: $ui-blue-700;
|
||
|
|
}
|
||
|
|
%primary-button:disabled {
|
||
|
|
color: rgba($ui-white, 0.5);
|
||
|
|
background-color: rgba($ui-blue-700, 0.5);
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
%primary-button:active {
|
||
|
|
background-color: $ui-blue-900;
|
||
|
|
}
|
||
|
|
%dangerous-button {
|
||
|
|
color: $ui-color-danger;
|
||
|
|
}
|
||
|
|
%dangerous-button:hover,
|
||
|
|
%dangerous-button:focus {
|
||
|
|
background-color: $ui-color-danger;
|
||
|
|
border-color: $ui-color-danger;
|
||
|
|
color: $ui-white;
|
||
|
|
}
|
||
|
|
%dangerous-button:disabled {
|
||
|
|
color: rgba($ui-color-danger, 0.5);
|
||
|
|
border-color: rgba($ui-color-danger, 0.5);
|
||
|
|
background-color: $ui-white;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
%dangerous-button:active {
|
||
|
|
background-color: $ui-red-700;
|
||
|
|
border-color: $ui-red-700;
|
||
|
|
color: $ui-white;
|
||
|
|
}
|
||
|
|
%copy-button {
|
||
|
|
color: $ui-color-action;
|
||
|
|
background-color: $ui-color-transparent;
|
||
|
|
}
|
||
|
|
%copy-button:hover,
|
||
|
|
%copy-button:focus {
|
||
|
|
color: $ui-color-action;
|
||
|
|
background-color: $ui-gray-050;
|
||
|
|
}
|
||
|
|
%copy-button:active {
|
||
|
|
background-color: $ui-gray-200;
|
||
|
|
}
|