panel.sass 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. $panel-margin: $block-spacing !default
  2. $panel-item-border: 1px solid $border !default
  3. $panel-heading-background-color: $background !default
  4. $panel-heading-color: $text-strong !default
  5. $panel-heading-line-height: 1.25 !default
  6. $panel-heading-padding: 0.5em 0.75em !default
  7. $panel-heading-radius: $radius !default
  8. $panel-heading-size: 1.25em !default
  9. $panel-heading-weight: $weight-light !default
  10. $panel-tabs-font-size: 0.875em !default
  11. $panel-tab-border-bottom: 1px solid $border !default
  12. $panel-tab-active-border-bottom-color: $link-active-border !default
  13. $panel-tab-active-color: $link-active !default
  14. $panel-list-item-color: $text !default
  15. $panel-list-item-hover-color: $link !default
  16. $panel-block-color: $text-strong !default
  17. $panel-block-hover-background-color: $background !default
  18. $panel-block-active-border-left-color: $link !default
  19. $panel-block-active-color: $link-active !default
  20. $panel-block-active-icon-color: $link !default
  21. $panel-icon-color: $text-light !default
  22. .panel
  23. font-size: $size-normal
  24. &:not(:last-child)
  25. margin-bottom: $panel-margin
  26. .panel-heading,
  27. .panel-tabs,
  28. .panel-block
  29. border-bottom: $panel-item-border
  30. border-left: $panel-item-border
  31. border-right: $panel-item-border
  32. &:first-child
  33. border-top: $panel-item-border
  34. .panel-heading
  35. background-color: $panel-heading-background-color
  36. border-radius: $panel-heading-radius $panel-heading-radius 0 0
  37. color: $panel-heading-color
  38. font-size: $panel-heading-size
  39. font-weight: $panel-heading-weight
  40. line-height: $panel-heading-line-height
  41. padding: $panel-heading-padding
  42. .panel-tabs
  43. align-items: flex-end
  44. display: flex
  45. font-size: $panel-tabs-font-size
  46. justify-content: center
  47. a
  48. border-bottom: $panel-tab-border-bottom
  49. margin-bottom: -1px
  50. padding: 0.5em
  51. // Modifiers
  52. &.is-active
  53. border-bottom-color: $panel-tab-active-border-bottom-color
  54. color: $panel-tab-active-color
  55. .panel-list
  56. a
  57. color: $panel-list-item-color
  58. &:hover
  59. color: $panel-list-item-hover-color
  60. .panel-block
  61. align-items: center
  62. color: $panel-block-color
  63. display: flex
  64. justify-content: flex-start
  65. padding: 0.5em 0.75em
  66. input[type="checkbox"]
  67. margin-right: 0.75em
  68. & > .control
  69. flex-grow: 1
  70. flex-shrink: 1
  71. width: 100%
  72. &.is-wrapped
  73. flex-wrap: wrap
  74. &.is-active
  75. border-left-color: $panel-block-active-border-left-color
  76. color: $panel-block-active-color
  77. .panel-icon
  78. color: $panel-block-active-icon-color
  79. a.panel-block,
  80. label.panel-block
  81. cursor: pointer
  82. &:hover
  83. background-color: $panel-block-hover-background-color
  84. .panel-icon
  85. +fa(14px, 1em)
  86. color: $panel-icon-color
  87. margin-right: 0.75em
  88. .fa
  89. font-size: inherit
  90. line-height: inherit