_buttons.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. .btn:focus, .btn.focus {
  2. box-shadow: none;
  3. }
  4. .btn-primary {
  5. font-weight: $font-weight-bold;
  6. min-width: 6vw;
  7. }
  8. button,
  9. .btn {
  10. background: none;
  11. border: none;
  12. box-shadow: unset;
  13. text-decoration: none;
  14. color: $Color-Tailwind-Text;
  15. cursor: pointer;
  16. outline: none;
  17. * {
  18. color: $Color-Tailwind-Text;
  19. }
  20. &:disabled {
  21. // background-color: $Color-Text-Secondary-Dark;
  22. // border-color: $Color-Text-Secondary-Dark;
  23. opacity: 0.75;
  24. cursor: default;
  25. }
  26. &:hover {
  27. // background: $Color-Azure;
  28. // color: $Color-White;
  29. // border: 1px solid $Color-Azure;
  30. box-shadow: inset 0 0 10vw 10vw rgb(255 255 255 / 20%);
  31. }
  32. &:not(:disabled):not(.disabled):focus,
  33. &:not(:disabled):not(.disabled):active,
  34. &:not(:disabled):not(.disabled):active:focus {
  35. // background: $Color-White;
  36. // color: $Color-Azure;
  37. // border: 1px solid $Color-Azure;
  38. box-shadow: inset 0 0 10vw 10vw rgb(255 255 255 / 20%);
  39. }
  40. }
  41. // fieldset table a,
  42. // .btn,
  43. .btn-primary,
  44. .btn-secondary,
  45. .btn-outline-secondary {
  46. display: inline-block;
  47. position: relative;
  48. // font-size: 15px;
  49. text-align: center;
  50. line-height: normal;
  51. padding: 5px 10px;
  52. max-width: 100%;
  53. background: $Color-Azure;
  54. color: $Color-White;
  55. border-radius: 3vw;
  56. border: 1px solid $Color-Azure;
  57. box-sizing: border-box;
  58. cursor: pointer;
  59. -webkit-appearance: none;
  60. text-decoration: none;
  61. outline: 0;
  62. transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
  63. vertical-align: middle;
  64. margin: 6px;
  65. &:disabled {
  66. // background-color: $Color-Text-Secondary-Dark;
  67. // border-color: $Color-Text-Secondary-Dark;
  68. opacity: 0.75;
  69. cursor: default;
  70. }
  71. &:hover {
  72. background: $Color-Azure;
  73. color: $Color-White;
  74. border: 1px solid $Color-Azure;
  75. box-shadow: inset 0 0 10vw 10vw rgb(255 255 255 / 20%);
  76. }
  77. &:not(:disabled):not(.disabled):focus,
  78. &:not(:disabled):not(.disabled):active,
  79. &:not(:disabled):not(.disabled):active:focus {
  80. background: $Color-White;
  81. color: $Color-Azure;
  82. border: 1px solid $Color-Azure;
  83. box-shadow: inset 0 0 10vw 10vw rgb(255 255 255 / 20%);
  84. }
  85. }
  86. .btn-outline-secondary {
  87. background: none;
  88. color: $Color-White;
  89. border: 1px solid $Color-White;
  90. }
  91. .btn-link {
  92. padding: 0.375rem 0.5rem;
  93. }
  94. .btn-close {
  95. background: rgba(0,0,0,0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat
  96. }