Finished custom elements
Flavors and the framework's main parts are all ready.
This commit is contained in:
Angelos Chalaris
parent
37d17ff326
commit
4b77c2b29b
6 changed files with 401 additions and 57 deletions
259
dist/mini-default.css
vendored
259
dist/mini-default.css
vendored
|
|
@ -228,7 +228,7 @@ a:hover, a:focus {
|
|||
}
|
||||
|
||||
/*
|
||||
Definitions for the grid system.
|
||||
Definitions for the grid system, cards and containers.
|
||||
*/
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
|
|
@ -595,11 +595,107 @@ 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;
|
||||
}
|
||||
|
||||
/*
|
||||
Custom elements for card elements.
|
||||
*/
|
||||
@media screen and (min-width: 240px) {
|
||||
.card.small {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 480px) {
|
||||
.card.large {
|
||||
max-width: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
.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: #f8f8f8;
|
||||
--card-border-color: #a71a1a;
|
||||
}
|
||||
|
||||
.card > .section.special {
|
||||
--card-back-color: linear-gradient(135deg, #18FFFF 10%, #1565C0 100%);
|
||||
}
|
||||
|
||||
.card > .section.double-padded {
|
||||
padding: calc(1.5 * var(--universal-padding));
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
/* Input_control module CSS variable definitions */
|
||||
:root {
|
||||
--form-back-color: #f0f0f0;
|
||||
--form-fore-color: #111;
|
||||
--form-border-color: #ddd;
|
||||
--input-back-color: #f8f8f8;
|
||||
--input-fore-color: #111;
|
||||
--input-border-color: #ddd;
|
||||
--input-focus-color: #0288d1;
|
||||
--input-invalid-color: #d32f2f;
|
||||
--button-back-color: #e2e2e2;
|
||||
|
|
@ -607,18 +703,20 @@ a:hover, a:focus {
|
|||
--button-fore-color: #212121;
|
||||
--button-border-color: transparent;
|
||||
--button-hover-border-color: transparent;
|
||||
--button-group-border-color: rgba(124, 124, 124, 0.54);
|
||||
}
|
||||
|
||||
form {
|
||||
background: var(--secondary-back-color);
|
||||
border: 0.0625rem solid var(--secondary-border-color);
|
||||
background: var(--form-back-color);
|
||||
color: var(--form-fore-color);
|
||||
border: 0.0625rem solid var(--form-border-color);
|
||||
border-radius: var(--universal-border-radius);
|
||||
margin: var(--universal-margin);
|
||||
padding: calc(2 * var(--universal-padding)) var(--universal-padding);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0.0625rem solid var(--secondary-border-color);
|
||||
border: 0.0625rem solid var(--form-border-color);
|
||||
border-radius: var(--universal-border-radius);
|
||||
margin: calc(var(--universal-margin) / 4);
|
||||
padding: var(--universal-padding);
|
||||
|
|
@ -685,11 +783,11 @@ label {
|
|||
}
|
||||
|
||||
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
|
||||
[type="password"], [type="url"], [type="tel"], textarea, select {
|
||||
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
|
||||
box-sizing: border-box;
|
||||
background: var(--back-color);
|
||||
color: var(--fore-color);
|
||||
border: 0.0625rem solid var(--secondary-border-color);
|
||||
background: var(--input-back-color);
|
||||
color: var(--input-fore-color);
|
||||
border: 0.0625rem solid var(--input-border-color);
|
||||
border-radius: var(--universal-border-radius);
|
||||
margin: calc(var(--universal-margin) / 2);
|
||||
padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
|
||||
|
|
@ -718,12 +816,51 @@ option {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
[type="checkbox"], [type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
height: calc(1rem + var(--universal-padding) / 2);
|
||||
width: calc(1rem + var(--universal-padding) / 2);
|
||||
vertical-align: text-bottom;
|
||||
padding: 0;
|
||||
flex-basis: calc(1rem + var(--universal-padding) / 2) !important;
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked:before, [type="radio"]:checked:before {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked:before {
|
||||
content: '\2713';
|
||||
font-family: sans-serif;
|
||||
font-size: calc(1rem + var(--universal-padding) / 2);
|
||||
top: calc(0rem - var(--universal-padding));
|
||||
left: calc(var(--universal-padding) / 4);
|
||||
}
|
||||
|
||||
[type="radio"] {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
[type="radio"]:checked:before {
|
||||
border-radius: 100%;
|
||||
content: '';
|
||||
top: calc(0.0625rem + var(--universal-padding) / 2);
|
||||
left: calc(0.0625rem + var(--universal-padding) / 2);
|
||||
background: var(--input-fore-color);
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
:placeholder-shown {
|
||||
color: var(--fore-color);
|
||||
color: var(--input-fore-color);
|
||||
}
|
||||
|
||||
::-ms-placeholder {
|
||||
color: var(--fore-color);
|
||||
color: var(--input-fore-color);
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
|
|
@ -770,6 +907,86 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
|
|||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
border: 0.0625rem solid var(--button-group-border-color);
|
||||
border-radius: var(--universal-border-radius);
|
||||
margin: var(--universal-margin);
|
||||
}
|
||||
|
||||
.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
|
||||
.button-group > .button, .button-group > [role="button"] {
|
||||
margin: 0;
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button-group > :not(:first-child) {
|
||||
border-left: 0.0625rem solid var(--button-group-border-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
.button-group > :not(:first-child) {
|
||||
border: 0;
|
||||
border-top: 0.0625rem solid var(--button-group-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary {
|
||||
--button-back-color: #1976d2;
|
||||
--button-fore-color: #f8f8f8;
|
||||
}
|
||||
|
||||
button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, [type="reset"].primary:hover, [type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus {
|
||||
--button-hover-back-color: #1565c0;
|
||||
}
|
||||
|
||||
button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary {
|
||||
--button-back-color: #d32f2f;
|
||||
--button-fore-color: #f8f8f8;
|
||||
}
|
||||
|
||||
button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus {
|
||||
--button-hover-back-color: #c62828;
|
||||
}
|
||||
|
||||
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary {
|
||||
--button-back-color: #308732;
|
||||
--button-fore-color: #f8f8f8;
|
||||
}
|
||||
|
||||
button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:focus, [type="reset"].tertiary:hover, [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:focus {
|
||||
--button-hover-back-color: #277529;
|
||||
}
|
||||
|
||||
button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse {
|
||||
--button-back-color: #212121;
|
||||
--button-fore-color: #f8f8f8;
|
||||
}
|
||||
|
||||
button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:focus, [type="reset"].inverse:hover, [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:focus {
|
||||
--button-hover-back-color: #111;
|
||||
}
|
||||
|
||||
button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small {
|
||||
padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));
|
||||
margin: var(--universal-margin);
|
||||
}
|
||||
|
||||
button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large {
|
||||
padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));
|
||||
margin: var(--universal-margin);
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
|
|
@ -791,6 +1008,7 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
|
|||
--drawer-back-color: #f8f8f8;
|
||||
--drawer-hover-back-color: #f0f0f0;
|
||||
--drawer-border-color: #ddd;
|
||||
--drawer-close-color: #444;
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -917,11 +1135,10 @@ footer.sticky {
|
|||
.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;
|
||||
vertical-align: bottom;
|
||||
content: '\00a0\2261\00a0';
|
||||
font-family: sans-serif;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
|
@ -963,6 +1180,8 @@ footer.sticky {
|
|||
top: var(--universal-margin);
|
||||
right: var(--universal-margin);
|
||||
z-index: 1111;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: var(--universal-border-radius);
|
||||
padding: var(--universal-padding);
|
||||
margin: 0;
|
||||
|
|
@ -972,11 +1191,13 @@ footer.sticky {
|
|||
|
||||
[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: '';
|
||||
content: '\00D7';
|
||||
color: var(--drawer-close-color);
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-family: sans-serif;
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus {
|
||||
|
|
|
|||
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
|
|
@ -143,3 +143,8 @@
|
|||
- Properly applied variable styling to `checkbox` and `radio` elements. They now use the `base-font-size` Sass variable to get their size, which makes sense.
|
||||
- Added `.button-group`s, they seem to behave properly, `border-color` could use some tweaking maybe.
|
||||
- Added external Sass variables to all modules (hopefully I didn't miss any), so that they can be used on their own now (not recommended, but doable).
|
||||
- Updated color palettes that should have better contrasts (slight deviation from the old ones, but this might change before release).
|
||||
- Added all necessary variants for `.button`-like elements.
|
||||
- Added custom styles necessary for `.card` elements.
|
||||
- After compilation of the completed modules, the size is `4.58KB`, whereas the size of the **Fermion** branch with the same things (meaning the switches and other ditched components were not included) was `4.56KB`. This is unbelievable and makes the **hugging cat** really happy.
|
||||
- Recompiled the `mini-default` flavor files. They should be mostly ready for release by now.
|
||||
|
|
|
|||
|
|
@ -7,8 +7,82 @@
|
|||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v3.0.0-alpha.1
|
||||
*/
|
||||
|
||||
@import '../mini/core';
|
||||
@import '../mini/layout';
|
||||
|
||||
/*
|
||||
Custom elements for card elements.
|
||||
*/
|
||||
$card-small-name: 'small'; // Class name for small cards.
|
||||
$card-small-width: 240px; // Width for small cards.
|
||||
@include make-card-alt-size ($card-small-name, $card-small-width);
|
||||
|
||||
$card-large-name: 'large'; // Class name for large cards.
|
||||
$card-large-width: 480px; // Width for large cards.
|
||||
@include make-card-alt-size ($card-large-name, $card-large-width);
|
||||
|
||||
$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-warning-name: 'warning'; // Class name for card warnging color variant.
|
||||
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
|
||||
$card-warning-fore-color: #111; // Text color for card warnging color variant.
|
||||
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
|
||||
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
|
||||
|
||||
$card-error-name: 'error'; // Class name for card error color variant.
|
||||
$card-error-back-color: #b71c1c; // Background color for card error color variant.
|
||||
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
|
||||
$card-error-border-color: #a71a1a; // Border style for card error color variant.
|
||||
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
|
||||
|
||||
$card-section-special-name: 'special'; // Class name and background color for card special section variant.
|
||||
$card-section-special-back-color: linear-gradient(135deg, #18FFFF 10%, #1565C0 100%);
|
||||
$card-section-special-fore-color: #111; // Text color for card special section variant.
|
||||
@include make-card-section-alt-color ($card-section-special-name, $card-section-special-back-color, $card-section-special-fore-color);
|
||||
|
||||
$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);
|
||||
|
||||
@import '../mini/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);
|
||||
|
||||
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
|
||||
$button-secondary-back-color: #d32f2f; // Background color for secondary button color variant.
|
||||
$button-secondary-hover-back-color:#c62828; // Background color for secondary button color variant (hover).
|
||||
$button-secondary-fore-color: #f8f8f8; // Text color for secondary button color variant.
|
||||
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
|
||||
|
||||
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
|
||||
$button-tertiary-back-color: #308732; // Background color for tertiary button color variant.
|
||||
$button-tertiary-hover-back-color:#277529; // Background color for tertiary button color variant (hover).
|
||||
$button-tertiary-fore-color: #f8f8f8; // Text color for tertiary button color variant.
|
||||
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
|
||||
|
||||
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
|
||||
$button-inverse-back-color: #212121; // Background color for inverse button color variant.
|
||||
$button-inverse-hover-back-color:#111; // Background color for inverse button color variant (hover).
|
||||
$button-inverse-fore-color: #f8f8f8; // Text color for inverse button color variant.
|
||||
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
|
||||
|
||||
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
|
||||
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
|
||||
$button-small-margin: var(#{$universal-margin-var});
|
||||
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
|
||||
|
||||
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
|
||||
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
|
||||
$button-large-margin: var(#{$universal-margin-var});
|
||||
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
|
||||
|
||||
@import '../mini/navigation';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,82 @@
|
|||
|
||||
@import '../mini/core';
|
||||
@import '../mini/layout';
|
||||
|
||||
/*
|
||||
Custom elements for card elements.
|
||||
*/
|
||||
$card-small-name: 'small'; // Class name for small cards.
|
||||
$card-small-width: 240px; // Width for small cards.
|
||||
@include make-card-alt-size ($card-small-name, $card-small-width);
|
||||
|
||||
$card-large-name: 'large'; // Class name for large cards.
|
||||
$card-large-width: 480px; // Width for large cards.
|
||||
@include make-card-alt-size ($card-large-name, $card-large-width);
|
||||
|
||||
$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-warning-name: 'warning'; // Class name for card warnging color variant.
|
||||
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
|
||||
$card-warning-fore-color: #111; // Text color for card warnging color variant.
|
||||
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
|
||||
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
|
||||
|
||||
$card-error-name: 'error'; // Class name for card error color variant.
|
||||
$card-error-back-color: #b71c1c; // Background color for card error color variant.
|
||||
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
|
||||
$card-error-border-color: #a71a1a; // Border style for card error color variant.
|
||||
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
|
||||
|
||||
$card-section-special-name: 'special'; // Class name and background color for card special section variant.
|
||||
$card-section-special-back-color: linear-gradient(135deg, #18FFFF 10%, #1565C0 100%);
|
||||
$card-section-special-fore-color: #111; // Text color for card special section variant.
|
||||
@include make-card-section-alt-color ($card-section-special-name, $card-section-special-back-color, $card-section-special-fore-color);
|
||||
|
||||
$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);
|
||||
|
||||
@import '../mini/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);
|
||||
|
||||
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
|
||||
$button-secondary-back-color: #d32f2f; // Background color for secondary button color variant.
|
||||
$button-secondary-hover-back-color:#c62828; // Background color for secondary button color variant (hover).
|
||||
$button-secondary-fore-color: #f8f8f8; // Text color for secondary button color variant.
|
||||
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
|
||||
|
||||
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
|
||||
$button-tertiary-back-color: #308732; // Background color for tertiary button color variant.
|
||||
$button-tertiary-hover-back-color:#277529; // Background color for tertiary button color variant (hover).
|
||||
$button-tertiary-fore-color: #f8f8f8; // Text color for tertiary button color variant.
|
||||
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
|
||||
|
||||
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
|
||||
$button-inverse-back-color: #212121; // Background color for inverse button color variant.
|
||||
$button-inverse-hover-back-color:#111; // Background color for inverse button color variant (hover).
|
||||
$button-inverse-fore-color: #f8f8f8; // Text color for inverse button color variant.
|
||||
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
|
||||
|
||||
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
|
||||
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
|
||||
$button-small-margin: var(#{$universal-margin-var});
|
||||
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
|
||||
|
||||
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
|
||||
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
|
||||
$button-large-margin: var(#{$universal-margin-var});
|
||||
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
|
||||
|
||||
@import '../mini/navigation';
|
||||
|
||||
:not(.doc) {
|
||||
|
|
@ -149,34 +224,3 @@ 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);
|
||||
|
|
|
|||
|
|
@ -13,20 +13,20 @@
|
|||
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
|
||||
&.#{$button-alt-name} {
|
||||
@if $button-alt-back-color != $button-back-color {
|
||||
background: var(#{$button-alt-back-color-var});
|
||||
#{$button-back-color-var}: $button-alt-back-color;
|
||||
}
|
||||
@if $button-alt-fore-color != $button-fore-color{
|
||||
color: var(#{$button-alt-fore-color-var});
|
||||
#{$button-fore-color-var}: $button-alt-fore-color;
|
||||
}
|
||||
@if $button-alt-border-color != $button-border-color{
|
||||
border-color: var(#{$button-alt-border-color-var});
|
||||
#{$button-border-color-var}: $button-alt-border-color;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
@if $button-alt-hover-back-color != $button-hover-back-color{
|
||||
background: var(#{$button-alt-hover-back-color-var});
|
||||
#{$button-hover-back-color-var}: $button-alt-hover-back-color;
|
||||
}
|
||||
@if $button-alt-hover-border-color != $button-hover-border-color{
|
||||
border-color: var(#{$button-alt-hover-border-color-var});
|
||||
#{$button-hover-border-color-var}: $button-alt-hover-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue