選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

buttons.scss 2.3 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. //
  2. // Buttons and things that look like buttons
  3. //
  4. // stylelint-disable color-named
  5. .btn {
  6. display: inline-block;
  7. box-sizing: border-box;
  8. padding-top: 0.3em;
  9. padding-right: 1em;
  10. padding-bottom: 0.3em;
  11. padding-left: 1em;
  12. margin: 0;
  13. font-family: inherit;
  14. font-size: inherit;
  15. font-weight: 500;
  16. line-height: 1.5;
  17. color: $link-color;
  18. text-decoration: none;
  19. vertical-align: baseline;
  20. cursor: pointer;
  21. background-color: $base-button-color;
  22. border-width: 0;
  23. border-radius: $border-radius;
  24. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
  25. appearance: none;
  26. &:focus {
  27. text-decoration: none;
  28. outline: none;
  29. box-shadow: 0 0 0 3px rgba(blue, 0.25);
  30. }
  31. &:focus:hover,
  32. &.selected:focus {
  33. box-shadow: 0 0 0 3px rgba(blue, 0.25);
  34. }
  35. &:hover,
  36. &.zeroclipboard-is-hover {
  37. color: darken($link-color, 2%);
  38. }
  39. &:hover,
  40. &:active,
  41. &.zeroclipboard-is-hover,
  42. &.zeroclipboard-is-active {
  43. text-decoration: none;
  44. background-color: darken($base-button-color, 1%);
  45. }
  46. &:active,
  47. &.selected,
  48. &.zeroclipboard-is-active {
  49. background-color: darken($base-button-color, 3%);
  50. background-image: none;
  51. box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  52. }
  53. &.selected:hover {
  54. background-color: darken(#dcdcdc, 5%);
  55. }
  56. &:disabled,
  57. &.disabled {
  58. &,
  59. &:hover {
  60. color: rgba(102, 102, 102, 0.5);
  61. cursor: default;
  62. background-color: rgba(229, 229, 229, 0.5);
  63. background-image: none;
  64. box-shadow: none;
  65. }
  66. }
  67. }
  68. .btn-outline {
  69. color: $link-color;
  70. background: transparent;
  71. box-shadow: inset 0 0 0 2px $grey-lt-300;
  72. &:hover,
  73. &:active,
  74. &.zeroclipboard-is-hover,
  75. &.zeroclipboard-is-active {
  76. color: darken($link-color, 4%);
  77. text-decoration: none;
  78. background-color: transparent;
  79. box-shadow: inset 0 0 0 3px $grey-lt-300;
  80. }
  81. &:focus {
  82. text-decoration: none;
  83. outline: none;
  84. box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
  85. }
  86. &:focus:hover,
  87. &.selected:focus {
  88. box-shadow: inset 0 0 0 2px $grey-dk-100;
  89. }
  90. }
  91. .btn-primary {
  92. @include btn-color($white, $btn-primary-color);
  93. }
  94. .btn-purple {
  95. @include btn-color($white, $purple-100);
  96. }
  97. .btn-blue {
  98. @include btn-color($white, $blue-000);
  99. }
  100. .btn-green {
  101. @include btn-color($white, $green-100);
  102. }