1/* decor */ 2%button { 3 @extend %user-select-none; 4 cursor: pointer; 5 white-space: nowrap; 6} 7%button:disabled { 8 cursor: default; 9 box-shadow: none; 10} 11%copy-button { 12 @extend %button, %with-clipboard; 13} 14%primary-button, 15%secondary-button, 16%dangerous-button { 17 @extend %button; 18 border-width: 1px; 19 border-radius: $radius-small; 20 box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12); 21} 22/* color */ 23%copy-button { 24 color: $ui-color-action; 25 background-color: $ui-color-transparent; 26} 27%copy-button:hover:not(:disabled):not(:active), 28%copy-button:focus { 29 color: $ui-color-action; 30 background-color: $ui-gray-050; 31} 32%copy-button:disabled { 33} 34%copy-button:active { 35 background-color: $ui-gray-200; 36} 37%primary-button { 38 @extend %frame-blue-800; 39} 40%primary-button:hover:not(:disabled):not(:active), 41%primary-button:focus { 42 @extend %frame-blue-700; 43} 44%primary-button:disabled { 45 @extend %frame-blue-600; 46} 47%primary-button:hover:active { 48 @extend %frame-blue-900; 49} 50/**/ 51%secondary-button { 52 /* %frame-gray-something */ 53 color: $ui-gray-800; 54 background-color: $ui-gray-050; 55 border-color: $ui-gray-300; 56 border-style: solid; 57} 58%secondary-button:hover:not(:disabled):not(:active), 59%secondary-button:focus { 60 /* %frame-gray-something */ 61 background-color: $ui-white; 62 color: $ui-gray-800; 63 border-color: $ui-gray-700; 64} 65%secondary-button:disabled { 66 color: $ui-gray-600; 67} 68%secondary-button:active { 69 /* %frame-gray-something */ 70 background-color: $ui-gray-200; 71 color: $ui-gray-800; 72 border-color: $ui-gray-700; 73} 74/**/ 75%dangerous-button { 76 @extend %frame-red-300; 77} 78%dangerous-button:hover:not(:disabled):not(:active), 79%dangerous-button:focus { 80 @extend %frame-red-700; 81} 82%dangerous-button:disabled { 83 @extend %frame-red-600; 84} 85%dangerous-button:hover:active { 86 @extend %frame-red-900; 87} 88