_card.scss 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. .card-group, .card-deck{
  2. margin-bottom: 0.75rem;
  3. }
  4. .card {
  5. // box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
  6. margin-bottom: $spacer * 2.2;
  7. border: none;
  8. border-radius: $border-radius;
  9. box-shadow: 0px 4px 25px 0px rgba(0,0,0,.1);
  10. transition: all .3s ease-in-out;
  11. .card {
  12. box-shadow: none !important;
  13. }
  14. .card-subtitle{
  15. margin-top: .5rem;
  16. }
  17. .card-title{
  18. font-weight: 500;
  19. letter-spacing: 0.05rem;
  20. font-size: 1.32rem;
  21. margin-bottom: $card-spacer-y / 3;
  22. }
  23. .card-bordered{
  24. border: $card-border-width solid $card-border-color;
  25. }
  26. .card-img{
  27. object-fit: cover;
  28. }
  29. .card-img-overlay{
  30. border-radius: $card-border-radius;
  31. }
  32. //fullscreen card
  33. &.card-fullscreen {
  34. display: block;
  35. z-index: 9999;
  36. position: fixed;
  37. width: 100% !important;
  38. height: 100% !important;
  39. top: 0;
  40. right: 0;
  41. left: 0;
  42. bottom: 0;
  43. overflow: auto;
  44. }
  45. .card-body[class*='border-bottom-'] {
  46. border-bottom-width: 2px !important;
  47. }
  48. .card-img-overlay{
  49. &.bg-overlay{
  50. background: rgba(0,0,0,0.45);
  51. }
  52. .text-muted{
  53. color:$gray-800 !important;
  54. }
  55. }
  56. &.card-minimal{
  57. border: none;
  58. box-shadow: none;
  59. }
  60. .card-header {
  61. display: flex;
  62. align-items: center;
  63. flex-wrap: wrap;
  64. justify-content: space-between;
  65. border-bottom: none;
  66. padding: 1.5rem 1.5rem 0;
  67. background-color: transparent;
  68. .card-title{
  69. margin-bottom: 0;
  70. }
  71. .heading-elements,
  72. .heading-elements-toggle{
  73. background-color: inherit;
  74. position: absolute;
  75. top: 17px;
  76. right: 21px;
  77. cursor: pointer;
  78. &.heading-top-elements{
  79. // top: 0px;
  80. .page-item{
  81. display: inline-block
  82. }
  83. }
  84. a{
  85. padding: 0;
  86. padding-left: 8px;
  87. &.btn{
  88. padding-top:6px;
  89. padding-bottom:6px;
  90. }
  91. &[data-action="collapse"]{
  92. i{
  93. transition: all .25s ease-out;
  94. display: inline-block;
  95. }
  96. &.rotate{
  97. i{
  98. transform: rotate(-180deg);
  99. }
  100. }
  101. }
  102. }
  103. }
  104. }
  105. .card-footer{
  106. border-top: 1px solid $gray-300;
  107. }
  108. }
  109. // Card Column
  110. .card-columns{
  111. .card{
  112. margin-bottom: $spacer * 2.2;
  113. }
  114. }
  115. .text-white{
  116. .card-text{
  117. color: rgba($white,1);
  118. }
  119. .card-img-overlay{
  120. .text-muted{
  121. color: $white !important;
  122. }
  123. }
  124. code{
  125. background-color: rgba($white, 1);
  126. }
  127. .heading-elements{
  128. i{
  129. color: $white;
  130. }
  131. }
  132. }
  133. .card-head-inverse{
  134. .heading-elements{
  135. i{
  136. color: $white;
  137. }
  138. }
  139. color: $white;
  140. }
  141. .card-transparent{
  142. background-color:transparent;
  143. }
  144. @include media-breakpoint-down(md) {
  145. .heading-elements{
  146. text-align: center;
  147. .list-inline{
  148. display: none;
  149. }
  150. &.visible{
  151. top: 22px !important;
  152. display: block;
  153. margin-top: 0;
  154. top: 100%;
  155. top: 50px;
  156. height: auto;
  157. left: 0px;
  158. // padding: 10px;
  159. z-index: 997;
  160. position: absolute;
  161. width: 100%;
  162. .list-inline{
  163. background-color: $white;
  164. display: block;
  165. position: absolute;
  166. top: 12px;
  167. right: 15px;
  168. }
  169. }
  170. }
  171. }
  172. @include media-breakpoint-up(lg) {
  173. .heading-elements-toggle{
  174. display: none;
  175. }
  176. }
  177. // overlay-img-card
  178. .overlay-img-card{
  179. .card-img-overlay,img{
  180. max-height: 34.64rem;
  181. }
  182. }
  183. // activity timeline for cards page
  184. .activity-timeline{
  185. // for left time line
  186. &.timeline-left{
  187. border-left: 2px solid $gray-300;
  188. padding-left: 40px;
  189. margin-left: 1.5rem;
  190. li{
  191. position: relative;
  192. margin-bottom: 20px;
  193. p{
  194. margin-bottom: 0;
  195. }
  196. //icon styles
  197. .timeline-icon{
  198. position: absolute;
  199. top: 0;
  200. left: -4.3rem;
  201. padding: .7rem;
  202. display: flex;
  203. align-items: center;
  204. border-radius: 50%;
  205. color: $white;
  206. i{
  207. vertical-align: sub;
  208. }
  209. }
  210. }
  211. }
  212. // for right timeline
  213. &.timeline-right{
  214. border-right: 2px solid $gray-300;
  215. padding-right: 40px;
  216. margin-right: 1.5rem;
  217. li{
  218. position: relative;
  219. margin-bottom: 20px;
  220. text-align: right;
  221. p{
  222. margin-bottom: 0;
  223. }
  224. // icon styles
  225. .timeline-icon{
  226. position: absolute;
  227. top: 0;
  228. right: -4.3rem;
  229. padding: .6rem .7rem;
  230. border-radius: 50%;
  231. color: $white;
  232. i{
  233. vertical-align: sub;
  234. }
  235. }
  236. }
  237. }
  238. }
  239. // IE Specific CSS
  240. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  241. // img-fluid class
  242. .card-body, .card-content{
  243. min-height: 1px;
  244. }
  245. .profile-card-2{
  246. .card{
  247. .card-header{
  248. display: block;
  249. }
  250. }
  251. }
  252. .profile-card-1,
  253. .profile-card-3{
  254. .card{
  255. .avatar{
  256. margin-left: auto;
  257. margin-right: auto;
  258. }
  259. }
  260. }
  261. }