No Description

_alerts.scss 1.6KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. .alert{
  2. border: 0;
  3. color: $white;
  4. .alert-link{
  5. color: $white;
  6. }
  7. &.alert-success{
  8. background-color: darken($success, 10%);
  9. }
  10. i.fa,
  11. i.tim-icons{
  12. font-size: $font-paragraph;
  13. }
  14. .close{
  15. color: $white;
  16. opacity: .9;
  17. text-shadow: none;
  18. line-height: 0;
  19. outline: 0;
  20. }
  21. span[data-notify="icon"]{
  22. font-size: 22px;
  23. display: block;
  24. left: 19px;
  25. position: absolute;
  26. top: 50%;
  27. margin-top: -11px;
  28. }
  29. button.close{
  30. position: absolute;
  31. right: 15px;
  32. top: 50%;
  33. margin-top: -13px;
  34. width: 25px;
  35. height: 25px;
  36. padding: 3px;
  37. }
  38. .close ~ span{
  39. display: block;
  40. max-width: 89%;
  41. }
  42. &.alert-with-icon{
  43. padding-left: 65px;
  44. }
  45. }
  46. .alert-dismissible {
  47. .close {
  48. top: 50%;
  49. right: $alert-padding-x;
  50. padding: 0;
  51. transform: translateY(-50%);
  52. color: rgba($white, .6);
  53. opacity: 1;
  54. &:hover,
  55. &:focus {
  56. color: rgba($white, .9);
  57. opacity: 1 !important;
  58. }
  59. @include media-breakpoint-down(xs) {
  60. top: 1rem;
  61. right: .5rem;
  62. }
  63. &>span:not(.sr-only) {
  64. font-size: 1.5rem;
  65. background-color: transparent;
  66. color: rgba($white, .6);
  67. }
  68. &:hover,
  69. &:focus {
  70. &>span:not(.sr-only) {
  71. background-color: transparent;
  72. color: rgba($white, .9);
  73. }
  74. }
  75. }
  76. }