google.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. // Google Theme for SweetAlert
  2. // By Tristan Edwards
  3. .sweet-overlay {
  4. background: rgba(10,10,10,.6);
  5. }
  6. .sweet-alert {
  7. $header-height: 40px;
  8. $footer-height: 66px;
  9. $text-color: #212121;
  10. $padding: 24px;
  11. $error-color: #d9453c;
  12. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  13. padding: $padding;
  14. padding-top: $header-height + $padding;
  15. padding-bottom: 13px;
  16. text-align: right; // Align buttons
  17. border-radius: 0;
  18. box-shadow: 0 0 14px rgba(black, 0.24),0 14px 28px rgba(black, 0.48);
  19. h2 {
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. right: 0;
  24. height: auto;
  25. font-weight: 400;
  26. color: $text-color;
  27. margin: 20px 0;
  28. font-size: 1.2em;
  29. line-height: 1.25;
  30. text-align: left;
  31. padding: 0 $padding;
  32. }
  33. p {
  34. display: block;
  35. text-align: center;
  36. color: $text-color;
  37. font-weight: 400;
  38. font-size: 14px;
  39. margin: 20px 0;
  40. }
  41. button {
  42. border-radius: 2px;
  43. box-shadow: none !important;
  44. background: none !important;
  45. border-radius: 2px;
  46. text-transform: uppercase;
  47. font-size: 14px;
  48. font-weight: 600;
  49. padding: 8px 16px;
  50. position: relative;
  51. margin-top: 0;
  52. &:hover, &:focus {
  53. background-color: #f6f6f6 !important;
  54. }
  55. &.confirm {
  56. color: #3c80f6;
  57. }
  58. &.cancel {
  59. color: #757575;
  60. &:focus {
  61. box-shadow: none !important;
  62. }
  63. }
  64. }
  65. .sa-icon:not(.sa-custom) {
  66. transform: scale(0.8);
  67. margin-bottom: -10px;
  68. margin-top: -10px;
  69. }
  70. input {
  71. border: none;
  72. border-radius: 0;
  73. border-bottom: 1px solid #c9c9c9;
  74. color: #212121;
  75. margin-bottom: 8px;
  76. padding: 1px;
  77. padding-bottom: 8px;
  78. height: auto;
  79. box-shadow: none;
  80. font-size: 13px;
  81. margin: 10px 0;
  82. &:focus {
  83. border: none;
  84. border-bottom: 1px solid #3c80f6;
  85. box-shadow: inset 0 -1px 0 #3c80f6;
  86. }
  87. }
  88. fieldset {
  89. padding: 0;
  90. .sa-input-error {
  91. display: none;
  92. }
  93. }
  94. .sa-error-container {
  95. display: none;
  96. background: none;
  97. height: auto;
  98. padding: 0 $padding;
  99. margin: 0 -20px;
  100. text-align: left;
  101. &.show {
  102. padding: 0 $padding;
  103. display: block;
  104. ~ fieldset input {
  105. background: red;
  106. border-bottom: 1px solid $error-color;
  107. box-shadow: inset 0 -1px 0 $error-color;
  108. }
  109. }
  110. .icon {
  111. display: none;
  112. }
  113. p {
  114. color: $error-color;
  115. margin-top: 0;
  116. }
  117. }
  118. }
  119. // Animations
  120. @mixin keyframes($animation-name) {
  121. @-webkit-keyframes #{$animation-name} {
  122. @content;
  123. }
  124. @keyframes #{$animation-name} {
  125. @content;
  126. }
  127. }
  128. @include keyframes(animateErrorIcon) {
  129. 0% { transform: rotateX(100deg), scale(0.5); -webkit-transform: rotateX(100deg), scale(0.5); opacity: 0; }
  130. 100% { transform: rotateX(0deg), scale(0.5); -webkit-transform: rotateX(0deg), scale(0.5); opacity: 1; }
  131. }