You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_button.scss 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /*
  2. * DreamTime.
  3. * Copyright (C) DreamNet. All rights reserved.
  4. *
  5. * This program is free software: you can redistribute it and/or modify
  6. * it under the terms of the GNU General Public License 3.0 as published by
  7. * the Free Software Foundation. See <https://www.gnu.org/licenses/gpl-3.0.html>
  8. *
  9. * Written by Ivan Bravo Bravo <ivan@dreamnet.tech>, 2019.
  10. */
  11. .button {
  12. @apply inline-flex items-center justify-center;
  13. @apply px-3 rounded bg-button text-white font-semibold;
  14. @apply outline-none #{!important};
  15. @include transition('background-color, color');
  16. height: 35px;
  17. &:hover,
  18. &:active {
  19. @apply bg-button-dark;
  20. }
  21. &.button--xs {
  22. @apply text-xs;
  23. height: 25px;
  24. }
  25. &.button--sm {
  26. @apply text-sm;
  27. height: 30px;
  28. }
  29. &.button--xl {
  30. @apply px-6 text-xl;
  31. height: 45px;
  32. }
  33. &.button--active,
  34. &.nuxt-link-exact-active {
  35. @apply text-white bg-primary-500;
  36. }
  37. &.button--primary {
  38. @apply bg-primary text-black;
  39. &:hover,
  40. &:active {
  41. @apply bg-primary-dark;
  42. }
  43. }
  44. &.button--warning {
  45. @apply bg-warning text-black;
  46. &:hover,
  47. &:active {
  48. @apply bg-warning-700;
  49. }
  50. }
  51. &.button--danger {
  52. @apply bg-danger text-black;
  53. &:hover,
  54. &:active {
  55. @apply bg-danger-dark;
  56. }
  57. }
  58. &.button--success {
  59. @apply bg-success text-black;
  60. &:hover,
  61. &:active {
  62. @apply bg-success-dark;
  63. }
  64. }
  65. &.button--info {
  66. @apply bg-blue text-black;
  67. &:hover,
  68. &:active {
  69. @apply bg-blue-dark;
  70. }
  71. }
  72. .icon {
  73. @apply mr-2;
  74. }
  75. }
  76. .buttons {
  77. @apply flex flex-wrap;
  78. .button {
  79. @apply flex-1 rounded-none;
  80. &:first-child {
  81. @apply rounded-l;
  82. }
  83. &:last-child {
  84. @apply rounded-r;
  85. }
  86. }
  87. }