panel.sass 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. @import "../utilities/mixins"
  2. $panel-margin: $block-spacing !default
  3. $panel-item-border: 1px solid $border-light !default
  4. $panel-radius: $radius-large !default
  5. $panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
  6. $panel-heading-background-color: $border-light !default
  7. $panel-heading-color: $text-strong !default
  8. $panel-heading-line-height: 1.25 !default
  9. $panel-heading-padding: 0.75em 1em !default
  10. $panel-heading-radius: $radius !default
  11. $panel-heading-size: 1.25em !default
  12. $panel-heading-weight: $weight-bold !default
  13. $panel-tabs-font-size: 0.875em !default
  14. $panel-tab-border-bottom: 1px solid $border !default
  15. $panel-tab-active-border-bottom-color: $link-active-border !default
  16. $panel-tab-active-color: $link-active !default
  17. $panel-list-item-color: $text !default
  18. $panel-list-item-hover-color: $link !default
  19. $panel-block-color: $text-strong !default
  20. $panel-block-hover-background-color: $background !default
  21. $panel-block-active-border-left-color: $link !default
  22. $panel-block-active-color: $link-active !default
  23. $panel-block-active-icon-color: $link !default
  24. $panel-icon-color: $text-light !default
  25. $panel-colors: $colors !default
  26. .panel
  27. border-radius: $panel-radius
  28. box-shadow: $panel-shadow
  29. font-size: $size-normal
  30. &:not(:last-child)
  31. margin-bottom: $panel-margin
  32. // Colors
  33. @each $name, $components in $panel-colors
  34. $color: nth($components, 1)
  35. $color-invert: nth($components, 2)
  36. &.is-#{$name}
  37. .panel-heading
  38. background-color: $color
  39. color: $color-invert
  40. .panel-tabs a.is-active
  41. border-bottom-color: $color
  42. .panel-block.is-active .panel-icon
  43. color: $color
  44. .panel-tabs,
  45. .panel-block
  46. &:not(:last-child)
  47. border-bottom: $panel-item-border
  48. .panel-heading
  49. background-color: $panel-heading-background-color
  50. border-radius: $panel-radius $panel-radius 0 0
  51. color: $panel-heading-color
  52. font-size: $panel-heading-size
  53. font-weight: $panel-heading-weight
  54. line-height: $panel-heading-line-height
  55. padding: $panel-heading-padding
  56. .panel-tabs
  57. align-items: flex-end
  58. display: flex
  59. font-size: $panel-tabs-font-size
  60. justify-content: center
  61. a
  62. border-bottom: $panel-tab-border-bottom
  63. margin-bottom: -1px
  64. padding: 0.5em
  65. // Modifiers
  66. &.is-active
  67. border-bottom-color: $panel-tab-active-border-bottom-color
  68. color: $panel-tab-active-color
  69. .panel-list
  70. a
  71. color: $panel-list-item-color
  72. &:hover
  73. color: $panel-list-item-hover-color
  74. .panel-block
  75. align-items: center
  76. color: $panel-block-color
  77. display: flex
  78. justify-content: flex-start
  79. padding: 0.5em 0.75em
  80. input[type="checkbox"]
  81. +ltr-property("margin", 0.75em)
  82. & > .control
  83. flex-grow: 1
  84. flex-shrink: 1
  85. width: 100%
  86. &.is-wrapped
  87. flex-wrap: wrap
  88. &.is-active
  89. border-left-color: $panel-block-active-border-left-color
  90. color: $panel-block-active-color
  91. .panel-icon
  92. color: $panel-block-active-icon-color
  93. &:last-child
  94. border-bottom-left-radius: $panel-radius
  95. border-bottom-right-radius: $panel-radius
  96. a.panel-block,
  97. label.panel-block
  98. cursor: pointer
  99. &:hover
  100. background-color: $panel-block-hover-background-color
  101. .panel-icon
  102. +fa(14px, 1em)
  103. color: $panel-icon-color
  104. +ltr-property("margin", 0.75em)
  105. .fa
  106. font-size: inherit
  107. line-height: inherit