WIP: Scripts and HTML
This commit is contained in:
Angelos Chalaris
File diff suppressed because one or more lines are too long
@ -1,354 +0,0 @@
|
||||
/*
|
||||
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});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
// Contextual module's mixin definitions are here. For the module itself
|
||||
// check `_contextual.scss`.
|
||||
// Mark color variant mixin:
|
||||
// $mark-alt-name: The name of the class used for the <mark> variant.
|
||||
// $mark-alt-back-color: Background color for <mark> variant.
|
||||
// $mark-alt-fore-color: Text color for <mark> variant.
|
||||
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color,
|
||||
$mark-alt-fore-color : $mark-fore-color) {
|
||||
mark.#{$mark-alt-name} {
|
||||
@if $mark-alt-back-color != $mark-back-color {
|
||||
#{$mark-back-color-var}: $mark-alt-back-color;
|
||||
}
|
||||
@if $mark-alt-fore-color != $mark-fore-color{
|
||||
#{$mark-fore-color-var}: $mark-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mark size variant mixin:
|
||||
// $mark-alt-name: The name of the class used for the <mark> variant.
|
||||
// $mark-alt-padding: The padding of the <mark> variant.
|
||||
// $mark-alt-border-radius: The border radius of the <mark> variant.
|
||||
@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) {
|
||||
mark.#{$mark-alt-name} {
|
||||
padding: $mark-alt-padding;
|
||||
border-radius: $mark-alt-border-radius;
|
||||
}
|
||||
}
|
||||
@ -1,304 +0,0 @@
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
*/
|
||||
|
||||
// TODO: Add fluid type and test thoroughly
|
||||
$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only)
|
||||
$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean)
|
||||
$__1px: (1px/$base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px`
|
||||
$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements
|
||||
$base-line-height: 1.5 !default; // Line height for most elements
|
||||
$base-font-size: 1rem !default; // Font sizing for all elements
|
||||
$_body-margin: 0 !default; // [Hidden] Margin for body
|
||||
$fore-color: #111 !default; // Text & foreground color
|
||||
$secondary-fore-color: #444 !default; // Secondary text & foreground color
|
||||
$back-color: #f8f8f8 !default; // Background color
|
||||
$secondary-back-color: #f0f0f0 !default; // Secondary background color
|
||||
$blockquote-color: #f57c00 !default; // <blockquote> sidebar and quotation color
|
||||
$pre-color: #1565c0 !default; // <pre> sidebar color
|
||||
$border-color: #aaa !default; // Border color
|
||||
$secondary-border-color: #ddd !default; // Secondary border color
|
||||
$heading-line-height: 1.2 !default; // Line height for headings
|
||||
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
|
||||
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
|
||||
$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
|
||||
$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
|
||||
$small-font-size: 0.75em !default; // Font sizing for <small> elements
|
||||
$heading-font-weight: 500 !default; // Font weight for headings
|
||||
$bold-font-weight: 700 !default; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em !default; // <hr> line height
|
||||
$blockquote-quotation-size: 3rem !default; // Font size for the quotation of <blockquote>
|
||||
$blockquote-cite-size: 0.75em !default; // Font size for the [cite] of <blockquote>
|
||||
$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
|
||||
$code-font-size: 0.85em; // Font size for <code>, <kbd>
|
||||
$small-element-font-size: 0.75em !default; // Font size for <small>, <sub>, <sup>
|
||||
$sup-top: -0.5em !default; // <sup> top
|
||||
$sub-bottom: -0.25em !default; // <sub> bottom
|
||||
$a-link-color: #0277bd !default; // Color for <a>:link
|
||||
$a-visited-color: #01579b !default; // Color for <a>:visited
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$fore-color-var: '--fore-color' !default;
|
||||
$secondary-fore-color-var: '--secondary-fore-color' !default;
|
||||
$back-color-var: '--back-color' !default;
|
||||
$secondary-back-color-var: '--secondary-back-color' !default;
|
||||
$blockquote-color-var: '--blockquote-color' !default;
|
||||
$pre-color-var: '--pre-color' !default;
|
||||
$border-color-var: '--border-color' !default;
|
||||
$secondary-border-color-var: '--secondary-border-color' !default;
|
||||
$heading-ratio-var: '--heading-ratio' !default;
|
||||
$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;
|
||||
$a-link-color-var: '--a-link-color' !default;
|
||||
$a-visited-color-var: '--a-visited-color' !default;
|
||||
/* Core module CSS variable definitions */
|
||||
:root {
|
||||
#{$fore-color-var}: $fore-color;
|
||||
#{$secondary-fore-color-var}: $secondary-fore-color;
|
||||
#{$back-color-var}: $back-color;
|
||||
#{$secondary-back-color-var}: $secondary-back-color;
|
||||
#{$blockquote-color-var}: $blockquote-color;
|
||||
#{$pre-color-var}: $pre-color;
|
||||
#{$border-color-var}: $border-color;
|
||||
#{$secondary-border-color-var}: $secondary-border-color;
|
||||
#{$heading-ratio-var}: $heading-ratio;
|
||||
#{$universal-margin-var}: $universal-margin;
|
||||
#{$universal-padding-var}: $universal-padding;
|
||||
#{$universal-border-radius-var}: $universal-border-radius;
|
||||
#{$a-link-color-var} : $a-link-color;
|
||||
#{$a-visited-color-var} : $a-visited-color;
|
||||
@if $universal-box-shadow != none {
|
||||
#{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
}
|
||||
}
|
||||
html {
|
||||
font-size: $base-root-font-size; // Set root's font sizing.
|
||||
}
|
||||
a, b, del, em, i, ins, q, span, strong, u {
|
||||
font-size: 1em; // Fix for elements inside headings not displaying properly.
|
||||
}
|
||||
|
||||
@if $_apply-defaults-to-all {
|
||||
html, * {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
* {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
html {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: $_body-margin;
|
||||
color: var(#{$fore-color-var});
|
||||
background: var(#{$back-color-var});
|
||||
}
|
||||
|
||||
// Correct display for Edge & Firefox.
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Correct display in all browsers.
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
abbr[title] {
|
||||
border-bottom: none; // Remove bottom border in Firefox 39-.
|
||||
text-decoration: underline dotted; // Opinionated style-fix for all browsers.
|
||||
}
|
||||
|
||||
// Show overflow in Edge.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Make images responsive by default.
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: $heading-line-height;
|
||||
margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
|
||||
font-weight: $heading-font-weight;
|
||||
small {
|
||||
color: var(#{$secondary-fore-color-var});
|
||||
display: block;
|
||||
@if $subheading-top-margin != 0 {
|
||||
margin-top: $subheading-top-margin;
|
||||
}
|
||||
@if $subheading-font-size != $small-font-size {
|
||||
font-size: $subheading-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h2 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h3 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h4 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: calc(1rem / var(#{$heading-ratio-var}));
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(#{$universal-margin-var});
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding-left: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $bold-font-weight;
|
||||
}
|
||||
|
||||
hr {
|
||||
// Fixes and defaults for styling
|
||||
box-sizing: content-box;
|
||||
border: 0;
|
||||
// Actual styling using variables
|
||||
line-height: $horizontal-rule-line-height;
|
||||
margin: var(#{$universal-margin-var});
|
||||
height: $__1px;
|
||||
background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
|
||||
}
|
||||
|
||||
blockquote { // Doesn't have a back color by default, can be added manually.
|
||||
display: block;
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
color: var(#{$secondary-fore-color-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding: calc(3 * var(#{$universal-padding-var}));
|
||||
border: $__1px solid var(#{$secondary-border-color-var});
|
||||
border-left: 6*$__1px solid var(#{$blockquote-color-var});
|
||||
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: calc(0rem - var(#{$universal-padding-var}));
|
||||
left: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: $blockquote-quotation-size;
|
||||
font-weight: 700;
|
||||
content: "\201c";
|
||||
color: var(#{$blockquote-color-var});
|
||||
}
|
||||
&[cite]:after{
|
||||
font-style: normal;
|
||||
font-size: $blockquote-cite-size;
|
||||
font-weight: 700;
|
||||
content: "\a— " attr(cite);
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
code, kbd, pre, samp {
|
||||
font-family: #{$code-font-family}; // Display fix should be applied manually!
|
||||
font-size: $code-font-size;
|
||||
}
|
||||
|
||||
code { // No border color by default and fore color is the default for text, can be altered manually.
|
||||
background: var(#{$secondary-back-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
|
||||
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});
|
||||
}
|
||||
}
|
||||
|
||||
kbd { // No border color by default, can be altered manually.
|
||||
background: var(#{$fore-color-var});
|
||||
color: var(#{$back-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
|
||||
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});
|
||||
}
|
||||
}
|
||||
|
||||
pre { // Fore color is the default, can be altered manually.
|
||||
overflow: auto; // Responsiveness
|
||||
background: var(#{$secondary-back-color-var});
|
||||
padding: calc(1.5 * var(#{$universal-padding-var}));
|
||||
margin: var(#{$universal-margin-var});
|
||||
border: $__1px solid var(#{$secondary-border-color-var});
|
||||
border-left: 4*$__1px solid var(#{$pre-color-var});
|
||||
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent elements from affecting the line height in all browsers.
|
||||
sup, sub, code, kbd {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
small, sup, sub, figcaption {
|
||||
font-size: $small-element-font-size;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: var(#{$universal-margin-var});
|
||||
}
|
||||
figcaption {
|
||||
color: var(#{$secondary-fore-color-var});
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:link{
|
||||
color: var(#{$a-link-color-var});
|
||||
}
|
||||
&:visited {
|
||||
color: var(#{$a-visited-color-var});
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -1,317 +0,0 @@
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
// Different elements are styled based on the same set of rules.
|
||||
$input-group-name: 'input-group' !default; // Class name for input groups.
|
||||
$_include-fluid-input-group: true !default; // [Hidden] Should fluid input groups be included? (boolean)
|
||||
$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
|
||||
$input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups.
|
||||
$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
|
||||
$button-class-name: 'button' !default; // Class name for elements styled as buttons.
|
||||
$input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
|
||||
$button-group-name: 'button-group' !default; // Class name for button groups.
|
||||
$button-group-mobile-breakpoint: 767px !default; // Mobile breakpoint for button groups.
|
||||
$form-back-color: #f0f0f0 !default; // Background color for forms.
|
||||
$form-fore-color: #111 !default; // Text color for forms.
|
||||
$form-border-color: #ddd !default; // Border color for forms.
|
||||
$input-back-color: #f8f8f8 !default; // Background color for input elements.
|
||||
$input-fore-color: #111 !default; // Text color for input elements.
|
||||
$input-border-color: #ddd !default; // Border color for input elements.
|
||||
$input-focus-color: #0288d1 !default; // Border color for focused input elements.
|
||||
$input-invalid-color: #d32f2f !default; // Border color for invalid input elements.
|
||||
$button-back-color: #e2e2e2 !default; // Background color for buttons.
|
||||
$button-hover-back-color: #dcdcdc !default; // Background color for buttons (hover).
|
||||
$button-fore-color: #212121 !default; // Text color for buttons.
|
||||
$button-border-color: transparent !default; // Border color for buttons.
|
||||
$button-hover-border-color: transparent !default; // Border color for buttons (hover).
|
||||
$button-group-border-color: rgba(124,124,124, 0.54) !default; // Border color for button groups.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$form-back-color-var: '--form-back-color' !default;
|
||||
$form-fore-color-var: '--form-fore-color' !default;
|
||||
$form-border-color-var: '--form-border-color' !default;
|
||||
$input-back-color-var: '--input-back-color' !default;
|
||||
$input-fore-color-var: '--input-fore-color' !default;
|
||||
$input-border-color-var: '--input-border-color' !default;
|
||||
$input-focus-color-var: '--input-focus-color' !default;
|
||||
$input-invalid-color-var: '--input-invalid-color' !default;
|
||||
$button-back-color-var: '--button-back-color' !default;
|
||||
$button-hover-back-color-var: '--button-hover-back-color' !default;
|
||||
$button-fore-color-var: '--button-fore-color' !default;
|
||||
$button-border-color-var: '--button-border-color' !default;
|
||||
$button-hover-border-color-var: '--button-hover-border-color' !default;
|
||||
$button-group-border-color-var: '--button-group-border-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $base-font-size: 1rem !default; // Font sizing for all 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 `_input_control_mixins.scss` file to find this module's mixins.
|
||||
@import 'input_control_mixins';
|
||||
/* Input_control module CSS variable definitions */
|
||||
:root {
|
||||
#{$form-back-color-var}: $form-back-color;
|
||||
#{$form-fore-color-var}: $form-fore-color;
|
||||
#{$form-border-color-var}: $form-border-color;
|
||||
#{$input-back-color-var}: $input-back-color;
|
||||
#{$input-fore-color-var}: $input-fore-color;
|
||||
#{$input-border-color-var}: $input-border-color;
|
||||
#{$input-focus-color-var}: $input-focus-color;
|
||||
#{$input-invalid-color-var}: $input-invalid-color;
|
||||
#{$button-back-color-var}: $button-back-color;
|
||||
#{$button-hover-back-color-var}: $button-hover-back-color;
|
||||
#{$button-fore-color-var}: $button-fore-color;
|
||||
#{$button-border-color-var}: $button-border-color;
|
||||
#{$button-hover-border-color-var}: $button-hover-border-color;
|
||||
#{$button-group-border-color-var}: $button-group-border-color;
|
||||
}
|
||||
// Base form styling
|
||||
form { // Text color is the default, this can be changed manually.
|
||||
background: var(#{$form-back-color-var});
|
||||
color: var(#{$form-fore-color-var});
|
||||
border: $__1px solid var(#{$form-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
// Fieldset styling
|
||||
fieldset {
|
||||
// Apply always to overwrite defaults for all of the below.
|
||||
border: $__1px solid var(#{$form-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: calc(var(#{$universal-margin-var}) / 4);
|
||||
padding: var(#{$universal-padding-var});
|
||||
}
|
||||
// Legend styling.
|
||||
legend {
|
||||
// Edge fixes.
|
||||
box-sizing: border-box;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
// Actual styling.
|
||||
font-weight: $bold-font-weight;
|
||||
padding: calc(var(#{$universal-padding-var}) / 2);
|
||||
}
|
||||
// Label syling. - Basically just padding, but there might be more in the future.
|
||||
label {
|
||||
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
|
||||
}
|
||||
// Input group styling.
|
||||
.#{$input-group-name} {
|
||||
display: inline-block;
|
||||
// Fluid input groups
|
||||
@if $_include-fluid-input-group {
|
||||
&.#{$input-group-fluid-name} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
& > input {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
// On mobile
|
||||
@media screen and (max-width: #{$input-group-mobile-breakpoint}) {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
// Vertical input groups
|
||||
&.#{$input-group-vertical-name} {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
& > input {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// Common textual input styling. - Avoid using box-shadow with these.
|
||||
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
|
||||
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
|
||||
box-sizing: border-box;
|
||||
// Background, color and border should not be unassigned, as the browser defaults will apply.
|
||||
background: var(#{$input-back-color-var});
|
||||
color: var(#{$input-fore-color-var});
|
||||
border: $__1px solid var(#{$input-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: calc(var(#{$universal-margin-var}) / 2);
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
|
||||
&:hover, &:focus {
|
||||
border-color: var(#{$input-focus-color-var});
|
||||
box-shadow: none;
|
||||
}
|
||||
&:invalid, &:focus:invalid{
|
||||
border-color: var(#{$input-invalid-color-var});
|
||||
box-shadow: none;
|
||||
}
|
||||
&[readonly]{
|
||||
background: var(#{$secondary-back-color-var});
|
||||
}
|
||||
}
|
||||
// Fix for select and option elements overflowing their parent container.
|
||||
select {
|
||||
max-width: 100%;
|
||||
}
|
||||
option {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// Styling for checkboxes and radio buttons.
|
||||
[type="checkbox"], [type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||
width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||
vertical-align: text-bottom;
|
||||
padding: 0; // Remove padding added from previous styles.
|
||||
flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
|
||||
flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
|
||||
&:checked:before {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
[type="checkbox"] {
|
||||
&:checked:before {
|
||||
content: '\2713';
|
||||
font-family: sans-serif;
|
||||
font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||
top: calc(0rem - var(#{$universal-padding-var}));
|
||||
left: calc(var(#{$universal-padding-var}) / 4);
|
||||
}
|
||||
}
|
||||
[type="radio"] {
|
||||
border-radius: 100%;
|
||||
&:checked:before {
|
||||
border-radius: 100%;
|
||||
content: '';
|
||||
top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
|
||||
left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
|
||||
background: var(#{$input-fore-color-var});
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
|
||||
:placeholder-shown {
|
||||
color: var(#{$input-fore-color-var});
|
||||
}
|
||||
::-ms-placeholder {
|
||||
color: var(#{$input-fore-color-var});
|
||||
opacity: 0.54;
|
||||
}
|
||||
// Definitions for the button and button-like elements.
|
||||
// Different elements are styled based on the same set of rules.
|
||||
// Reset for Firefox focusing on button elements.
|
||||
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
// Fixes for Android 4, iOS and Safari.
|
||||
button, html [type="button"], [type="reset"], [type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
// Other fixes.
|
||||
button {
|
||||
overflow: visible; // Show the overflow in IE.
|
||||
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
|
||||
}
|
||||
// Default styling
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
|
||||
a[role="button"], label[role="button"], [role="button"] {
|
||||
display: inline-block;
|
||||
background: var(#{$button-back-color-var});
|
||||
color: var(#{$button-fore-color-var});
|
||||
border: $__1px solid var(#{$button-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
margin: var(#{$universal-margin-var});
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
&:hover, &:focus {
|
||||
background: var(#{$button-hover-back-color-var});
|
||||
border-color: var(#{$button-hover-border-color-var});
|
||||
}
|
||||
}
|
||||
// Disabled styling for input and button elements.
|
||||
input, textarea, select, button, .#{$button-class-name}, [role="button"] {
|
||||
// .button[disabled] is actually higher specificity than a.button, so no need for more than that
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $input-disabled-opacity;
|
||||
}
|
||||
}
|
||||
// Button group styling.
|
||||
.#{$button-group-name} {
|
||||
display: flex;
|
||||
border: $__1px solid var(#{$button-group-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
& > button, [type="button"], & > [type="submit"], & > [type="reset"],
|
||||
& > .#{$button-class-name}, & > [role="button"] {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
& > :not(:first-child) {
|
||||
border-left: $__1px solid var(#{$button-group-border-color-var});
|
||||
}
|
||||
// Responsiveness for button groups
|
||||
@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
|
||||
flex-direction: column;
|
||||
& > :not(:first-child) {
|
||||
border: 0; // Reapply to remove the left border from elements.
|
||||
border-top: $__1px solid var(#{$button-group-border-color-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
// Input_control module's mixin definitions are here. For the module itself
|
||||
// check `_input_control.scss`.
|
||||
// Button color variant mixin:
|
||||
// $button-alt-name: The name of the class used for the button variant.
|
||||
// $button-alt-back-color: Background color for button variant.
|
||||
// $button-alt-hover-back-color: Background color for button variant (hover).
|
||||
// $button-alt-fore-color: Text color for button variant.
|
||||
// $button-alt-border-color: Border color for button variant.
|
||||
// $button-alt-hover-border-color: Border color for button variant (hover).
|
||||
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
|
||||
$button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
|
||||
$button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
|
||||
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
|
||||
&.#{$button-alt-name} {
|
||||
@if $button-alt-back-color != $button-back-color {
|
||||
#{$button-back-color-var}: $button-alt-back-color;
|
||||
}
|
||||
@if $button-alt-fore-color != $button-fore-color{
|
||||
#{$button-fore-color-var}: $button-alt-fore-color;
|
||||
}
|
||||
@if $button-alt-border-color != $button-border-color{
|
||||
#{$button-border-color-var}: $button-alt-border-color;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
@if $button-alt-hover-back-color != $button-hover-back-color{
|
||||
#{$button-hover-back-color-var}: $button-alt-hover-back-color;
|
||||
}
|
||||
@if $button-alt-hover-border-color != $button-hover-border-color{
|
||||
#{$button-hover-border-color-var}: $button-alt-hover-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Button size variant mixin:
|
||||
// $button-alt-name: The name of the class used for the button variant.
|
||||
// $button-alt-padding: The padding of the button variant.
|
||||
// $button-alt-margin The margin of the button variant.
|
||||
@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
|
||||
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
|
||||
&.#{$button-alt-name} {
|
||||
padding: $button-alt-padding;
|
||||
margin: $button-alt-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,199 +0,0 @@
|
||||
/*
|
||||
Definitions for the grid system, cards and containers.
|
||||
*/
|
||||
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
|
||||
$_include-parent-layout: true !default; // [Hidden] Flag for rows defining column layouts (`true`/`false`).
|
||||
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only).
|
||||
$grid-container-name: 'container' !default; // Class name for the grid system container.
|
||||
$grid-row-name: 'row' !default; // Class name for the grid system rows.
|
||||
$grid-row-parent-layout-prefix:'cols' !default; // Class name prefix for the grid's row parents.
|
||||
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns.
|
||||
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets.
|
||||
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
|
||||
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority.
|
||||
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty.
|
||||
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
|
||||
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
|
||||
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
|
||||
$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid.
|
||||
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
|
||||
$card-name: 'card' !default; // Class name for the cards.
|
||||
$card-section-name: 'section' !default; // Class name for the cards' sections.
|
||||
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent).
|
||||
$card-normal-width: 320px !default; // Width for normal cards.
|
||||
$card-section-media-height: 200px !default; // Height for cards' media sections.
|
||||
$card-fore-color: #111 !default; // Text color for the cards.
|
||||
$card-back-color: #f8f8f8 !default; // Background color for the cards.
|
||||
$card-border-color: #ddd !default; // Border color for the cards.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$card-fore-color-var: '--card-fore-color' !default;
|
||||
$card-back-color-var: '--card-back-color' !default;
|
||||
$card-border-color-var: '--card-border-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $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 `_layout_mixins.scss` file to find this module's mixins.
|
||||
@import 'layout_mixins';
|
||||
// Fluid grid system container definition.
|
||||
.#{$grid-container-name} {
|
||||
margin: 0 auto;
|
||||
padding: 0 calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
// Grid row definition.
|
||||
.#{$grid-row-name} {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
// Inline mixin, used to generate class definitions for each grid step.
|
||||
@mixin generate-grid-size ($size-prefix){
|
||||
@if $_include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$size-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
|
||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 calc(var(#{$universal-padding-var}) / 2);
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$size-prefix},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > * {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
// Grid column generic definitions.
|
||||
.#{$grid-column-prefix}-#{$size-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 calc(var(#{$universal-padding-var}) / 2);
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$size-prefix} {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $_include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
// Offest definitions.
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
|
||||
@if ($i - 1) == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{(($i - 1) * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Reordering definitions.
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix} {
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
// Definitions for smaller screens.
|
||||
@include generate-grid-size($grid-small-prefix);
|
||||
// Definitions for medium screens.
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}){
|
||||
@include generate-grid-size($grid-medium-prefix);
|
||||
}
|
||||
// Definitions for large screens.
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}){
|
||||
@include generate-grid-size($grid-large-prefix);
|
||||
}
|
||||
/* Card component CSS variable definitions */
|
||||
:root {
|
||||
#{$card-back-color-var}: $card-back-color;
|
||||
#{$card-fore-color-var}: $card-fore-color;
|
||||
#{$card-border-color-var}: $card-border-color;
|
||||
}
|
||||
// Card styling
|
||||
.#{$card-name} {
|
||||
// New syntax
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// Actual styling for the cards
|
||||
background: var(#{$card-back-color-var});
|
||||
color: var(#{$card-fore-color-var});
|
||||
border: $__1px solid var(#{$card-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
overflow: hidden; // Hide overflow from section borders
|
||||
// Responsiveness (if the screen is larger than card, set max-width)
|
||||
@media screen and (min-width: #{$card-normal-width}) {
|
||||
max-width: $card-normal-width;
|
||||
}
|
||||
// Card sections
|
||||
& > .#{$card-section-name} {
|
||||
// Reapply background and foreground colors, so that mixins can be applied properly.
|
||||
background: var(#{$card-back-color-var});
|
||||
color: var(#{$card-fore-color-var});
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 0; // Clean borders and radiuses for any element-based sections
|
||||
border-radius: 0; // Clean borders and radiuses for any element-based sections
|
||||
border-bottom: $__1px solid var(#{$card-border-color-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
width: 100%;
|
||||
// Card media sections
|
||||
&.#{$card-section-media-name} {
|
||||
height: $card-section-media-height;
|
||||
padding: 0;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
// Card sections - last
|
||||
& > .#{$card-section-name}:last-child {
|
||||
border-bottom: 0; // Clean the extra border for last section
|
||||
}
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
// Layout (card) module's mixin definitions are here. For the module itself
|
||||
// check `_layout.scss`.
|
||||
// Mixin for alternate card sizes:
|
||||
// $card-alt-size-name: The name of the class used for the alternate size card.
|
||||
// $card-alt-size-width: The width of the alternate size card.
|
||||
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
|
||||
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
|
||||
.#{$card-name}.#{$card-alt-size-name} {
|
||||
max-width: $card-alt-size-width;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@media screen and (min-width: #{$card-alt-size-width}) {
|
||||
.#{$card-name}.#{$card-alt-size-name} {
|
||||
max-width: $card-alt-size-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate cards (card color variants):
|
||||
// $card-alt-name: The name of the class used for the alternate card.
|
||||
// $card-alt-back-color: The background color of the alternate card.
|
||||
// $card-alt-fore-color: The text color of the alternate card.
|
||||
// $card-alt-border-color: The border style of the alternate card.
|
||||
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
|
||||
$card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
|
||||
.#{$card-name}.#{$card-alt-name} {
|
||||
@if $card-alt-back-color != $card-back-color {
|
||||
#{$card-back-color-var}: $card-alt-back-color;
|
||||
}
|
||||
@if $card-alt-fore-color != $card-fore-color {
|
||||
#{$card-fore-color-var}: $card-alt-fore-color;
|
||||
}
|
||||
@if $card-alt-border-color != $card-border-color {
|
||||
#{$card-border-color-var}: $card-alt-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section color variants):
|
||||
// $card-section-alt-name: The name of the class used for the alternate card section.
|
||||
// $card-section-alt-back-color: The background color of the alternate card section.
|
||||
// $card-section-alt-fore-color: The text color of the alternate card section.
|
||||
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
|
||||
$card-section-alt-fore-color : $card-fore-color) {
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
@if $card-section-alt-back-color != $card-back-color {
|
||||
#{$card-back-color-var}: $card-section-alt-back-color;
|
||||
}
|
||||
@if $card-section-alt-fore-color != $card-fore-color {
|
||||
#{$card-fore-color-var}: $card-section-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section padding variants):
|
||||
// $card-section-alt-name: The name of the class used for the alternate card section.
|
||||
// $card-section-alt-padding: The padding of the alternate card section.
|
||||
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
padding: $card-section-alt-padding;
|
||||
}
|
||||
}
|
||||
@ -1,315 +0,0 @@
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
// Different elements are styled based on the same set of rules.
|
||||
$header-height: 3.1875rem !default; // Height of the header element.
|
||||
$header-back-color: #f8f8f8 !default; // Background color for the header element.
|
||||
$header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover).
|
||||
$header-fore-color: #444 !default; // Text color for the header element.
|
||||
$header-border-color: #ddd !default; // Border color for the header element.
|
||||
$nav-back-color: #f8f8f8 !default; // Background color for the nav element.
|
||||
$nav-hover-back-color: #f0f0f0 !default; // Background color for the nav element (hover).
|
||||
$nav-fore-color: #444 !default; // Text color for the nav element.
|
||||
$nav-border-color: #ddd !default; // Border color for the nav element.
|
||||
$nav-link-color: #0277bd !default; // Color for link in the nav element.
|
||||
$footer-fore-color: #444 !default; // Text color for the footer element.
|
||||
$footer-back-color: #f8f8f8 !default; // Background color for footer nav element.
|
||||
$footer-border-color: #ddd !default; // Border color for the footer element.
|
||||
$footer-link-color: #0277bd !default; // Color for link in the footer element.
|
||||
$drawer-back-color: #f8f8f8 !default; // Background color for the drawer component.
|
||||
$drawer-border-color: #ddd !default; // Border color for the drawer component.
|
||||
$drawer-hover-back-color: #f0f0f0 !default; // Background color for the drawer component's close (hover).
|
||||
$drawer-close-color: #444 !default; // Color of the close element for the drawer component.
|
||||
$_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
|
||||
$_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
|
||||
$header-logo-name: 'logo' !default; // Class name for the header logo element.
|
||||
$header-logo-font-size: 1.75rem !default; // Font ize for the header logo element.
|
||||
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
|
||||
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
|
||||
$_footer-only-top-border: true !default; // [Hidden] Apply styling only to the top border of footer? (boolean)
|
||||
$footer-font-size: 0.875rem !default; // Font size for text in footer element.
|
||||
$sticky-name: 'sticky' !default; // Class name for sticky headers and footers.
|
||||
$drawer-name: 'drawer' !default; // Class name for the drawer component.
|
||||
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
|
||||
$drawer-toggle-font-size: 1.5em !default; // Font size for the drawer component's toggle. (prefer em units)
|
||||
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
|
||||
$_drawer-right: true !default; // [Hidden] Should the drawer appear on the right side of the screen?
|
||||
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
|
||||
$drawer-width: 320px !default; // Width of the drawer component.
|
||||
$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
|
||||
$drawer-close-size: 2rem !default; // Size of the close element for the drawer component.
|
||||
$drawer-icons-color: #212121 !default; // Color for the icons used in the drawer component.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$header-fore-color-var: '--header-fore-color' !default;
|
||||
$header-back-color-var: '--header-back-color' !default;
|
||||
$header-hover-back-color-var: '--header-hover-back-color' !default;
|
||||
$header-border-color-var: '--header-border-color' !default;
|
||||
$nav-fore-color-var: '--nav-fore-color' !default;
|
||||
$nav-back-color-var: '--nav-back-color' !default;
|
||||
$nav-hover-back-color-var: '--nav-hover-back-color' !default;
|
||||
$nav-border-color-var: '--nav-border-color' !default;
|
||||
$nav-link-color-var: '--nav-link-color' !default;
|
||||
$footer-fore-color-var: '--footer-fore-color' !default;
|
||||
$footer-back-color-var: '--footer-back-color' !default;
|
||||
$footer-border-color-var: '--footer-border-color' !default;
|
||||
$footer-link-color-var: '--footer-link-color' !default;
|
||||
$drawer-back-color-var: '--drawer-back-color' !default;
|
||||
$drawer-border-color-var: '--drawer-border-color' !default;
|
||||
$drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
|
||||
$drawer-close-color-var: '--drawer-close-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $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;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
/* Navigation module CSS variable definitions */
|
||||
:root {
|
||||
#{$header-back-color-var}: $header-back-color;
|
||||
#{$header-hover-back-color-var}: $header-hover-back-color;
|
||||
#{$header-fore-color-var}: $header-fore-color;
|
||||
#{$header-border-color-var}: $header-border-color;
|
||||
#{$nav-back-color-var}: $nav-back-color;
|
||||
#{$nav-hover-back-color-var}: $nav-hover-back-color;
|
||||
#{$nav-fore-color-var}: $nav-fore-color;
|
||||
#{$nav-border-color-var}: $nav-border-color;
|
||||
#{$nav-link-color-var}: $nav-link-color;
|
||||
#{$footer-fore-color-var}: $footer-fore-color;
|
||||
#{$footer-back-color-var}: $footer-back-color;
|
||||
#{$footer-border-color-var}: $footer-border-color;
|
||||
#{$footer-link-color-var}: $footer-link-color;
|
||||
#{$drawer-back-color-var}: $drawer-back-color;
|
||||
#{$drawer-hover-back-color-var}: $drawer-hover-back-color;
|
||||
#{$drawer-border-color-var}: $drawer-border-color;
|
||||
#{$drawer-close-color-var}: $drawer-close-color;
|
||||
}
|
||||
// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
|
||||
header {
|
||||
height: $header-height;
|
||||
background: var(#{$header-back-color-var}); // Always apply background color to avoid shine through
|
||||
color: var(#{$header-fore-color-var});
|
||||
@if $_header-only-bottom-border {
|
||||
border-bottom: $__1px solid var(#{$header-border-color-var});
|
||||
}
|
||||
@else {
|
||||
border: $__1px solid var(#{$header-border-color-var});
|
||||
}
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) 0;
|
||||
// Responsiveness for smaller displays, scrolls horizontally.
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
// Fix for responsive header, using the grid system's row and column alignment.
|
||||
&.#{$grid-row-name} {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
// Header logo styling.
|
||||
.#{$header-logo-name} {
|
||||
color: var(#{$header-fore-color-var});
|
||||
font-size: $header-logo-font-size;
|
||||
padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
|
||||
text-decoration: none;
|
||||
}
|
||||
// Link styling.
|
||||
button, [type="button"], .#{$button-class-name}, [role="button"] {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
top: calc(0rem - var(#{$universal-padding-var}) / 4); // Use universal-padding to offset the padding of the header.
|
||||
height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2); // Fill header.
|
||||
background: var(#{$header-back-color-var}); // Apply color regardless to override styling from other things.
|
||||
line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
|
||||
text-align: center;
|
||||
color: var(#{$header-fore-color-var});
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
@if $_header-links-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: var(#{$header-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
// Navigation sidebar styling.
|
||||
nav {
|
||||
background: var(#{$nav-back-color-var});
|
||||
color: var(#{$nav-fore-color-var});
|
||||
border: $__1px solid var(#{$nav-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
* {
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
a, a:visited {
|
||||
display: block;
|
||||
color: var(#{$nav-link-color-var}); // Apply regardless to de-stylize visited links.
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
transition: background 0.3s;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
background: var(#{$nav-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
// Subcategories in navigation.
|
||||
@for $i from 1 through $nav-sublink-depth {
|
||||
.#{$nav-sublink-prefix}-#{$i} {
|
||||
position: relative;
|
||||
margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
|
||||
top: -#{$__1px};
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: $__1px solid var(#{$nav-border-color-var});
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Footer styling.
|
||||
footer {
|
||||
background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through
|
||||
color: var(#{$footer-fore-color-var});
|
||||
@if $_footer-only-top-border {
|
||||
border-top: $__1px solid var(#{$footer-border-color-var});
|
||||
}
|
||||
@else {
|
||||
border: $__1px solid var(#{$footer-border-color-var});
|
||||
}
|
||||
// margin: $footer-margin;
|
||||
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
|
||||
font-size: $footer-font-size;
|
||||
a, a:visited {
|
||||
color: var(#{$footer-link-color-var});
|
||||
}
|
||||
}
|
||||
// Definitions for sticky headers and footers.
|
||||
header.#{$sticky-name} {
|
||||
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
|
||||
position: sticky;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
top: 0;
|
||||
}
|
||||
footer.#{$sticky-name} {
|
||||
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
|
||||
position: sticky;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
bottom: 0;
|
||||
}
|
||||
// Responsive drawer component.
|
||||
.#{$drawer-toggle-name} {
|
||||
&:before { // No color specified, should use the color of its surroundings!
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
content: '\00a0\2261\00a0'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
|
||||
font-family: sans-serif;
|
||||
font-size: $drawer-toggle-font-size; // Almost hardcoded, should be fully compatible with its surroundings.
|
||||
}
|
||||
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
|
||||
&:not(.#{$drawer-persistent-name}) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
[type="checkbox"].#{$drawer-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%);
|
||||
+ * {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: $drawer-width;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: var(#{$drawer-back-color-var});
|
||||
border: $__1px solid var(#{$drawer-border-color-var});
|
||||
border-radius: 0; // Set to 0 to override the value from `nav`.
|
||||
margin: 0; // Set to 0 to override the value from `nav`.
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
z-index: 1110;
|
||||
@if $_drawer-right {
|
||||
right: -$drawer-width;
|
||||
transition: right 0.3s;
|
||||
}
|
||||
@else {
|
||||
left: -$drawer-width;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
& .#{$drawer-close-name} {
|
||||
position: absolute;
|
||||
top: var(#{$universal-margin-var});
|
||||
right: var(#{$universal-margin-var});
|
||||
z-index: 1111;
|
||||
width: $drawer-close-size;
|
||||
height: $drawer-close-size;
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: 0; // Fixes the offset from label
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
&:before { // Transparent background unless hovered over. Does not block text behind it.
|
||||
display: block;
|
||||
content: '\00D7';
|
||||
color: var(#{$drawer-close-color-var});
|
||||
position: relative;
|
||||
font-family: sans-serif;
|
||||
font-size: $drawer-close-size;
|
||||
line-height: 1; // Setting to 1 seems to center the 'X' properly.
|
||||
text-align: center;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: var(#{$drawer-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: #{$drawer-width}) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&:checked + * {
|
||||
@if $_drawer-right {
|
||||
right: 0;
|
||||
}
|
||||
@else {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
|
||||
&:not(.#{$drawer-persistent-name}) + * {
|
||||
position: static;
|
||||
height: 100%;
|
||||
z-index: 1100;
|
||||
& .#{$drawer-close-name} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
/*
|
||||
Definitions for progress elements and spinners.
|
||||
*/
|
||||
$progress-back-color: #ddd !default; // Background color of <progress>.
|
||||
$progress-fore-color: #555 !default; // Foreground color of <progress>.
|
||||
$progress-height: 0.75rem !default; // Height of <progress>.
|
||||
$progress-max-value: 1000 !default; // Arithmetic max value of <progress> - use integer values.
|
||||
$progress-inline-name: 'inline' !default; // Class name for inline <progress> elements.
|
||||
$progress-inline-width: 60% !default; // Width of inline <progress> elements.
|
||||
$_include-spinner-donut: true !default; // [Hidden] Should spinner donuts be included? (boolean)
|
||||
$spinner-donut-name: 'spinner' !default; // Class name for spinner donuts
|
||||
$spinner-donut-size: 1.25rem !default; // Size of the spinner donuts
|
||||
$spinner-donut-border-thickness: 0.25rem !default; // Border thickness for spinner donuts
|
||||
$spinner-donut-back-color: #ddd !default; // Background color for spinner donuts
|
||||
$spinner-donut-fore-color: #555 !default; // Foreground color for spinner donuts
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$progress-back-color-var: '--progress-back-color' !default;
|
||||
$progress-fore-color-var: '--progress-fore-color' !default;
|
||||
$spinner-donut-back-color-var: '--spinner-back-color' !default;
|
||||
$spinner-donut-fore-color-var: '--spinner-fore-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $universal-margin: 0.5rem !default; // Universal margin 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-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// Check the `_progress_mixins.scss` file to find this module's mixins.
|
||||
@import '_progress_mixins';
|
||||
/* Progess module CSS variable definitions */
|
||||
:root {
|
||||
#{$progress-back-color-var}: $progress-back-color;
|
||||
#{$progress-fore-color-var}: $progress-fore-color;
|
||||
}
|
||||
// Default styling for progress. Use mixins for alternate styles
|
||||
progress {
|
||||
display: block;
|
||||
vertical-align: baseline; // Correct vertical alignment in some browsers.
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: $progress-height;
|
||||
width: calc(100% - 2 * var(#{$universal-margin-var}));
|
||||
margin: var(#{$universal-margin-var});
|
||||
border: 0; // Removes default border
|
||||
border-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
background: var(#{$progress-back-color-var});
|
||||
color: var(#{$progress-fore-color-var});
|
||||
// Foreground color on webkit browsers
|
||||
&::-webkit-progress-value {
|
||||
background: var(#{$progress-fore-color-var});
|
||||
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
// Background color on webkit browser
|
||||
&::-webkit-progress-bar {
|
||||
background: var(#{$progress-back-color});
|
||||
}
|
||||
// Foreground color on Firefox
|
||||
&::-moz-progress-bar {
|
||||
background: var(#{$progress-fore-color-var});
|
||||
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
&[value="#{$progress-max-value}"] {
|
||||
&::-webkit-progress-value {
|
||||
border-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
border-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
}
|
||||
&.#{$progress-inline-name} {
|
||||
display: inline-block;
|
||||
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
|
||||
width: $progress-inline-width;
|
||||
}
|
||||
}
|
||||
// Style for donut spinner
|
||||
@if $_include-spinner-donut {
|
||||
:root {
|
||||
#{$spinner-donut-back-color-var}: $spinner-donut-back-color;
|
||||
#{$spinner-donut-fore-color-var}: $spinner-donut-fore-color;
|
||||
}
|
||||
// Donut spinner animation
|
||||
@keyframes spinner-donut-anim {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg);}
|
||||
}
|
||||
.#{$spinner-donut-name} {
|
||||
display: inline-block;
|
||||
margin: var(#{$universal-margin-var});
|
||||
border: $spinner-donut-border-thickness solid var(#{$spinner-donut-back-color-var});
|
||||
border-left: $spinner-donut-border-thickness solid var(#{$spinner-donut-fore-color-var});
|
||||
border-radius: 50%;
|
||||
width: $spinner-donut-size;
|
||||
height: $spinner-donut-size;
|
||||
animation: spinner-donut-anim 1.2s linear infinite;
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
// Progress module's mixin definitions are here. For the module itself
|
||||
// check `progress.scss`.
|
||||
// Progress color variant mixin:
|
||||
// $progress-alt-name: The name of the class used for the <progress> variant.
|
||||
// $progress-alt-fore-color: Foregound color for <progress> variant.
|
||||
// $progress-alt-back-color: Background color for <progress> variant.
|
||||
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color : $progress-fore-color,
|
||||
$progress-alt-back-color : $progress-back-color) {
|
||||
progress.#{$progress-alt-name} {
|
||||
@if $progress-alt-fore-color != $progress-fore-color{
|
||||
#{$progress-fore-color-var}: $progress-alt-fore-color;
|
||||
}
|
||||
@if $progress-alt-back-color != $progress-back-color {
|
||||
#{$progress-back-color-var}: $progress-alt-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Spinner donut color variant mixin:
|
||||
// $spinner-donut-alt-name: The name of the class used for the spinner donut variant.
|
||||
// $spinner-donut-alt-fore-color: Text color for spinner donut variant.
|
||||
// $spinner-donut-alt-back-color: Background color for spinner donut variant.
|
||||
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-fore-color : $spinner-donut-fore-color,
|
||||
$spinner-donut-alt-back-color : $spinner-donut-back-color) {
|
||||
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
|
||||
@if $spinner-donut-alt-fore-color != $spinner-donut-fore-color{
|
||||
#{$spinner-donut-fore-color-var}: $spinner-donut-alt-fore-color;
|
||||
}
|
||||
@if $spinner-donut-alt-back-color != $spinner-donut-back-color {
|
||||
#{$spinner-donut-back-color-var}: $spinner-donut-alt-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,321 +0,0 @@
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
// The tables use the common table elements and syntax.
|
||||
/*
|
||||
$table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view.
|
||||
$table-mobile-card-spacing: 10px !default; // Space between <tr> cards - mobile view.
|
||||
$table-mobile-card-label: 'data-label' !default;// Attribute used to replace column headers in mobile view.
|
||||
$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view.
|
||||
$include-horizontal-table: true !default; // Should horizontal tables be included? (`true`/`false`)
|
||||
$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view.
|
||||
$include-scrollable-table: true !default; // Should scrollable tables be included? (`true`/`false`)
|
||||
$table-scrollable-name: 'scrollable' !default;// Class name for table scrollable view.
|
||||
$table-scrollable-height: 400px !default; // Height for table scrollable view.
|
||||
$include-striped-table: true !default; // [Hidden flag] Should striped tables be included? (`true`/`false`)
|
||||
$table-striped-name: 'striped' !default; // Class name for striped table.
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
*/
|
||||
$table-mobile-breakpoint: 768px !default;
|
||||
$table-max-height: 400px !default;
|
||||
$table-caption-font-size: 1.5rem !default;
|
||||
$table-mobile-card-label: 'data-label' !default;
|
||||
$table-mobile-label-font-weight: 600 !default;
|
||||
|
||||
$table-border-color: #aaa !default;
|
||||
$table-border-separator-color: #666 !default;
|
||||
|
||||
$_include-horizontal-table: true !default;
|
||||
$table-horizontal-name: 'horizontal' !default;
|
||||
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$table-border-color-var: '--table-border-color' !default;
|
||||
$table-border-separator-color-var: '--table-border-separator-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $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;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
/* Table module CSS variable definitions. */
|
||||
:root {
|
||||
#{$table-border-color-var}: $table-border-color;
|
||||
#{$table-border-separator-color-var}: $table-border-separator-color;
|
||||
}
|
||||
// Desktop view.
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-flow: row wrap;
|
||||
padding: var(#{$universal-padding-var});
|
||||
padding-top: 0;
|
||||
@if not($_include-horizontal-table) {
|
||||
overflow: auto;
|
||||
max-height: $table-max-height;
|
||||
}
|
||||
caption {
|
||||
font-size: $table-caption-font-size;
|
||||
margin: calc(2 * var(#{$universal-margin-var})) 0;
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
thead, tbody {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
border: $__1px solid var(#{$table-border-color-var});
|
||||
@if not($_include-horizontal-table) {
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
|
||||
border-bottom: $__1px solid var(#{$table-border-separator-color-var}); // var This
|
||||
@if not($_include-horizontal-table) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: calc(0 - var(#{$universal-margin-var})); // might be useless
|
||||
border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
|
||||
}
|
||||
tr {
|
||||
display: flex;
|
||||
padding: 0; // Apply always to overwrite default.
|
||||
@if not($_include-horizontal-table) {
|
||||
flex-flow: row wrap;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
padding: calc(2 * var(#{$universal-padding-var})); // Apply always to overwrite default.
|
||||
@if not($_include-horizontal-table) {
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
background: #e6e6e6; // use vars
|
||||
color: #111; // vars
|
||||
}
|
||||
td {
|
||||
background: #fafafa; // use variables, this is a test (body)
|
||||
border-top: $__1px solid var(#{$table-border-color-var});
|
||||
}
|
||||
@if not($_include-horizontal-table) {
|
||||
tbody tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styling for horizntal tables
|
||||
@if $_include-horizontal-table {
|
||||
table:not(.#{$table-horizontal-name}) {
|
||||
overflow: auto;
|
||||
max-height: $table-max-height;
|
||||
thead, tbody {
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
tr {
|
||||
flex-flow: row wrap;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
th, td {
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
tbody tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
table.#{$table-horizontal-name} {
|
||||
border: 0;
|
||||
thead, tbody {
|
||||
border: 0;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
tbody {
|
||||
overflow: auto;
|
||||
justify-content: space-between;
|
||||
flex: 1 0 0;
|
||||
margin-left: calc( 4 * var(#{$universal-margin-var}));
|
||||
padding-bottom: calc(var(#{$universal-padding-var}) / 4);
|
||||
}
|
||||
tr {
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
th, td {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-bottom: $__1px solid var(#{$table-border-color-var});
|
||||
&:not(:first-child){
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
border-left: $__1px solid var(#{$table-border-color-var});
|
||||
border-right: $__1px solid var(#{$table-border-separator-color-var});
|
||||
}
|
||||
thead {
|
||||
tr:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
th:first-child, td:first-child {
|
||||
border-top: $__1px solid var(#{$table-border-color-var});
|
||||
}
|
||||
tbody tr:last-child td {
|
||||
border-right: 1px solid #aaa;
|
||||
&:first-child{
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
&:last-child{
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
thead tr:first-child th {
|
||||
&:first-child{
|
||||
border-top-left-radius: 0.25rem;
|
||||
}
|
||||
&:last-child{
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mobile
|
||||
@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
|
||||
@if $_include-horizontal-table {
|
||||
table, table.#{$table-horizontal-name} {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
display: table;
|
||||
// Accessibility (element is not visible, but screen readers read it normally)
|
||||
thead, th {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
tr {
|
||||
display: block;
|
||||
border: $__1px solid var(#{$table-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
background: #fafafa; // use variables, this is a test (body)
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
margin-bottom: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
th, td {
|
||||
width: auto;
|
||||
}
|
||||
td {
|
||||
display: block;
|
||||
border: 0;
|
||||
text-align: right;
|
||||
}
|
||||
td:before {
|
||||
content: attr(#{$table-mobile-card-label});
|
||||
float: left;
|
||||
font-weight: $table-mobile-label-font-weight;
|
||||
}
|
||||
th:first-child, td:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
tbody tr:last-child td {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
display: table;
|
||||
// Accessibility (element is not visible, but screen readers read it normally)
|
||||
thead, th {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
tr {
|
||||
display: block;
|
||||
border: $__1px solid var(#{$table-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
background: #fafafa; // use variables, this is a test (body)
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
margin-bottom: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
td {
|
||||
display: block;
|
||||
border: 0;
|
||||
text-align: right;
|
||||
}
|
||||
td:before {
|
||||
content: attr(#{$table-mobile-card-label});
|
||||
float: left;
|
||||
font-weight: $table-mobile-label-font-weight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,791 +0,0 @@
|
||||
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
||||
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||
// structured like the flavor description below, will be included in your final CSS file.
|
||||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v3.0.0-alpha.2
|
||||
*/
|
||||
|
||||
$fore-color-var: '--f-col';
|
||||
$secondary-fore-color-var: '--f-col2';
|
||||
$back-color-var: '--b-col';
|
||||
$secondary-back-color-var: '--b-col2';
|
||||
$blockquote-color-var: '--blq-col';
|
||||
$pre-color-var: '--pre-col';
|
||||
$border-color-var: '--br-col';
|
||||
$secondary-border-color-var: '--br-col2';
|
||||
$heading-ratio-var: '--h-ratio';
|
||||
$universal-margin-var: '--u-m';
|
||||
$universal-padding-var: '--u-p';
|
||||
$universal-border-radius-var: '--u-br-r';
|
||||
$universal-box-shadow-var: '--u-bx-shd';
|
||||
$a-link-color-var: '--a-l-col';
|
||||
$a-visited-color-var: '--a-v-col';
|
||||
|
||||
$code-font-size: 0.8125em;
|
||||
|
||||
@import 'core';
|
||||
|
||||
$grid-container-name: 'container';
|
||||
$grid-row-name: 'row';
|
||||
$grid-row-parent-layout-prefix:'cols';
|
||||
$grid-column-prefix: 'col';
|
||||
$grid-column-offset-suffix: 'o';
|
||||
$grid-order-normal-suffix: 'n';
|
||||
$grid-order-first-suffix: 'f';
|
||||
$grid-order-last-suffix: 'l';
|
||||
$grid-small-prefix: 'sm';
|
||||
$grid-medium-prefix: 'md';
|
||||
$grid-large-prefix: 'lg';
|
||||
|
||||
$card-fore-color-var: '--cd-f-col';
|
||||
$card-back-color-var: '--cd-b-col';
|
||||
$card-border-color-var: '--cd-br-col';
|
||||
|
||||
$_include-parent-layout: false;
|
||||
|
||||
@import 'layout';
|
||||
|
||||
/*
|
||||
Custom elements for card elements.
|
||||
*/
|
||||
|
||||
$card-fluid-name: 'fluid'; // Class name for fluid cards.
|
||||
$card-fluid-width: 100%; // Width for fluid cards.
|
||||
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
|
||||
|
||||
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
|
||||
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
|
||||
@include make-card-section-alt-style($card-section-double-padded-name, $card-section-double-padded-padding);
|
||||
|
||||
.#{$card-name} {
|
||||
box-shadow: 0 1.25rem 2.5rem -0.625rem rgba(0, 32, 64, 0.1);
|
||||
}
|
||||
|
||||
.#{$card-name} > h3.#{$card-section-name}.#{$card-section-double-padded-name} {
|
||||
padding: calc(3 * var(#{$universal-padding-var}));
|
||||
}
|
||||
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-double-padded-name} > p {
|
||||
margin: var(#{$universal-margin-var}) calc(var(#{$universal-margin-var}) / 2);
|
||||
}
|
||||
|
||||
.#{$card-name} + .#{$card-name} {
|
||||
margin-top: calc(5 * var(#{$universal-margin-var}));
|
||||
}
|
||||
|
||||
$form-back-color-var: '--frm-b-col';
|
||||
$form-fore-color-var: '--frm-f-col';
|
||||
$form-border-color-var: '--frm-br-col';
|
||||
$input-back-color-var: '--in-b-col';
|
||||
$input-fore-color-var: '--in-f-col';
|
||||
$input-border-color-var: '--in-br-col';
|
||||
$input-focus-color-var: '--in-fc-col';
|
||||
$input-invalid-color-var: '--in-inv-col';
|
||||
$button-back-color-var: '--btn-b-col';
|
||||
$button-hover-back-color-var: '--btn-h-b-col';
|
||||
$button-fore-color-var: '--btn-f-col';
|
||||
$button-border-color-var: '--btn-br-col';
|
||||
$button-hover-border-color-var: '--btn-h-br-col';
|
||||
$button-group-border-color-var: '--btn-grp-br-col';
|
||||
|
||||
|
||||
$_include-fluid-input-group: true;
|
||||
|
||||
@import 'input_control';
|
||||
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
$button-primary-name: 'primary'; // Class name for primary button color variant.
|
||||
$button-primary-back-color: #1976d2; // Background color for primary button color variant.
|
||||
$button-primary-hover-back-color:#1565c0; // Background color for primary button color variant (hover).
|
||||
$button-primary-fore-color: #f8f8f8; // Text color for primary button color variant.
|
||||
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
|
||||
|
||||
|
||||
$header-fore-color-var: '--hd-f-col';
|
||||
$header-back-color-var: '--hd-b-col';
|
||||
$header-hover-back-color-var: '--hd-hv-b-col';
|
||||
$header-border-color-var: '--hd-br-col';
|
||||
$nav-fore-color-var: '--nv-f-col';
|
||||
$nav-back-color-var: '--nv-b-col';
|
||||
$nav-hover-back-color-var: '--nv-hv-b-col';
|
||||
$nav-border-color-var: '--nv-br-col';
|
||||
$nav-link-color-var: '--nv-ln-col';
|
||||
$footer-fore-color-var: '--ft-f-col';
|
||||
$footer-back-color-var: '--ft-b-col';
|
||||
$footer-border-color-var: '--ft-br-col';
|
||||
$footer-link-color-var: '--ft-ln-col';
|
||||
$drawer-back-color-var: '--dr-b-col';
|
||||
$drawer-border-color-var: '--dr-br-col';
|
||||
$drawer-hover-back-color-var: '--dr-hv-b-col';
|
||||
$drawer-close-color-var: '--dr-cl-col';
|
||||
|
||||
|
||||
$nav-sublink-depth: 1;
|
||||
|
||||
$_drawer-right: false;
|
||||
|
||||
@import 'navigation';
|
||||
|
||||
$mark-back-color: #424242;
|
||||
$mark-font-size: 0.5em;
|
||||
|
||||
$toast-back-color: #212121;
|
||||
|
||||
$mark-back-color-var: '--mrk-b-col';
|
||||
$mark-fore-color-var: '--mrk-f-col';
|
||||
$toast-back-color-var: '--tst-b-col';
|
||||
$toast-fore-color-var: '--tst-f-col';
|
||||
$tooltip-back-color-var: '--tltp-b-col';
|
||||
$tooltip-fore-color-var: '--tltp-f-col';
|
||||
$modal-overlay-color-var: '--mdl-ov-col';
|
||||
$modal-close-color-var: '--mdl-cl-col';
|
||||
$modal-close-hover-back-color-var: '--mdl-cl-h-col';
|
||||
$collapse-label-back-color-var: '--clps-lbl-b-col';
|
||||
$collapse-label-fore-color-var: '--clps-lbl-f-col';
|
||||
$collapse-label-hover-back-color-var: '--clps-lbl-h-b-col';
|
||||
$collapse-selected-label-back-color-var: '--clps-sel-lbl-b-col';
|
||||
$collapse-border-color-var: '--clps-br-col';
|
||||
$collapse-content-back-color-var: '--clps-cnt-b-col';
|
||||
$collapse-selected-label-border-color-var: '--clps-sel-lbl-br-col';
|
||||
|
||||
$_include-modal: false;
|
||||
$_include-tooltip: false;
|
||||
$_include-collapse: false;
|
||||
|
||||
@import 'contextual';
|
||||
|
||||
div,main,nav{
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.#{$toast-name} {
|
||||
bottom: calc(var(#{$universal-margin-var}) / 2);
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
mark {
|
||||
position: relative;
|
||||
top: -0.25rem;
|
||||
left: 0.25rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Custom elements for contextual background elements, toasts and tooltips.
|
||||
*/
|
||||
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
|
||||
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
|
||||
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
|
||||
|
||||
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
|
||||
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
|
||||
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
|
||||
|
||||
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
|
||||
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
|
||||
$mark-tag-border-radius: 1em;
|
||||
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
|
||||
|
||||
// Website-specific styles
|
||||
code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
|
||||
font-family: Menlo, Consolas, monospace !important;
|
||||
}
|
||||
pre {
|
||||
border: 0.0625rem solid var(#{$secondary-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
}
|
||||
|
||||
.search {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
header h1.logo {
|
||||
margin-top: -0.8rem;
|
||||
text-align:center;
|
||||
position: relative;
|
||||
top: 0;
|
||||
transition: top 0.3s;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
h1 a, h1 a:link, h1 a:visited {
|
||||
text-decoration:none;
|
||||
color: #111;
|
||||
&:hover, &:focus {
|
||||
text-decoration:none;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
header #title {
|
||||
position:relative;
|
||||
top: -1rem;
|
||||
@media screen and (max-width: 768px) { display: none; }
|
||||
}
|
||||
|
||||
header {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 174, 39, 1) 0%,
|
||||
rgba(222, 73, 109, 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
header h1 small {
|
||||
display:block;
|
||||
font-size: 0.875rem;
|
||||
color: #888;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
label#menu-toggle {
|
||||
position: absolute;
|
||||
left: 0rem;
|
||||
top: 0rem;
|
||||
width: 3.4375rem;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
label.#{$collapse-name} {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
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}));
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
&:hover, &:focus {
|
||||
background: var(#{$collapse-label-hover-back-color-var});
|
||||
}
|
||||
+ pre {
|
||||
box-sizing: border-box;
|
||||
height: 0;
|
||||
max-height: 1px;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
transition: max-height 0.3s;
|
||||
}
|
||||
&.toggled {
|
||||
background: var(#{$collapse-selected-label-back-color-var});
|
||||
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
+ pre {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: $__1px solid var(#{$collapse-border-color-var});
|
||||
border-top: 0;
|
||||
padding: calc(2 * var(#{$universal-padding-var}));
|
||||
max-height: $collapse-content-max-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.primary.clipboard-copy {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
> img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #222;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.8;
|
||||
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
|
||||
-webkit-hypens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
padding: calc(2 * var(#{$universal-padding-var}));
|
||||
overflow: auto;
|
||||
margin: var(#{$universal-margin-var}) 0;
|
||||
}
|
||||
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #7a8490;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted,
|
||||
.token.function {
|
||||
color: #005cc5;
|
||||
}
|
||||
|
||||
|
||||
.token.number,
|
||||
.token.class-name {
|
||||
color: #832ed2;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #067e36;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #d73a49;
|
||||
}
|
||||
|
||||
.token.regex {
|
||||
color: #097cab;
|
||||
}
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
button.scroll-to-top {
|
||||
border-radius: 100%;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 2rem;
|
||||
background: var(#{$back-color-var});
|
||||
box-shadow: 0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.25);
|
||||
&:hover, &:focus {
|
||||
background: var(#{$secondary-back-color-var});
|
||||
}
|
||||
}
|
||||
|
||||
.#{$card-name}#disclaimer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1100;
|
||||
max-width: 100vw;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
@media screen and (min-width: 768px){
|
||||
width: 60vw;
|
||||
left: 20vw;
|
||||
bottom: 1rem;
|
||||
}
|
||||
@media screen and (min-width: 1280px){
|
||||
width: 40vw;
|
||||
left: 30vw;
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
button#disclaimer-close{
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
right: -0.5rem;
|
||||
font-size: 0.85rem;
|
||||
background: 0;
|
||||
}
|
||||
|
||||
// New styles for landing page
|
||||
|
||||
#splash {
|
||||
height: auto;
|
||||
padding-bottom: 1.5rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 174, 39, 1) 0%,
|
||||
rgba(222, 73, 109, 1) 100%
|
||||
);
|
||||
#logo {
|
||||
margin-top: 0;
|
||||
margin-left: -0.5rem;
|
||||
padding-top: 2rem;
|
||||
text-align: center;
|
||||
font-size: 2.25rem;
|
||||
line-height: 2;
|
||||
img {
|
||||
vertical-align: top;
|
||||
height: 4.5rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
text-align: center;
|
||||
padding: 0.5rem 25%;
|
||||
}
|
||||
#doc-link {
|
||||
text-align: center;
|
||||
margin-left: -0.5rem;
|
||||
> a {
|
||||
background: transparent;
|
||||
border: 0.0625rem solid rgba(17, 17, 17, 0.95);
|
||||
transition: all 0.3s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgba(17, 17, 17, 0.95);
|
||||
color: #e86957;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
#logo {
|
||||
font-size: 1.75rem;
|
||||
img {
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
padding: 0.25rem 17.5%;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
#doc-link {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 383px) {
|
||||
#logo {
|
||||
font-size: 1.5rem;
|
||||
img {
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
padding: 0.125rem 5%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 479px) {
|
||||
#tagline #tagline-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.col-md-offset-1 {
|
||||
margin-left: 8.33333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.col-lg-offset-2 {
|
||||
margin-left: 16.66667%;
|
||||
}
|
||||
}
|
||||
|
||||
h2.index-section {
|
||||
border-left: 0.3125rem solid #de4a6d;
|
||||
padding-left: 0.625rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#license-icon {
|
||||
text-align: center;
|
||||
@media screen and (min-width: 768px) {
|
||||
position: relative;
|
||||
top: calc(50% - 40px);
|
||||
}
|
||||
> svg {
|
||||
border: 0.03125rem solid #444;
|
||||
border-radius: 100%;
|
||||
padding: 0.5rem;
|
||||
fill: #444;
|
||||
}
|
||||
}
|
||||
|
||||
#license {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#in-numbers {
|
||||
background: #111; //#3f88c5; //#e15554;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #fff;
|
||||
svg {
|
||||
fill: #fff;
|
||||
@media screen and (min-width: 768px) {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: -34px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
@media screen and (min-width: 768px) {
|
||||
position: relative;
|
||||
top: -24px;
|
||||
left: 22px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
margin-top: 0;
|
||||
font-size: 0.625rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#snippet-count,
|
||||
#contrib-count,
|
||||
#commit-count,
|
||||
#star-count {
|
||||
font-size: 1rem;
|
||||
@media screen and (min-width: 768px) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul#links {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
li + li {
|
||||
padding-top: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pick:not(.selected) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card.pick {
|
||||
transition: all 0.6s;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.card.pick + .card.pick {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.pick.selected {
|
||||
overflow: visible;
|
||||
button.next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -1rem;
|
||||
> svg {
|
||||
margin-right: -0.0625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pick-slider {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button.previous {
|
||||
left: -1%;
|
||||
> svg {
|
||||
margin-left: -0.125rem;
|
||||
}
|
||||
}
|
||||
button.next {
|
||||
right: -1%;
|
||||
> svg {
|
||||
margin-left: 0.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
button.previous,
|
||||
button.next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border-radius: 100%;
|
||||
background: #f8f8f8;
|
||||
border: 0.03125rem solid #ddd;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: all 0.3s;
|
||||
z-index: 2000;
|
||||
> svg {
|
||||
fill: #888;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: #aaa;
|
||||
> svg {
|
||||
fill: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card.contributor {
|
||||
height: calc(100% - 1rem);
|
||||
justify-content: left;
|
||||
> .section.media {
|
||||
height: auto;
|
||||
}
|
||||
> .section.button {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
transition: color 0.3s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--a-l-col);
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card.fluid.contribution-guideline {
|
||||
overflow: visible;
|
||||
margin-top: 3rem;
|
||||
padding-bottom: 0.25rem;
|
||||
h3 {
|
||||
padding-top: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.contribution-guideline + .contribution-guideline {
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: relative;
|
||||
top: -2.75rem;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: #ddd;
|
||||
border: 0.03125rem solid #d0d0d0;
|
||||
border-radius: 100%;
|
||||
left: calc(50% - 0.1875rem);
|
||||
box-shadow: inset -0.03125rem -0.03125rem 0.03125rem rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: - 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.contribution-number {
|
||||
position: absolute;
|
||||
top: -1.125rem;
|
||||
left: calc(50% - 1.125rem);
|
||||
font-size: 1.5rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 174, 39, 1) 0%,
|
||||
rgba(222, 73, 109, 1) 100%
|
||||
);
|
||||
border: 0.03125 solid #ddd;
|
||||
width: 2.25rem;
|
||||
text-align: center;
|
||||
height: 2.25rem;
|
||||
border-radius: 100%;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
label.button.drawer-toggle {
|
||||
background: transparent;
|
||||
color: #111;
|
||||
&:hover, &:focus {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
nav .input-group.vertical {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 0.0625rem solid var(--nv-br-col);
|
||||
}
|
||||
@ -491,6 +491,9 @@ $grid-large-breakpoint: 1280px;
|
||||
// ===================================================
|
||||
// Cards
|
||||
// ===================================================
|
||||
h2.category-name {
|
||||
text-align: center;
|
||||
}
|
||||
.card {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
1
docs/style.css
Normal file
1
docs/style.css
Normal file
File diff suppressed because one or more lines are too long
@ -34,22 +34,22 @@ if (
|
||||
);
|
||||
process.exit(0);
|
||||
}
|
||||
// Compile the mini.css framework and custom CSS styles, using `node-sass`.
|
||||
// Compile the SCSS file, using `node-sass`.
|
||||
const sass = require('node-sass');
|
||||
sass.render(
|
||||
{
|
||||
file: path.join('docs', 'mini', 'flavor.scss'),
|
||||
outFile: path.join('docs', 'mini.css'),
|
||||
file: path.join('docs', 'scss', 'style.scss'),
|
||||
outFile: path.join('docs', 'style.css'),
|
||||
outputStyle: 'compressed'
|
||||
},
|
||||
function(err, result) {
|
||||
if (!err) {
|
||||
fs.writeFile(path.join('docs', 'mini.css'), result.css, function(err2) {
|
||||
if (!err2) console.log(`${chalk.green('SUCCESS!')} mini.css file generated!`);
|
||||
else console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
|
||||
fs.writeFile(path.join('docs', 'style.css'), result.css, function(err2) {
|
||||
if (!err2) console.log(`${chalk.green('SUCCESS!')} style.css file generated!`);
|
||||
else console.log(`${chalk.red('ERROR!')} During style.css file generation: ${err}`);
|
||||
});
|
||||
} else {
|
||||
console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
|
||||
console.log(`${chalk.red('ERROR!')} During style.css file generation: ${err}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -131,6 +131,7 @@ try {
|
||||
}
|
||||
// Load tag data from the database
|
||||
tagDbData = util.readTags();
|
||||
/*
|
||||
// Create the output for the index.html file (only locally or on Travis CRON or custom job)
|
||||
if (
|
||||
!util.isTravisCI() ||
|
||||
@ -273,7 +274,7 @@ if (
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
// Create the output for individual category pages
|
||||
try {
|
||||
// Add the start static part
|
||||
@ -290,22 +291,22 @@ try {
|
||||
: a.localeCompare(b)
|
||||
)) {
|
||||
output +=
|
||||
'<h3>' +
|
||||
'<h4>' +
|
||||
md
|
||||
.render(`${util.capitalize(tag, true)}\n`)
|
||||
.replace(/<p>/g, '')
|
||||
.replace(/<\/p>/g, '') +
|
||||
'</h3>';
|
||||
'</h4>';
|
||||
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
|
||||
output += md
|
||||
.render(`[${taggedSnippet[0]}](./${tag}#${taggedSnippet[0].toLowerCase()})\n`)
|
||||
.replace(/<p>/g, '')
|
||||
.replace(/<\/p>/g, '')
|
||||
.replace(/<a/g, `<a class="sublink-1" tags="${taggedSnippet[1].join(',')}"`);
|
||||
.replace(/<a/g, `<a tags="${taggedSnippet[1].join(',')}"`);
|
||||
output += '\n';
|
||||
}
|
||||
output +=
|
||||
'</nav><main class="col-sm-12 col-md-8 col-lg-9" style="height: 100%;overflow-y: auto; background: #eceef2; padding: 0;">';
|
||||
'</nav><main class="col-centered">';
|
||||
output += '<a id="top"> </a>';
|
||||
// Loop over tags and snippets to create the list of snippets
|
||||
for (let tag of [...new Set(Object.entries(tagDbData).map(t => t[1][0]))]
|
||||
@ -323,23 +324,25 @@ try {
|
||||
.replace(new RegExp(`./${tag}#`, 'g'), '#');
|
||||
localOutput += md
|
||||
.render(`## ${util.capitalize(tag, true)}\n`)
|
||||
.replace(/<h2>/g, '<h2 style="text-align:center;">');
|
||||
.replace(/<h2>/g, '<h2 class="category-name">');
|
||||
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
|
||||
localOutput +=
|
||||
'<div class="card fluid">' +
|
||||
'<div class="card code-card">' +
|
||||
`<div class="corner ${taggedSnippet[1].includes('advanced') ? 'advanced' : taggedSnippet[1].includes('beginner') ? 'beginner' : 'intermediate'}">${taggedSnippet[1].includes('advanced') ? 'advanced' : taggedSnippet[1].includes('beginner') ? 'beginner' : 'intermediate'}</div>` +
|
||||
md
|
||||
.render(`\n${snippets[taggedSnippet[0] + '.md']}`)
|
||||
.replace(
|
||||
/<h3/g,
|
||||
`<h3 id="${taggedSnippet[0].toLowerCase()}" class="section double-padded"`
|
||||
`<div class="section card-content"><h4 id="${taggedSnippet[0].toLowerCase()}"`
|
||||
)
|
||||
.replace(
|
||||
/<\/h3>/g,
|
||||
`${
|
||||
taggedSnippet[1].includes('advanced') ? '<mark class="tag">advanced</mark>' : ''
|
||||
}</h3>`
|
||||
'</h4>'
|
||||
)
|
||||
.replace(
|
||||
/<pre><code class="language-js">/m,
|
||||
'</div><div class="copy-button-container"><button class="copy-button"></button></div><pre><code class="language-js">'
|
||||
)
|
||||
.replace(/<\/h3>/g, '</h3><div class="section double-padded">')
|
||||
.replace(
|
||||
/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm,
|
||||
(match, p1) =>
|
||||
@ -348,9 +351,9 @@ try {
|
||||
Prism.languages.javascript
|
||||
)}</pre>`
|
||||
)
|
||||
.replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
|
||||
'<button class="primary clipboard-copy">📋 Copy to clipboard</button>' +
|
||||
'</div></div>';
|
||||
.replace(/<\/div>\s*<pre class="/g, '</div><pre class="section card-code ')
|
||||
.replace(/<\/pre>\s+<pre class="/g, '</pre><label class="collapse">examples</label><pre class="section card-examples ') +
|
||||
'</div>';
|
||||
// Add the ending static part
|
||||
localOutput += `\n${endPart + '\n'}`;
|
||||
// Optimize punctuation nodes
|
||||
@ -391,8 +394,8 @@ try {
|
||||
removeStyleLinkTypeAttributes: false,
|
||||
trimCustomFragments: true
|
||||
});
|
||||
fs.writeFileSync(path.join(docsPath, page.tag + '.html'), page.content);
|
||||
console.log(`${chalk.green('SUCCESS!')} ${page.tag}.html file generated!`);
|
||||
fs.writeFileSync(path.join(docsPath, (page.tag == 'array' ? 'index' : page.tag) + '.html'), page.content);
|
||||
console.log(`${chalk.green('SUCCESS!')} ${page.tag == 'array' ? 'index' : page.tag}.html file generated!`);
|
||||
});
|
||||
} catch (err) {
|
||||
// Handle errors (hopefully not!)
|
||||
@ -400,6 +403,7 @@ try {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
/*
|
||||
// Create the output for the beginner.html file
|
||||
try {
|
||||
// Add the static part
|
||||
@ -565,6 +569,7 @@ try {
|
||||
console.log(`${chalk.red('ERROR!')} During archive.html generation: ${err}`);
|
||||
process.exit(1);
|
||||
}
|
||||
*/
|
||||
|
||||
// Log the time taken
|
||||
console.timeEnd('Webber');
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./mini.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Snippets Archive - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./mini.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Snippets for Beginners - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./mini.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
<button class="scroll-to-top">↑</button>
|
||||
<footer>
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license. <br>Sponsored by <img src="./sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p>
|
||||
</footer>
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license. <br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
|
||||
width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.<br>Ribbon
|
||||
made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
|
||||
license.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- <button class="scroll-to-top"></button></div> -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -9,7 +9,7 @@
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./mini.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>$tag - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
@ -24,7 +24,7 @@
|
||||
<script>
|
||||
const search = (node) => {
|
||||
let matchingTags = [];
|
||||
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
|
||||
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
|
||||
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
||||
if(data.includes(true)){
|
||||
x.style.display = '';
|
||||
@ -32,15 +32,15 @@
|
||||
}
|
||||
else x.style.display = 'none';
|
||||
});
|
||||
Array.from(node.parentElement.parentElement.getElementsByTagName('h3')).forEach(x => {
|
||||
Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
|
||||
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
|
||||
})
|
||||
}
|
||||
function scrollToTop(){
|
||||
const c = document.querySelector('main').scrollTop;
|
||||
const c = document.querySelector('.card-container').scrollTop;
|
||||
if (c > 0) {
|
||||
window.requestAnimationFrame(scrollToTop);
|
||||
document.querySelector('main').scrollTo(0, c - c / 4);
|
||||
document.querySelector('.card-container').scrollTo(0, c - c / 4);
|
||||
}
|
||||
};
|
||||
function scrollTo(element, to, id, duration) {
|
||||
@ -60,21 +60,24 @@
|
||||
function loader() {
|
||||
registerClickListener();
|
||||
if(window.innerWidth >= '768')
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === '$tag')[0].offsetTop - 130;
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
else
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === '$tag')[0].offsetTop - 65;
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
}
|
||||
function registerClickListener() {
|
||||
document.addEventListener('click', function (event) {
|
||||
if( document.getElementById('doc-drawer-checkbox').checked ) {
|
||||
if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) {
|
||||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||||
}
|
||||
}
|
||||
if ( event.target.classList.contains('collapse') ) {
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||||
}
|
||||
else if (event.target.classList.contains('clipboard-copy')) {
|
||||
else if (event.target.classList.contains('menu-button')) {
|
||||
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
|
||||
}
|
||||
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
|
||||
document.querySelector('nav').classList = '';
|
||||
document.querySelector('.menu-button').classList = 'menu-button';
|
||||
}
|
||||
else if (event.target.classList.contains('copy-button')) {
|
||||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text.trim();
|
||||
@ -96,27 +99,23 @@
|
||||
else if (event.target.classList.contains('scroll-to-top')){
|
||||
scrollToTop();
|
||||
}
|
||||
else if (event.target.classList.contains('sublink-1')){
|
||||
else if (event.target.matches('nav a')){
|
||||
if(event.target.getAttribute("href").includes('./')) return;
|
||||
event.preventDefault();
|
||||
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
|
||||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||||
scrollTo(document.querySelector('.card-container'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="loader()">
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||||
<header style="height: 3.5rem; box-sizing: border-box; overflow: hidden;">
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" style="height: 3.5rem; padding:0.375rem; box-sizing: border-box;" alt="logo"/><span id="title"> 30 seconds of code</span>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
|
||||
<button class="menu-button"></button>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label>
|
||||
</header>
|
||||
<div class="row" style="height: calc(100vh - 3.5rem);overflow: hidden;">
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" style="border-top: 0">
|
||||
<div class="input-group vertical">
|
||||
<input class="search" type="text" id="searchInput" onkeyup="search(this)" placeholder="Search...">
|
||||
</div>
|
||||
<div class="container card-container">
|
||||
<nav>
|
||||
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search...">
|
||||
|
||||
50
tag_database
50
tag_database
@ -1,5 +1,5 @@
|
||||
all:array,function
|
||||
allEqual:array,function
|
||||
allEqual:array,function,beginner
|
||||
any:array,function
|
||||
approximatelyEqual:math
|
||||
arrayToCSV:array,string,utility
|
||||
@ -42,7 +42,7 @@ createElement:browser,utility
|
||||
createEventHub:browser,event,advanced
|
||||
CSVToArray:string,array,utility
|
||||
CSVToJSON:string,array,object,advanced
|
||||
currentURL:browser,url
|
||||
currentURL:browser,url,beginner
|
||||
curry:function,recursion
|
||||
debounce:function
|
||||
decapitalize:string,array
|
||||
@ -70,11 +70,11 @@ elo:math,array,advanced
|
||||
equals:object,array,type,advanced
|
||||
escapeHTML:string,browser,regexp
|
||||
escapeRegExp:string,regexp
|
||||
everyNth:array
|
||||
everyNth:array,beginner
|
||||
extendHex:utility,string
|
||||
factorial:math,recursion
|
||||
fibonacci:math,array
|
||||
filterNonUnique:array
|
||||
factorial:math,recursion,beginner
|
||||
fibonacci:math,array,beginner
|
||||
filterNonUnique:array,beginner
|
||||
filterNonUniqueBy:array,function
|
||||
findKey:object,function
|
||||
findLast:array
|
||||
@ -90,19 +90,19 @@ forOwnRight:object
|
||||
fromCamelCase:string
|
||||
functionName:function,utility
|
||||
functions:object,function
|
||||
gcd:math,recursion
|
||||
gcd:math,recursion,beginner
|
||||
geometricProgression:math
|
||||
get:object
|
||||
getColonTimeFromDate:date
|
||||
getDaysDiffBetweenDates:date
|
||||
getMeridiemSuffixOfInteger:date
|
||||
getMeridiemSuffixOfInteger:date,beginner
|
||||
getScrollPosition:browser
|
||||
getStyle:browser,css
|
||||
getType:type
|
||||
getURLParameters:utility,browser,string,url
|
||||
groupBy:array,object
|
||||
hammingDistance:math
|
||||
hasClass:browser,css
|
||||
hasClass:browser,css,beginner
|
||||
hasFlags:node
|
||||
hashBrowser:browser,utility,advanced,promise
|
||||
hashNode:node,utility,promise
|
||||
@ -134,9 +134,9 @@ isArrayLike:type,array
|
||||
isBoolean:type
|
||||
isBrowser:utility,browser
|
||||
isBrowserTabFocused:browser
|
||||
isDivisible:math
|
||||
isDivisible:math,beginner
|
||||
isEmpty:type,array,object,string
|
||||
isEven:math
|
||||
isEven:math,beginner
|
||||
isFunction:type,function
|
||||
isLowerCase:string,utility
|
||||
isNil:type
|
||||
@ -145,7 +145,7 @@ isNumber:type,math
|
||||
isObject:type,object
|
||||
isObjectLike:type,object
|
||||
isPlainObject:type,object
|
||||
isPrime:math
|
||||
isPrime:math,beginner
|
||||
isPrimitive:type,function,array,string
|
||||
isPromiseLike:type,function,promise
|
||||
isSorted:array
|
||||
@ -158,8 +158,8 @@ isValidJSON:type,json
|
||||
join:array
|
||||
JSONtoCSV:array,string,object,advanced
|
||||
JSONToFile:node,json
|
||||
last:array
|
||||
lcm:math,recursion
|
||||
last:array,beginner
|
||||
lcm:math,recursion,beginner
|
||||
longestItem:array,string,utility
|
||||
lowercaseKeys:object
|
||||
luhnCheck:math,utility
|
||||
@ -171,11 +171,11 @@ mask:string,utility,regexp
|
||||
matches:object,type
|
||||
matchesWith:object,type,function
|
||||
maxBy:math,array,function
|
||||
maxN:array,math
|
||||
maxN:array,math,beginner
|
||||
median:math,array
|
||||
memoize:function
|
||||
merge:object,array
|
||||
minBy:math,array,function
|
||||
minBy:math,array,function,beginner
|
||||
minN:array,math
|
||||
mostPerformant:utility,function
|
||||
negate:function
|
||||
@ -183,12 +183,12 @@ nest:object
|
||||
nodeListToArray:browser,array
|
||||
none:array,function
|
||||
nthArg:utility,function
|
||||
nthElement:array
|
||||
nthElement:array,beginner
|
||||
objectFromPairs:object,array
|
||||
objectToPairs:object,array
|
||||
observeMutations:browser,event,advanced
|
||||
off:browser,event
|
||||
offset:array
|
||||
offset:array,beginner
|
||||
omit:object,array
|
||||
omitBy:object,array,function
|
||||
on:browser,event
|
||||
@ -222,7 +222,7 @@ pullBy:array,function,advanced
|
||||
radsToDegrees:math
|
||||
randomHexColorCode:utility,random
|
||||
randomIntArrayInRange:math,utility,random
|
||||
randomIntegerInRange:math,utility,random
|
||||
randomIntegerInRange:math,utility,random,beginner
|
||||
randomNumberInRange:math,utility,random
|
||||
readFileLines:node,array,string
|
||||
rearg:adapter,function
|
||||
@ -235,12 +235,12 @@ reject:array
|
||||
remove:array
|
||||
removeNonASCII:string,regexp
|
||||
renameKeys:object
|
||||
reverseString:string,array
|
||||
reverseString:string,array,beginner
|
||||
RGBToHex:utility
|
||||
round:math
|
||||
runAsync:browser,function,advanced,promise,url
|
||||
runPromisesInSeries:function,promise
|
||||
sample:array,random
|
||||
sample:array,random,beginner
|
||||
sampleSize:array,random
|
||||
scrollToTop:browser
|
||||
sdbm:math,utility
|
||||
@ -249,7 +249,7 @@ setStyle:browser
|
||||
shallowClone:object
|
||||
show:browser,css
|
||||
shuffle:array,random
|
||||
similarity:array,math
|
||||
similarity:array,math,beginner
|
||||
size:object,array,string
|
||||
sleep:function,promise
|
||||
smoothScroll:browser,css
|
||||
@ -264,13 +264,13 @@ stableSort:array,sort,advanced
|
||||
standardDeviation:math,array
|
||||
stringPermutations:string,recursion
|
||||
stripHTMLTags:string,utility,regexp
|
||||
sum:math,array
|
||||
sum:math,array,beginner
|
||||
sumBy:math,array,function
|
||||
sumPower:math
|
||||
symmetricDifference:array,math
|
||||
symmetricDifferenceBy:array,function
|
||||
symmetricDifferenceWith:array,function
|
||||
tail:array
|
||||
tail:array,beginner
|
||||
take:array
|
||||
takeRight:array
|
||||
takeRightWhile:array,function
|
||||
@ -290,7 +290,7 @@ toSafeInteger:math
|
||||
toSnakeCase:string,regexp
|
||||
transform:object,array
|
||||
triggerEvent:browser,event
|
||||
truncateString:string
|
||||
truncateString:string,beginner
|
||||
truthCheckCollection:object,logic,array
|
||||
unary:adapter,function
|
||||
uncurry:function
|
||||
|
||||
Reference in New Issue
Block a user