mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Layout module complete
Merged card and grid into layout, updated accordingly.
This commit is contained in:
Angelos Chalaris
parent
5e18f64ebb
commit
d3c3202670
234
dist/mini-default.css
vendored
234
dist/mini-default.css
vendored
@ -769,3 +769,237 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
|
||||
cursor: not-allowed;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
/* Navigation module CSS variable definitions */
|
||||
:root {
|
||||
--header-back-color: #f8f8f8;
|
||||
--header-hover-back-color: #f0f0f0;
|
||||
--header-fore-color: #444;
|
||||
--header-border-color: #ddd;
|
||||
--nav-back-color: #f8f8f8;
|
||||
--nav-hover-back-color: #f0f0f0;
|
||||
--nav-fore-color: #444;
|
||||
--nav-border-color: #ddd;
|
||||
--nav-link-color: #0277bd;
|
||||
--footer-fore-color: #444;
|
||||
--footer-back-color: #f8f8f8;
|
||||
--footer-border-color: #ddd;
|
||||
--footer-link-color: #0277bd;
|
||||
--drawer-back-color: #f8f8f8;
|
||||
--drawer-hover-back-color: #f0f0f0;
|
||||
--drawer-border-color: #ddd;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 3.1875rem;
|
||||
background: var(--header-back-color);
|
||||
color: var(--header-fore-color);
|
||||
border-bottom: 0.0625rem solid var(--header-border-color);
|
||||
padding: calc(var(--universal-padding) / 4) 0;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header.row {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: var(--header-fore-color);
|
||||
font-size: 1.75rem;
|
||||
padding: var(--universal-padding) calc(2 * var(--universal-padding));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header button, header [type="button"], header .button, header [role="button"] {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
top: calc(0rem - var(--universal-padding) / 4);
|
||||
height: calc(3.1875rem + var(--universal-padding) / 2);
|
||||
background: var(--header-back-color);
|
||||
line-height: calc(3.1875rem - var(--universal-padding) * 1.5);
|
||||
text-align: center;
|
||||
color: var(--header-fore-color);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, header .button:hover, header .button:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: var(--header-hover-back-color);
|
||||
}
|
||||
|
||||
nav {
|
||||
background: var(--nav-back-color);
|
||||
color: var(--nav-fore-color);
|
||||
border: 0.0625rem solid var(--nav-border-color);
|
||||
border-radius: var(--universal-border-radius);
|
||||
margin: var(--universal-margin);
|
||||
}
|
||||
|
||||
nav * {
|
||||
padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: var(--nav-link-color);
|
||||
border-radius: var(--universal-border-radius);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus {
|
||||
text-decoration: none;
|
||||
background: var(--nav-hover-back-color);
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
position: relative;
|
||||
margin-left: calc(2 * var(--universal-padding));
|
||||
}
|
||||
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: calc(var(--universal-padding) - 1 * var(--universal-padding));
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 0.0625rem solid var(--nav-border-color);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
position: relative;
|
||||
margin-left: calc(4 * var(--universal-padding));
|
||||
}
|
||||
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: calc(var(--universal-padding) - 3 * var(--universal-padding));
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 0.0625rem solid var(--nav-border-color);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: var(--footer-back-color);
|
||||
color: var(--footer-fore-color);
|
||||
border-top: 0.0625rem solid var(--footer-border-color);
|
||||
padding: calc(2 * var(--universal-padding)) var(--universal-padding);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: var(--footer-link-color);
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.drawer-toggle:before {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
vertical-align: text-top;
|
||||
content: '';
|
||||
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>') no-repeat;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.drawer-toggle:not(.persistent) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[type="checkbox"].drawer {
|
||||
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%);
|
||||
}
|
||||
|
||||
[type="checkbox"].drawer + * {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 320px;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: var(--drawer-back-color);
|
||||
border: 0.0625rem solid var(--drawer-border-color);
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
z-index: 1110;
|
||||
right: -320px;
|
||||
transition: right 0.3s;
|
||||
}
|
||||
|
||||
[type="checkbox"].drawer + * .drawer-close {
|
||||
position: absolute;
|
||||
top: var(--universal-margin);
|
||||
right: var(--universal-margin);
|
||||
z-index: 1111;
|
||||
border-radius: var(--universal-border-radius);
|
||||
padding: var(--universal-padding);
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
[type="checkbox"].drawer + * .drawer-close:before {
|
||||
display: block;
|
||||
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat;
|
||||
content: '';
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus {
|
||||
background: var(--drawer-hover-back-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
[type="checkbox"].drawer + * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
[type="checkbox"].drawer:checked + * {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
[type="checkbox"].drawer:not(.persistent) + * {
|
||||
position: static;
|
||||
height: 100%;
|
||||
z-index: 1100;
|
||||
}
|
||||
[type="checkbox"].drawer:not(.persistent) + * .drawer-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -126,3 +126,8 @@
|
||||
- `.drawer` will now be either left or right, no option for both. This can be altered in the code or by hand (if I make a tool, I should remember to add an option - *TODO*).
|
||||
- `footer` `display:block` fix removed - IE 9-.
|
||||
- `footer` rebuilt, pretty similar to the last iteration, except for colors.
|
||||
|
||||
## 20171109
|
||||
|
||||
- Renamed `grid` to `layout`. It will now house the `card` module, too. This is done to make sure that cards are never used without the grid system, as they wouldn't work too well without it.
|
||||
- Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module.
|
||||
|
||||
@ -223,7 +223,7 @@ a:hover, a:focus {
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for the grid system.
|
||||
Definitions for the grid system, cards and containers.
|
||||
*/
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
@ -590,6 +590,57 @@ a:hover, a:focus {
|
||||
}
|
||||
}
|
||||
|
||||
/* Card component CSS variable definitions */
|
||||
:root {
|
||||
--card-back-color: #f8f8f8;
|
||||
--card-fore-color: #111;
|
||||
--card-border-color: #ddd;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: var(--card-back-color);
|
||||
color: var(--card-fore-color);
|
||||
border: 0.0625rem solid var(--card-border-color);
|
||||
border-radius: var(--universal-border-radius);
|
||||
margin: var(--universal-margin);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 320px) {
|
||||
.card {
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.card > .section {
|
||||
background: var(--card-back-color);
|
||||
color: var(--card-fore-color);
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 0.0625rem solid var(--card-border-color);
|
||||
padding: var(--universal-padding);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card > .section.media {
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card > .section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
@ -1153,3 +1204,43 @@ p.splash {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 480px) {
|
||||
.card.large {
|
||||
max-width: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 240px) {
|
||||
.card.small {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.card.fluid {
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.card.warning {
|
||||
--card-back-color: #ffca28;
|
||||
--card-border-color: #e8b825;
|
||||
}
|
||||
|
||||
.card.error {
|
||||
--card-back-color: #b71c1c;
|
||||
--card-fore-color: #fafafa;
|
||||
--card-border-color: #a71a1a;
|
||||
}
|
||||
|
||||
.card > .section.dark {
|
||||
--card-back-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.card > .section.darker {
|
||||
--card-back-color: #bdbdbd;
|
||||
}
|
||||
|
||||
.card > .section.double-padded {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@ -9,6 +9,6 @@
|
||||
*/
|
||||
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/layout';
|
||||
@import '../mini/input_control';
|
||||
@import '../mini/navigation';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* DO NOT USE - THIS IS A FLAVOR BUILT FOR THE DOCUMENTATION AND CONTAINS A LOT OF EXTRA CODE!!! */
|
||||
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/layout';
|
||||
@import '../mini/input_control';
|
||||
@import '../mini/navigation';
|
||||
|
||||
@ -149,3 +149,34 @@ p.splash {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
$card-size1-name: 'large'; // Class name for large cards
|
||||
$card-size1-width: 480px; // Width for large cards
|
||||
$card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'warning'; // Class name for card style 1
|
||||
$card-style1-back-color: #ffca28; // Background color for card style 1
|
||||
$card-style1-fore-color: #111; // Text color for card style 1
|
||||
$card-style1-border-color: #e8b825; // Border style for card style 1
|
||||
$card-style2-name: 'error'; // Class name for card style 2
|
||||
$card-style2-back-color: #b71c1c; // Background color for card style 2
|
||||
$card-style2-fore-color: #fafafa; // Text color for card style 2
|
||||
$card-style2-border-color: #a71a1a; // Border style for card style 2
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #e0e0e0; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: #111; // Text color for card section style 1
|
||||
$card-section-style2-name: 'darker'; // Class name for card section style 2
|
||||
$card-section-style2-back-color: #bdbdbd; // Background color for card section style 2
|
||||
$card-section-style2-fore-color: #111; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 0.75rem; // Padding for card section padding style 1
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-alt-size ($card-size2-name, $card-size2-width);
|
||||
@include make-card-alt-size ($card-size3-name, $card-size3-width);
|
||||
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color, $card-style1-border-color);
|
||||
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color, $card-style2-border-color);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color, $card-section-style1-fore-color);
|
||||
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color, $card-section-style2-fore-color);
|
||||
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
Definitions for the grid system.
|
||||
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`).
|
||||
@ -17,6 +17,18 @@ $grid-medium-prefix: 'md' !default; // Medium screen class pre
|
||||
$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-padding: 0.5rem !default;
|
||||
@ -26,6 +38,8 @@ $grid-large-breakpoint: 1280px !default; // Large screen breakpoint
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// 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;
|
||||
@ -116,3 +130,57 @@ $grid-large-breakpoint: 1280px !default; // Large screen breakpoint
|
||||
@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
|
||||
}
|
||||
}
|
||||
62
src/mini/_layout_mixins.scss
Normal file
62
src/mini/_layout_mixins.scss
Normal file
@ -0,0 +1,62 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user