summaryrefslogtreecommitdiff
path: root/styles/_sass/components
diff options
context:
space:
mode:
Diffstat (limited to 'styles/_sass/components')
-rw-r--r--styles/_sass/components/breadcrumb.sass2
-rw-r--r--styles/_sass/components/card.sass23
-rw-r--r--styles/_sass/components/dropdown.sass20
-rw-r--r--styles/_sass/components/level.sass8
-rw-r--r--styles/_sass/components/list.sass10
-rw-r--r--styles/_sass/components/media.sass6
-rw-r--r--styles/_sass/components/menu.sass23
-rw-r--r--styles/_sass/components/message.sass33
-rw-r--r--styles/_sass/components/modal.sass6
-rw-r--r--styles/_sass/components/navbar.sass41
-rw-r--r--styles/_sass/components/pagination.sass26
-rw-r--r--styles/_sass/components/panel.sass43
-rw-r--r--styles/_sass/components/tabs.sass2
13 files changed, 157 insertions, 86 deletions
diff --git a/styles/_sass/components/breadcrumb.sass b/styles/_sass/components/breadcrumb.sass
index bcbd15b..3d7f4eb 100644
--- a/styles/_sass/components/breadcrumb.sass
+++ b/styles/_sass/components/breadcrumb.sass
@@ -5,7 +5,7 @@ $breadcrumb-item-active-color: $text-strong !default
$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default
-$breadcrumb-item-separator-color: $grey-light !default
+$breadcrumb-item-separator-color: $border-hover !default
.breadcrumb
@extend %block
diff --git a/styles/_sass/components/card.sass b/styles/_sass/components/card.sass
index ff12395..3cdf000 100644
--- a/styles/_sass/components/card.sass
+++ b/styles/_sass/components/card.sass
@@ -1,16 +1,21 @@
$card-color: $text !default
-$card-background-color: $white !default
-$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$card-background-color: $scheme-main !default
+$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$card-header-background-color: transparent !default
$card-header-color: $text-strong !default
-$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
+$card-header-padding: 0.75rem 1rem !default
+$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
$card-header-weight: $weight-bold !default
$card-content-background-color: transparent !default
+$card-content-padding: 1.5rem !default
$card-footer-background-color: transparent !default
-$card-footer-border-top: 1px solid $border !default
+$card-footer-border-top: 1px solid $border-light !default
+$card-footer-padding: 0.75rem !default
+
+$card-media-margin: $block-spacing !default
.card
background-color: $card-background-color
@@ -31,7 +36,7 @@ $card-footer-border-top: 1px solid $border !default
display: flex
flex-grow: 1
font-weight: $card-header-weight
- padding: 0.75rem
+ padding: $card-header-padding
&.is-centered
justify-content: center
@@ -40,7 +45,7 @@ $card-footer-border-top: 1px solid $border !default
cursor: pointer
display: flex
justify-content: center
- padding: 0.75rem
+ padding: $card-header-padding
.card-image
display: block
@@ -48,7 +53,7 @@ $card-footer-border-top: 1px solid $border !default
.card-content
background-color: $card-content-background-color
- padding: 1.5rem
+ padding: $card-content-padding
.card-footer
background-color: $card-footer-background-color
@@ -63,7 +68,7 @@ $card-footer-border-top: 1px solid $border !default
flex-grow: 1
flex-shrink: 0
justify-content: center
- padding: 0.75rem
+ padding: $card-footer-padding
&:not(:last-child)
border-right: $card-footer-border-top
@@ -71,4 +76,4 @@ $card-footer-border-top: 1px solid $border !default
.card
.media:not(:last-child)
- margin-bottom: 0.75rem
+ margin-bottom: $card-media-margin
diff --git a/styles/_sass/components/dropdown.sass b/styles/_sass/components/dropdown.sass
index aad663a..d62a6d8 100644
--- a/styles/_sass/components/dropdown.sass
+++ b/styles/_sass/components/dropdown.sass
@@ -1,17 +1,21 @@
-$dropdown-content-background-color: $white !default
+$dropdown-menu-min-width: 12rem !default
+
+$dropdown-content-background-color: $scheme-main !default
$dropdown-content-arrow: $link !default
$dropdown-content-offset: 4px !default
+$dropdown-content-padding-bottom: 0.5rem !default
+$dropdown-content-padding-top: 0.5rem !default
$dropdown-content-radius: $radius !default
-$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$dropdown-content-z: 20 !default
-$dropdown-item-color: $grey-dark !default
-$dropdown-item-hover-color: $black !default
+$dropdown-item-color: $text !default
+$dropdown-item-hover-color: $scheme-invert !default
$dropdown-item-hover-background-color: $background !default
$dropdown-item-active-color: $link-invert !default
$dropdown-item-active-background-color: $link !default
-$dropdown-divider-background-color: $border !default
+$dropdown-divider-background-color: $border-light !default
.dropdown
display: inline-flex
@@ -35,7 +39,7 @@ $dropdown-divider-background-color: $border !default
.dropdown-menu
display: none
left: 0
- min-width: 12rem
+ min-width: $dropdown-menu-min-width
padding-top: $dropdown-content-offset
position: absolute
top: 100%
@@ -45,8 +49,8 @@ $dropdown-divider-background-color: $border !default
background-color: $dropdown-content-background-color
border-radius: $dropdown-content-radius
box-shadow: $dropdown-content-shadow
- padding-bottom: 0.5rem
- padding-top: 0.5rem
+ padding-bottom: $dropdown-content-padding-bottom
+ padding-top: $dropdown-content-padding-top
.dropdown-item
color: $dropdown-item-color
diff --git a/styles/_sass/components/level.sass b/styles/_sass/components/level.sass
index a3b7716..608f291 100644
--- a/styles/_sass/components/level.sass
+++ b/styles/_sass/components/level.sass
@@ -1,3 +1,5 @@
+$level-item-spacing: ($block-spacing / 2) !default
+
.level
@extend %block
align-items: center
@@ -18,7 +20,7 @@
.level-item
&:not(:last-child)
margin-bottom: 0
- margin-right: 0.75rem
+ margin-right: $level-item-spacing
&:not(.is-narrow)
flex-grow: 1
// Responsiveness
@@ -41,7 +43,7 @@
// Responsiveness
+mobile
&:not(:last-child)
- margin-bottom: 0.75rem
+ margin-bottom: $level-item-spacing
.level-left,
.level-right
@@ -55,7 +57,7 @@
// Responsiveness
+tablet
&:not(:last-child)
- margin-right: 0.75rem
+ margin-right: $level-item-spacing
.level-left
align-items: center
diff --git a/styles/_sass/components/list.sass b/styles/_sass/components/list.sass
index eccd034..bc99428 100644
--- a/styles/_sass/components/list.sass
+++ b/styles/_sass/components/list.sass
@@ -1,5 +1,5 @@
-$list-background-color: $white !default
-$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$list-background-color: $scheme-main !default
+$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
$list-radius: $radius !default
$list-item-border: 1px solid $border !default
@@ -26,8 +26,8 @@ $list-item-hover-background-color: $background !default
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:last-child
- border-top-left-radius: $list-radius
- border-top-right-radius: $list-radius
+ border-bottom-left-radius: $list-radius
+ border-bottom-right-radius: $list-radius
&:not(:last-child)
border-bottom: $list-item-border
&.is-active
@@ -36,4 +36,4 @@ $list-item-hover-background-color: $background !default
a.list-item
background-color: $list-item-hover-background-color
- cursor: pointer \ No newline at end of file
+ cursor: pointer
diff --git a/styles/_sass/components/media.sass b/styles/_sass/components/media.sass
index e8542d8..65939fc 100644
--- a/styles/_sass/components/media.sass
+++ b/styles/_sass/components/media.sass
@@ -1,3 +1,5 @@
+$media-border-color: rgba($border, 0.5) !default
+
.media
align-items: flex-start
display: flex
@@ -5,7 +7,7 @@
.content:not(:last-child)
margin-bottom: 0.75rem
.media
- border-top: 1px solid rgba($border, 0.5)
+ border-top: 1px solid $media-border-color
display: flex
padding-top: 0.75rem
.content:not(:last-child),
@@ -16,7 +18,7 @@
& + .media
margin-top: 0.5rem
& + .media
- border-top: 1px solid rgba($border, 0.5)
+ border-top: 1px solid $media-border-color
margin-top: 1rem
padding-top: 1rem
// Sizes
diff --git a/styles/_sass/components/menu.sass b/styles/_sass/components/menu.sass
index 727df36..3de7e18 100644
--- a/styles/_sass/components/menu.sass
+++ b/styles/_sass/components/menu.sass
@@ -6,8 +6,15 @@ $menu-item-active-color: $link-invert !default
$menu-item-active-background-color: $link !default
$menu-list-border-left: 1px solid $border !default
+$menu-list-line-height: 1.25 !default
+$menu-list-link-padding: 0.5em 0.75em !default
+$menu-nested-list-margin: 0.75em !default
+$menu-nested-list-padding-left: 0.75em !default
$menu-label-color: $text-light !default
+$menu-label-font-size: 0.75em !default
+$menu-label-letter-spacing: 0.1em !default
+$menu-label-spacing: 1em !default
.menu
font-size: $size-normal
@@ -20,12 +27,12 @@ $menu-label-color: $text-light !default
font-size: $size-large
.menu-list
- line-height: 1.25
+ line-height: $menu-list-line-height
a
border-radius: $menu-item-radius
color: $menu-item-color
display: block
- padding: 0.5em 0.75em
+ padding: $menu-list-link-padding
&:hover
background-color: $menu-item-hover-background-color
color: $menu-item-hover-color
@@ -36,15 +43,15 @@ $menu-label-color: $text-light !default
li
ul
border-left: $menu-list-border-left
- margin: 0.75em
- padding-left: 0.75em
+ margin: $menu-nested-list-margin
+ padding-left: $menu-nested-list-padding-left
.menu-label
color: $menu-label-color
- font-size: 0.75em
- letter-spacing: 0.1em
+ font-size: $menu-label-font-size
+ letter-spacing: $menu-label-letter-spacing
text-transform: uppercase
&:not(:first-child)
- margin-top: 1em
+ margin-top: $menu-label-spacing
&:not(:last-child)
- margin-bottom: 1em
+ margin-bottom: $menu-label-spacing
diff --git a/styles/_sass/components/message.sass b/styles/_sass/components/message.sass
index badac5d..89e4cc9 100644
--- a/styles/_sass/components/message.sass
+++ b/styles/_sass/components/message.sass
@@ -13,10 +13,11 @@ $message-body-color: $text !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default
-$message-body-pre-background-color: $white !default
+$message-body-pre-background-color: $scheme-main !default
$message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default
+$message-colors: $colors !default
.message
@extend %block
@@ -36,21 +37,33 @@ $message-header-body-border-width: 0 !default
&.is-large
font-size: $size-large
// Colors
- @each $name, $pair in $colors
- $color: nth($pair, 1)
- $color-invert: nth($pair, 2)
- $color-lightning: max((100% - lightness($color)) - 2%, 0%)
- $color-luminance: colorLuminance($color)
- $darken-percentage: $color-luminance * 70%
- $desaturate-percentage: $color-luminance * 30%
+ @each $name, $components in $message-colors
+ $color: nth($components, 1)
+ $color-invert: nth($components, 2)
+ $color-light: null
+ $color-dark: null
+
+ @if length($components) >= 3
+ $color-light: nth($components, 3)
+ @if length($components) >= 4
+ $color-dark: nth($components, 4)
+ @else
+ $color-luminance: colorLuminance($color)
+ $darken-percentage: $color-luminance * 70%
+ $desaturate-percentage: $color-luminance * 30%
+ $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+ @else
+ $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+ $color-light: lighten($color, $color-lightning)
+
&.is-#{$name}
- background-color: lighten($color, $color-lightning)
+ background-color: $color-light
.message-header
background-color: $color
color: $color-invert
.message-body
border-color: $color
- color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+ color: $color-dark
.message-header
align-items: center
diff --git a/styles/_sass/components/modal.sass b/styles/_sass/components/modal.sass
index b6fb1a1..c3a5a0c 100644
--- a/styles/_sass/components/modal.sass
+++ b/styles/_sass/components/modal.sass
@@ -1,6 +1,6 @@
$modal-z: 40 !default
-$modal-background-background-color: rgba($black, 0.86) !default
+$modal-background-background-color: rgba($scheme-invert, 0.86) !default
$modal-content-width: 640px !default
$modal-content-margin-mobile: 20px !default
@@ -25,7 +25,7 @@ $modal-card-title-size: $size-4 !default
$modal-card-foot-radius: $radius-large !default
$modal-card-foot-border-top: 1px solid $border !default
-$modal-card-body-background-color: $white !default
+$modal-card-body-background-color: $scheme-main !default
$modal-card-body-padding: 20px !default
.modal
@@ -102,7 +102,7 @@ $modal-card-body-padding: 20px !default
border-top: $modal-card-foot-border-top
.button
&:not(:last-child)
- margin-right: 10px
+ margin-right: 0.5em
.modal-card-body
+overflow-touch
diff --git a/styles/_sass/components/navbar.sass b/styles/_sass/components/navbar.sass
index dc90dd9..664558f 100644
--- a/styles/_sass/components/navbar.sass
+++ b/styles/_sass/components/navbar.sass
@@ -1,4 +1,4 @@
-$navbar-background-color: $white !default
+$navbar-background-color: $scheme-main !default
$navbar-box-shadow-size: 0 2px 0 0 !default
$navbar-box-shadow-color: $background !default
$navbar-height: 3.25rem !default
@@ -7,10 +7,10 @@ $navbar-padding-horizontal: 2rem !default
$navbar-z: 30 !default
$navbar-fixed-z: 30 !default
-$navbar-item-color: $grey-dark !default
+$navbar-item-color: $text !default
$navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $white-bis !default
-$navbar-item-active-color: $black !default
+$navbar-item-hover-background-color: $scheme-main-bis !default
+$navbar-item-active-color: $scheme-invert !default
$navbar-item-active-background-color: transparent !default
$navbar-item-img-max-height: 1.75rem !default
@@ -24,7 +24,7 @@ $navbar-tab-active-border-bottom-color: $link !default
$navbar-tab-active-border-bottom-style: solid !default
$navbar-tab-active-border-bottom-width: 3px !default
-$navbar-dropdown-background-color: $white !default
+$navbar-dropdown-background-color: $scheme-main !default
$navbar-dropdown-border-top: 2px solid $border !default
$navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default
@@ -32,9 +32,9 @@ $navbar-dropdown-radius: $radius-large !default
$navbar-dropdown-z: 20 !default
$navbar-dropdown-boxed-radius: $radius-large !default
-$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
-$navbar-dropdown-item-hover-color: $black !default
+$navbar-dropdown-item-hover-color: $scheme-invert !default
$navbar-dropdown-item-hover-background-color: $background !default
$navbar-dropdown-item-active-color: $link !default
$navbar-dropdown-item-active-background-color: $background !default
@@ -69,6 +69,7 @@ $navbar-breakpoint: $desktop !default
color: $color-invert
& > a.navbar-item,
.navbar-link
+ &:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
@@ -86,6 +87,7 @@ $navbar-breakpoint: $desktop !default
color: $color-invert
& > a.navbar-item,
.navbar-link
+ &:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
@@ -93,6 +95,7 @@ $navbar-breakpoint: $desktop !default
.navbar-link
&::after
border-color: $color-invert
+ .navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link
background-color: darken($color, 5%)
@@ -135,6 +138,7 @@ body
.navbar-brand
a.navbar-item
+ &:focus,
&:hover
background-color: transparent
@@ -167,6 +171,8 @@ body
a.navbar-item,
.navbar-link
cursor: pointer
+ &:focus,
+ &:focus-within,
&:hover,
&.is-active
background-color: $navbar-item-hover-background-color
@@ -187,6 +193,7 @@ a.navbar-item,
border-bottom: 1px solid transparent
min-height: $navbar-height
padding-bottom: calc(0.5rem - 1px)
+ &:focus,
&:hover
background-color: $navbar-tab-hover-background-color
border-bottom-color: $navbar-tab-hover-border-bottom-color
@@ -238,7 +245,7 @@ a.navbar-item,
display: none
.navbar-menu
background-color: $navbar-background-color
- box-shadow: 0 8px 16px rgba($black, 0.1)
+ box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
padding: 0.5rem 0
&.is-active
display: block
@@ -250,7 +257,7 @@ a.navbar-item,
&.is-fixed-bottom-touch
bottom: 0
&.has-shadow
- box-shadow: 0 -2px 3px rgba($black, 0.1)
+ box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
&.is-fixed-top-touch
top: 0
&.is-fixed-top,
@@ -286,16 +293,20 @@ a.navbar-item,
&.is-transparent
a.navbar-item,
.navbar-link
+ &:focus,
&:hover,
&.is-active
background-color: transparent !important
.navbar-item.has-dropdown
&.is-active,
+ &.is-hoverable:focus,
+ &.is-hoverable:focus-within,
&.is-hoverable:hover
.navbar-link
background-color: transparent !important
.navbar-dropdown
a.navbar-item
+ &:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
@@ -320,9 +331,11 @@ a.navbar-item,
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
border-top: none
bottom: 100%
- box-shadow: 0 -8px 8px rgba($black, 0.1)
+ box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
top: auto
&.is-active,
+ &.is-hoverable:focus,
+ &.is-hoverable:focus-within,
&.is-hoverable:hover
.navbar-dropdown
display: block
@@ -345,7 +358,7 @@ a.navbar-item,
border-bottom-left-radius: $navbar-dropdown-radius
border-bottom-right-radius: $navbar-dropdown-radius
border-top: $navbar-dropdown-border-top
- box-shadow: 0 8px 8px rgba($black, 0.1)
+ box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
display: none
font-size: 0.875rem
left: 0
@@ -358,6 +371,7 @@ a.navbar-item,
white-space: nowrap
a.navbar-item
padding-right: 3rem
+ &:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
@@ -395,7 +409,7 @@ a.navbar-item,
&.is-fixed-bottom-desktop
bottom: 0
&.has-shadow
- box-shadow: 0 -2px 3px rgba($black, 0.1)
+ box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
&.is-fixed-top-desktop
top: 0
html,
@@ -413,9 +427,10 @@ a.navbar-item,
.navbar-link
&.is-active
color: $navbar-item-active-color
- &.is-active:not(:hover)
+ &.is-active:not(:focus):not(:hover)
background-color: $navbar-item-active-background-color
.navbar-item.has-dropdown
+ &:focus,
&:hover,
&.is-active
.navbar-link
diff --git a/styles/_sass/components/pagination.sass b/styles/_sass/components/pagination.sass
index 9b8fd03..822c2e8 100644
--- a/styles/_sass/components/pagination.sass
+++ b/styles/_sass/components/pagination.sass
@@ -1,8 +1,13 @@
-$pagination-color: $grey-darker !default
-$pagination-border-color: $grey-lighter !default
+$pagination-color: $text-strong !default
+$pagination-border-color: $border !default
$pagination-margin: -0.25rem !default
$pagination-min-width: $control-height !default
+$pagination-item-font-size: 1em !default
+$pagination-item-margin: 0.25rem !default
+$pagination-item-padding-left: 0.5em !default
+$pagination-item-padding-right: 0.5em !default
+
$pagination-hover-color: $link-hover !default
$pagination-hover-border-color: $link-hover-border !default
@@ -12,9 +17,9 @@ $pagination-focus-border-color: $link-focus-border !default
$pagination-active-color: $link-active !default
$pagination-active-border-color: $link-active-border !default
-$pagination-disabled-color: $grey !default
-$pagination-disabled-background-color: $grey-lighter !default
-$pagination-disabled-border-color: $grey-lighter !default
+$pagination-disabled-color: $text-light !default
+$pagination-disabled-background-color: $border !default
+$pagination-disabled-border-color: $border !default
$pagination-current-color: $link-invert !default
$pagination-current-background-color: $link !default
@@ -22,9 +27,10 @@ $pagination-current-border-color: $link !default
$pagination-ellipsis-color: $grey-light !default
-$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
+$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
.pagination
+ @extend %block
font-size: $size-normal
margin: $pagination-margin
// Sizes
@@ -56,11 +62,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination-ellipsis
@extend %control
@extend %unselectable
- font-size: 1em
- padding-left: 0.5em
- padding-right: 0.5em
+ font-size: $pagination-item-font-size
justify-content: center
- margin: 0.25rem
+ margin: $pagination-item-margin
+ padding-left: $pagination-item-padding-left
+ padding-right: $pagination-item-padding-right
text-align: center
.pagination-previous,
diff --git a/styles/_sass/components/panel.sass b/styles/_sass/components/panel.sass
index b9d339e..3c32be6 100644
--- a/styles/_sass/components/panel.sass
+++ b/styles/_sass/components/panel.sass
@@ -1,13 +1,17 @@
-$panel-item-border: 1px solid $border !default
+$panel-margin: $block-spacing !default
+$panel-item-border: 1px solid $border-light !default
+$panel-radius: $radius-large !default
+$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
-$panel-heading-background-color: $background !default
+$panel-heading-background-color: $border-light !default
$panel-heading-color: $text-strong !default
$panel-heading-line-height: 1.25 !default
-$panel-heading-padding: 0.5em 0.75em !default
+$panel-heading-padding: 0.75em 1em !default
$panel-heading-radius: $radius !default
$panel-heading-size: 1.25em !default
-$panel-heading-weight: $weight-light !default
+$panel-heading-weight: $weight-bold !default
+$panel-tabs-font-size: 0.875em !default
$panel-tab-border-bottom: 1px solid $border !default
$panel-tab-active-border-bottom-color: $link-active-border !default
$panel-tab-active-color: $link-active !default
@@ -24,22 +28,32 @@ $panel-block-active-icon-color: $link !default
$panel-icon-color: $text-light !default
.panel
+ border-radius: $panel-radius
+ box-shadow: $panel-shadow
font-size: $size-normal
&:not(:last-child)
- margin-bottom: 1.5rem
+ margin-bottom: $panel-margin
+ // Colors
+ @each $name, $components in $message-colors
+ $color: nth($components, 1)
+ $color-invert: nth($components, 2)
+ &.is-#{$name}
+ .panel-heading
+ background-color: $color
+ color: $color-invert
+ .panel-tabs a.is-active
+ border-bottom-color: $color
+ .panel-block.is-active .panel-icon
+ color: $color
-.panel-heading,
.panel-tabs,
.panel-block
- border-bottom: $panel-item-border
- border-left: $panel-item-border
- border-right: $panel-item-border
- &:first-child
- border-top: $panel-item-border
+ &:not(:last-child)
+ border-bottom: $panel-item-border
.panel-heading
background-color: $panel-heading-background-color
- border-radius: $panel-heading-radius $panel-heading-radius 0 0
+ border-radius: $panel-radius $panel-radius 0 0
color: $panel-heading-color
font-size: $panel-heading-size
font-weight: $panel-heading-weight
@@ -49,7 +63,7 @@ $panel-icon-color: $text-light !default
.panel-tabs
align-items: flex-end
display: flex
- font-size: 0.875em
+ font-size: $panel-tabs-font-size
justify-content: center
a
border-bottom: $panel-tab-border-bottom
@@ -85,6 +99,9 @@ $panel-icon-color: $text-light !default
color: $panel-block-active-color
.panel-icon
color: $panel-block-active-icon-color
+ &:last-child
+ border-bottom-left-radius: $panel-radius
+ border-bottom-right-radius: $panel-radius
a.panel-block,
label.panel-block
diff --git a/styles/_sass/components/tabs.sass b/styles/_sass/components/tabs.sass
index 21ed90a..8c28c25 100644
--- a/styles/_sass/components/tabs.sass
+++ b/styles/_sass/components/tabs.sass
@@ -12,7 +12,7 @@ $tabs-boxed-link-radius: $radius !default
$tabs-boxed-link-hover-background-color: $background !default
$tabs-boxed-link-hover-border-bottom-color: $border !default
-$tabs-boxed-link-active-background-color: $white !default
+$tabs-boxed-link-active-background-color: $scheme-main !default
$tabs-boxed-link-active-border-color: $border !default
$tabs-boxed-link-active-border-bottom-color: transparent !default
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 01:36:16 +0000