_box.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. .box {
  2. position: relative;
  3. border-radius: .4rem;
  4. background: #ffffff;
  5. border-top: 2px solid transparent;
  6. margin-bottom: 10px;
  7. width: 100%;
  8. box-shadow: $shadow;
  9. display: flex;
  10. flex-direction: column;
  11. }
  12. .box .box-footer, .card .box-footer {
  13. border-top: 1px solid $divider-color;
  14. }
  15. .box-header {
  16. padding: 14px;
  17. display: inherit;
  18. justify-content: space-between;
  19. align-items: center;
  20. h3, .h3 {
  21. font-size: 1.25rem;
  22. margin-bottom: 0;
  23. }
  24. }
  25. .box-header.with-border {
  26. border-bottom: 1px solid $divider-color;
  27. }
  28. .box, .panel {
  29. transition: .3s cubic-bezier(.25,.8,.5,1);
  30. }
  31. .box-shadow {
  32. box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
  33. }
  34. .box.box-solid {
  35. border-top: 0;
  36. }
  37. .box-footer {
  38. display: inherit;
  39. border-top-left-radius: 0;
  40. border-top-right-radius: 0;
  41. border-bottom-right-radius: 3px;
  42. border-bottom-left-radius: 3px;
  43. padding: 10px;
  44. }
  45. .box-body {
  46. border-top-left-radius: 0;
  47. border-top-right-radius: 0;
  48. border-bottom-right-radius: 3px;
  49. border-bottom-left-radius: 3px;
  50. padding: 10px;
  51. .box-footer {
  52. margin: -10px;
  53. }
  54. }
  55. .box-default {
  56. border-color: $input-border-color;
  57. }
  58. .box-primary {
  59. border-color: $primary;
  60. }
  61. .box-info {
  62. border-color: $info;
  63. }
  64. .box-success {
  65. border-color: $success;
  66. }
  67. .box-danger {
  68. border-color: $danger;
  69. }
  70. .box.box-solid.box-default {
  71. border: 1px solid $input-border-color;
  72. }