ekko-lightbox.less 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. .ekko-lightbox {
  2. &-container {
  3. position:relative;
  4. > div.ekko-lightbox-item {
  5. position:absolute;
  6. top:0;
  7. left:0;
  8. bottom:0;
  9. right:0;
  10. width:100%;
  11. }
  12. }
  13. iframe {
  14. width: 100%;
  15. height: 100%;
  16. }
  17. &-nav-overlay {
  18. z-index:100;
  19. position: absolute;
  20. top:0;
  21. left:0;
  22. width:100%;
  23. height:100%;
  24. display: flex;
  25. a {
  26. flex: 1;
  27. display:flex;
  28. align-items: center;
  29. opacity: 0;
  30. transition: opacity 0.5s;
  31. color: #fff;
  32. font-size:30px;
  33. z-index:100;
  34. > * {
  35. flex-grow:1;
  36. &:focus {
  37. outline: none;
  38. }
  39. }
  40. span {
  41. padding:0 30px;
  42. }
  43. &:last-child span {
  44. text-align: right;
  45. }
  46. &:hover {
  47. text-decoration: none;
  48. }
  49. &:focus {
  50. outline: none;
  51. }
  52. &.disabled {
  53. cursor: default;
  54. visibility: hidden;
  55. }
  56. }
  57. }
  58. a:hover {
  59. opacity: 1;
  60. text-decoration: none;
  61. }
  62. .modal-dialog {
  63. display:none;
  64. }
  65. .modal-footer {
  66. text-align: left;
  67. }
  68. // http://tobiasahlin.com/spinkit/
  69. &-loader {
  70. position:absolute;
  71. top:0;
  72. left:0;
  73. bottom:0;
  74. right:0;
  75. width:100%;
  76. display: flex; /* establish flex container */
  77. flex-direction: column; /* make main axis vertical */
  78. justify-content: center; /* center items vertically, in this case */
  79. align-items: center;
  80. > div {
  81. width: 40px;
  82. height: 40px;
  83. position: relative;
  84. text-align: center;
  85. > div {
  86. width: 100%;
  87. height: 100%;
  88. border-radius: 50%;
  89. background-color: #fff;
  90. opacity: 0.6;
  91. position: absolute;
  92. top: 0;
  93. left: 0;
  94. animation: sk-bounce 2.0s infinite ease-in-out;
  95. &:last-child {
  96. animation-delay: -1.0s;
  97. }
  98. }
  99. }
  100. }
  101. .modal-dialog &-loader {
  102. > div > div {
  103. background-color:#333;
  104. }
  105. }
  106. @-webkit-keyframes sk-bounce {
  107. 0%, 100% { -webkit-transform: scale(0.0) }
  108. 50% { -webkit-transform: scale(1.0) }
  109. }
  110. @keyframes sk-bounce {
  111. 0%, 100% {
  112. transform: scale(0.0);
  113. -webkit-transform: scale(0.0);
  114. } 50% {
  115. transform: scale(1.0);
  116. -webkit-transform: scale(1.0);
  117. }
  118. }
  119. }