mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-02 12:00:36 +02:00
355 lines
15 KiB
SCSS
355 lines
15 KiB
SCSS
/*
|
|
Definitions for contextual background elements, toasts and tooltips.
|
|
*/
|
|
$mark-back-color: #0277bd !default; // Background color for <mark>
|
|
$mark-fore-color: #fafafa !default; // Text color for <mark>
|
|
$mark-font-size: 0.95em !default; // Font size for <mark>
|
|
$mark-line-height: 1em !default; // Line height for <mark>
|
|
$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block <mark>
|
|
$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean)
|
|
$toast-name: 'toast' !default; // Class name for toast component
|
|
$toast-back-color: #424242 !default; // Background color for toast component
|
|
$toast-fore-color: #fafafa !default; // Text color for toast component
|
|
$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean)
|
|
$tooltip-name: 'tooltip' !default; // Class name for tooltip component
|
|
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
|
$tooltip-back-color: #212121 !default; // Background color for tooltip component
|
|
$tooltip-fore-color: #fafafa !default; // Text color for tooltip component
|
|
$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean)
|
|
$modal-name: 'modal' !default; // Class name for modal dialog component
|
|
$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component
|
|
$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button
|
|
$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component
|
|
$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus)
|
|
$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component
|
|
$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean)
|
|
$collapse-name: 'collapse' !default; // Class name for collapse component
|
|
$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component
|
|
$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component
|
|
$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component
|
|
$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component
|
|
$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover)
|
|
$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component
|
|
$collapse-border-color: #ddd !default; // Border color for collapse component
|
|
$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels
|
|
$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes
|
|
// CSS variable name definitions [exercise caution if modifying these]
|
|
$mark-back-color-var: '--mark-back-color' !default;
|
|
$mark-fore-color-var: '--mark-fore-color' !default;
|
|
$toast-back-color-var: '--toast-back-color' !default;
|
|
$toast-fore-color-var: '--toast-fore-color' !default;
|
|
$tooltip-back-color-var: '--tooltip-back-color' !default;
|
|
$tooltip-fore-color-var: '--tooltip-fore-color' !default;
|
|
$modal-overlay-color-var: '--modal-overlay-color' !default;
|
|
$modal-close-color-var: '--modal-close-color' !default;
|
|
$modal-close-hover-back-color-var: '--modal-close-hover-color' !default;
|
|
$collapse-label-back-color-var: '--collapse-label-back-color' !default;
|
|
$collapse-label-fore-color-var: '--collapse-label-fore-color' !default;
|
|
$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default;
|
|
$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default;
|
|
$collapse-border-color-var: '--collapse-border-color' !default;
|
|
$collapse-content-back-color-var: '--collapse-content-back-color' !default;
|
|
$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default;
|
|
// == Uncomment below code if this module is used on its own ==
|
|
//
|
|
// $base-line-height: 1.5 !default; // Line height for most elements
|
|
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
|
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
|
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
|
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
|
// $universal-margin-var: '--universal-margin' !default;
|
|
// $universal-padding-var: '--universal-padding' !default;
|
|
// $universal-border-radius-var: '--universal-border-radius' !default;
|
|
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
|
// :root {
|
|
// #{$universal-margin-var}: $universal-margin;
|
|
// #{$universal-padding-var}: $universal-padding;
|
|
// #{$universal-border-radius-var}: $universal-border-radius;
|
|
// @if $universal-box-shadow != none {
|
|
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
|
// }
|
|
// }
|
|
//
|
|
// ============================================================
|
|
// Check the `_contextual_mixins.scss` file to find this module's mixins.
|
|
@import '_contextual_mixins';
|
|
/* Contextual module CSS variable definitions */
|
|
:root {
|
|
#{$mark-back-color-var}: $mark-back-color;
|
|
#{$mark-fore-color-var}: $mark-fore-color;
|
|
}
|
|
// Default styling for mark. Use mixins for alternate styles.
|
|
mark {
|
|
background: var(#{$mark-back-color-var});
|
|
color: var(#{$mark-fore-color-var});
|
|
font-size: $mark-font-size;
|
|
line-height: $mark-line-height;
|
|
border-radius: var(#{$universal-border-radius-var});
|
|
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
|
|
@if $universal-box-shadow != none {
|
|
box-shadow: var(#{$universal-box-shadow-var});
|
|
}
|
|
&.#{$mark-inline-block-name} {
|
|
display: inline-block;
|
|
// This is hardcoded, as we want inline-block <mark> elements to be styled as normal pieces of text, instead of look small and weird.
|
|
font-size: 1em;
|
|
// Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons.
|
|
line-height: $base-line-height;
|
|
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
|
|
}
|
|
}
|
|
// Styling for toasts. - No border styling, I think it's unnecessary anyways.
|
|
@if $_include-toast {
|
|
:root {
|
|
#{$toast-back-color-var}: $toast-back-color;
|
|
#{$toast-fore-color-var}: $toast-fore-color;
|
|
}
|
|
.#{$toast-name} {
|
|
position: fixed;
|
|
bottom: calc(var(#{$universal-margin-var}) * 3);
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1111;
|
|
color: var(#{$toast-fore-color-var});
|
|
background: var(#{$toast-back-color-var});
|
|
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
|
|
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3);
|
|
@if $universal-box-shadow != none {
|
|
box-shadow: var(#{$universal-box-shadow-var});
|
|
}
|
|
}
|
|
}
|
|
// Styling for tooltips.
|
|
@if $_include-tooltip {
|
|
:root {
|
|
#{$tooltip-back-color-var}: $tooltip-back-color;
|
|
#{$tooltip-fore-color-var}: $tooltip-fore-color;
|
|
}
|
|
.#{$tooltip-name} {
|
|
position: relative;
|
|
display: inline-block;
|
|
&:before, &:after {
|
|
position: absolute;
|
|
opacity: 0;
|
|
clip: rect(0 0 0 0);
|
|
-webkit-clip-path: inset(100%);
|
|
clip-path: inset(100%);
|
|
transition: all 0.3s;
|
|
// Remember to keep this index a lower value than the one used for stickies.
|
|
z-index: 1010; // Deals with certain problems when combined with cards and tables.
|
|
left: 50%;
|
|
}
|
|
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
|
bottom: 75%;
|
|
}
|
|
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
|
top: 75%;
|
|
}
|
|
&:hover, &:focus {
|
|
&:before, &:after {
|
|
opacity: 1;
|
|
clip: auto;
|
|
-webkit-clip-path: inset(0%);
|
|
clip-path: inset(0%);
|
|
}
|
|
}
|
|
&:before { // This is the little tooltip triangle
|
|
content: '';
|
|
background: transparent;
|
|
border: var(#{$universal-margin-var}) solid transparent;
|
|
// Newer browsers will center the tail properly
|
|
left: calc(50% - var(#{$universal-margin-var}));
|
|
}
|
|
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
|
|
border-top-color: $tooltip-back-color;
|
|
}
|
|
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
|
|
border-bottom-color: $tooltip-back-color;
|
|
}
|
|
&:after { // This is the actual tooltip's text block
|
|
content: attr(aria-label);
|
|
color: var(#{$tooltip-fore-color-var});
|
|
background: var(#{$tooltip-back-color-var});
|
|
border-radius: var(#{$universal-border-radius-var});
|
|
padding: var(#{$universal-padding-var});
|
|
@if $universal-box-shadow != none {
|
|
box-shadow: var(#{$universal-box-shadow-var});
|
|
}
|
|
white-space: nowrap;
|
|
transform: translateX(-50%);
|
|
}
|
|
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
|
margin-bottom: calc(2 * var(#{$universal-margin-var}));
|
|
}
|
|
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
|
margin-top: calc(2 * var(#{$universal-margin-var}));
|
|
}
|
|
}
|
|
}
|
|
// Styling for modal dialogs.
|
|
@if $_include-modal {
|
|
:root {
|
|
#{$modal-overlay-color-var}: $modal-overlay-color;
|
|
#{$modal-close-color-var}: $modal-close-color;
|
|
#{$modal-close-hover-back-color-var}: $modal-close-hover-back-color;
|
|
}
|
|
[type="checkbox"].#{$modal-name} {
|
|
height: 1px;
|
|
width: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
clip: rect(0 0 0 0);
|
|
-webkit-clip-path: inset(100%);
|
|
clip-path: inset(100%);
|
|
& + div {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
display: none;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: var(#{$modal-overlay-color-var});
|
|
& .card {
|
|
margin: 0 auto;
|
|
max-height: 50vh;
|
|
overflow: auto;
|
|
& .#{$modal-close-name} {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: $modal-close-size;
|
|
height: $modal-close-size;
|
|
border-radius: var(#{$universal-border-radius-var});
|
|
padding: var(#{$universal-padding-var});
|
|
margin: 0;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
&:before {
|
|
display: block;
|
|
content: '\00D7';
|
|
color: var(#{$modal-close-color-var});
|
|
position: relative;
|
|
font-family: sans-serif;
|
|
font-size: $modal-close-size;
|
|
line-height: 1;
|
|
text-align: center;
|
|
}
|
|
&:hover, &:focus {
|
|
background: var(#{$modal-close-hover-back-color-var});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:checked + div {
|
|
display: flex;
|
|
flex: 0 1 auto;
|
|
z-index: 1200;
|
|
& .card {
|
|
& .#{$modal-close-name} {
|
|
z-index: 1211;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Styling for collapse.
|
|
@if $_include-collapse {
|
|
:root {
|
|
#{$collapse-label-back-color-var}: $collapse-label-back-color;
|
|
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
|
|
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
|
|
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
|
|
#{$collapse-border-color-var}: $collapse-border-color;
|
|
#{$collapse-content-back-color-var} : $collapse-content-back-color;
|
|
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
|
|
}
|
|
.#{$collapse-name} {
|
|
width: calc(100% - 2 * var(#{$universal-margin-var}));
|
|
opacity: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: var(#{$universal-margin-var});
|
|
border-radius: var(#{$universal-border-radius-var});
|
|
@if $universal-box-shadow != none {
|
|
box-shadow: var(#{$universal-box-shadow-var});
|
|
}
|
|
& > [type="radio"], & > [type="checkbox"] {
|
|
height: 1px;
|
|
width: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
clip: rect(0 0 0 0);
|
|
-webkit-clip-path: inset(100%);
|
|
clip-path: inset(100%);
|
|
}
|
|
& > label {
|
|
flex-grow: 1;
|
|
display: inline-block;
|
|
height: $collapse-label-height;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
color: var(#{$collapse-label-fore-color-var});
|
|
background: var(#{$collapse-label-back-color-var});
|
|
border: $__1px solid var(#{$collapse-border-color-var});
|
|
padding: calc(1.5 * var(#{$universal-padding-var}));
|
|
&:hover, &:focus {
|
|
background: var(#{$collapse-label-hover-back-color-var});
|
|
}
|
|
+ div {
|
|
flex-basis: auto;
|
|
height: 1px;
|
|
width: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
clip: rect(0 0 0 0);
|
|
-webkit-clip-path: inset(100%);
|
|
clip-path: inset(100%);
|
|
transition: max-height 0.3s;
|
|
max-height: 1px; // for transition
|
|
}
|
|
}
|
|
> :checked + label {
|
|
background: var(#{$collapse-selected-label-back-color-var});
|
|
// border: 0.0625rem solid #bdbdbd; // var it
|
|
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
|
|
& + div {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: auto;
|
|
margin: 0;
|
|
background: var(#{$collapse-content-back-color-var});
|
|
border: $__1px solid var(#{$collapse-border-color-var});
|
|
border-top: 0;
|
|
padding: var(#{$universal-padding-var});
|
|
clip: auto;
|
|
-webkit-clip-path: inset(0%);
|
|
clip-path: inset(0%);
|
|
max-height: $collapse-content-max-height;
|
|
}
|
|
}
|
|
& > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles.
|
|
border-top: 0;
|
|
}
|
|
& > label:first-of-type {
|
|
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
|
|
}
|
|
& > label:last-of-type:not(:first-of-type) {
|
|
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
|
|
}
|
|
& > label:last-of-type:first-of-type {
|
|
border-radius: var(#{$universal-border-radius-var});
|
|
}
|
|
& > :checked:last-of-type:not(:first-of-type) + label {
|
|
border-radius: 0;
|
|
}
|
|
& > :checked:last-of-type + label + div {
|
|
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
|
|
}
|
|
}
|
|
}
|