108 lines
4.5 KiB
SCSS
108 lines
4.5 KiB
SCSS
/*
|
|
Mixin for collapse component.
|
|
Parameters:
|
|
- $collapse-name : The class name of the collapse component.
|
|
- $collapse-border : The border style of the collapse contents.
|
|
- $collapse-border-radius : The border radius of the collapse contents.
|
|
- $collapse-padding : The padding of the collapse contents.
|
|
- $collapse-margin-top : The margin above the collapse contents. [1]
|
|
- $collapse-color : The collapse contents' text color.
|
|
- $collapse-bg-color : The collapse contents' background color.
|
|
Notes:
|
|
- [1] : The value of $collapse-margin-top is used for spacing between the button label that is usually
|
|
above the collapsed contents and the contents themselves.
|
|
*/
|
|
@mixin make-collapse( $collapse-name, $collapse-border, $collapse-border-radius, $collapse-padding,
|
|
$collapse-margin-top, $collapse-color, $collapse-bg-color ){
|
|
input[type="checkbox"]{
|
|
&.#{$collapse-name}{
|
|
display: none;
|
|
& + div{
|
|
display: none;
|
|
color: $collapse-color;
|
|
background-color: $collapse-bg-color;
|
|
padding: $collapse-padding;
|
|
margin-top: $collapse-margin-top;
|
|
border: $collapse-border;
|
|
border-radius: $collapse-border-radius;
|
|
}
|
|
}
|
|
&:checked.#{$collapse-name}{
|
|
& + div{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/*
|
|
Mixin for accordion component.
|
|
Parameters:
|
|
- $accordion-name : The class name of the accordion component.
|
|
- $accordion-border : The border style of the accordion component.
|
|
- $accordion-border-radius : The border radius of the accordion component. [1]
|
|
- $accordion-padding : The padding of the accordion's contents.
|
|
- $accordion-margin : The margin between accordion's parts. [2]
|
|
- $accordion-color : The accordion contents' text color.
|
|
- $accordion-bg-color : The accordion contents' background color.
|
|
- $accordion-label-color : The accordion labels' text color.
|
|
- $accordion-label-bg-color : The accordion labels' background color.
|
|
- $accordion-label-padding : The padding of the accordion's labels.
|
|
- $accordion-hover-style : Hover/active/focus style of the accordion's labels. [3]
|
|
- $accordion-hover-style-percentage : Hover/active/focus style of the accordion's labels percentage modifier.
|
|
Notes:
|
|
- [1] : The value of $accordion-border-radius will be applied to labels along with their contents.
|
|
Closed labels will have the border-radius applied to all of their corners, while open labels will
|
|
change accordingly to combine their border with the shown contents.
|
|
- [2] : The value of $accordion-margin will be applied only to margin-bottom of all parts in order
|
|
to space them out evenly. This does not apply to label and related content margins.
|
|
- [3] : The values that $accordion-hover-style can take are `lighten` and `darken`. The inside condition only
|
|
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
|
|
*/
|
|
@mixin make-accordion( $accordion-name, $accordion-border, $accordion-border-radius, $accordion-padding,
|
|
$accordion-margin, $accordion-color, $accordion-bg-color, $accordion-label-color,
|
|
$accordion-label-bg-color, $accordion-label-padding, $accordion-hover-style,
|
|
$accordion-hover-style-percentage ){
|
|
input[type="radio"]{
|
|
&.#{$accordion-name}{
|
|
display: none;
|
|
& + label{
|
|
width: 100%;
|
|
display: block;
|
|
color: $accordion-label-color;
|
|
background-color: $accordion-label-bg-color;
|
|
padding: $accordion-label-padding;
|
|
margin-bottom: $accordion-margin;
|
|
border: $accordion-border;
|
|
border-radius: $accordion-border-radius;
|
|
cursor: pointer;
|
|
&:hover, &:active, &:focus{
|
|
@if $accordion-hover-style == 'lighten'{
|
|
background-color: lighten($accordion-label-bg-color, $accordion-hover-style-percentage);
|
|
}
|
|
@else{
|
|
background-color: darken($accordion-label-bg-color, $accordion-hover-style-percentage);
|
|
}
|
|
}
|
|
& + div{
|
|
display: none;
|
|
color: $accordion-color;
|
|
background-color: $accordion-bg-color;
|
|
padding: $accordion-padding;
|
|
margin-top: -1px;
|
|
margin-bottom: $accordion-margin;
|
|
border: $accordion-border;
|
|
border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
|
|
}
|
|
}
|
|
}
|
|
&:checked.#{$accordion-name}{
|
|
& + label{
|
|
border-radius: $accordion-border-radius $accordion-border-radius 0 0;
|
|
margin-bottom: 0;
|
|
& + div{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |