mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-04-13 08:51:52 +02:00
Modular shadows for most modules
This commit is contained in:
Angelos Chalaris
parent
770c517a2d
commit
c86735856b
34
dist/mini-default.css
vendored
34
dist/mini-default.css
vendored
@ -87,7 +87,8 @@ code, kbd, pre, samp {
|
||||
code {
|
||||
border-radius: 2px;
|
||||
background: #e0e0e0;
|
||||
padding: 2px 4px; }
|
||||
padding: 2px 4px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
@ -95,13 +96,15 @@ pre {
|
||||
background: #e0e0e0;
|
||||
padding: 12px;
|
||||
margin: 1px 10px;
|
||||
border-left: 3px solid #1565c0; }
|
||||
border-left: 3px solid #1565c0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
kbd {
|
||||
border-radius: 2px;
|
||||
background: #212121;
|
||||
color: #fafafa;
|
||||
padding: 2px 4px; }
|
||||
padding: 2px 4px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
small, sup, sub {
|
||||
font-size: 75%; }
|
||||
@ -489,6 +492,7 @@ header {
|
||||
background: #263238;
|
||||
color: #fafafa;
|
||||
padding: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden; }
|
||||
@ -536,7 +540,8 @@ form {
|
||||
border: 1px solid #90a4ae;
|
||||
border-radius: 2px;
|
||||
margin: 8px;
|
||||
padding: 8px; }
|
||||
padding: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #b0bec5;
|
||||
@ -626,6 +631,7 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
|
||||
border-radius: 2px;
|
||||
padding: 4px 6px;
|
||||
margin: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer; }
|
||||
@ -701,7 +707,8 @@ table {
|
||||
border-spacing: 0;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px;
|
||||
margin: 0 auto; }
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
caption {
|
||||
font-size: 1.5em;
|
||||
@ -726,7 +733,8 @@ th:first-child, td:first-child {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%; }
|
||||
width: 100%;
|
||||
box-shadow: none; }
|
||||
|
||||
thead {
|
||||
border: 0;
|
||||
@ -744,6 +752,7 @@ th:first-child, td:first-child {
|
||||
display: block;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
margin-bottom: 10px; }
|
||||
|
||||
td {
|
||||
@ -778,7 +787,7 @@ th:first-child, td:first-child {
|
||||
border: 1px solid #9e9e9e;
|
||||
border-radius: 2px;
|
||||
margin: 2px 10px 20px;
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0 0 3px 0; }
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); }
|
||||
.card > .section {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -808,7 +817,8 @@ th:first-child, td:first-child {
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap; }
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); }
|
||||
.tabs > label {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
@ -938,7 +948,9 @@ mark {
|
||||
color: #fafafa;
|
||||
font-size: 95%;
|
||||
line-height: 1;
|
||||
padding: 1px; }
|
||||
border-radius: 2px;
|
||||
padding: 2px 4px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.alert {
|
||||
display: block;
|
||||
@ -947,7 +959,8 @@ mark {
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px;
|
||||
margin: 1px 10px;
|
||||
padding: 12px 16px; }
|
||||
padding: 12px 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26); }
|
||||
|
||||
progress {
|
||||
display: block;
|
||||
@ -960,6 +973,7 @@ progress {
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
margin: 1px auto;
|
||||
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
|
||||
background: #f5f5f5;
|
||||
color: #01579b; }
|
||||
progress::-webkit-progress-value {
|
||||
|
||||
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
@ -394,4 +394,15 @@
|
||||
- Cleanup for `utility`.
|
||||
- Cleanup for `card`. Changed loading order and variables to better reflect the new module system. Updated media queries.
|
||||
- Cleanup for `tab`, updated media queries.
|
||||
- Deployed live demo after cleanup.
|
||||
- Deployed live demo after cleanup.
|
||||
- Added modular `box-shadow` to `card`s.
|
||||
- Added modular `box-shadow` for `pre`, `code`, `kbd` and `mark`.
|
||||
- Added `border-style` and `border-radius` to `mark` contextual defaults.
|
||||
- Changed `padding` of `mark` elements.
|
||||
- Added modular `box-shadow` to `alert`s.
|
||||
- Added modular `box-shadow` for `form`, decided not to add for `fieldset` due to the way it displays and how it sort of clashes with the ideas of material design.
|
||||
- Added modular `box-shadow` for `button` and button-like elements.
|
||||
- Added modular `box-shadow` for `header` decided not to add for `nav` and `footer`.
|
||||
- Added modular `box-shadow` for `progress` element.
|
||||
- Added modular `box-shadow` for `table` element. Tweaked to be responsive on smaller screens.
|
||||
- Added modular `box-shadow` for `tabs` container. This might have some minor problems with `border-radius`es.
|
||||
|
||||
@ -550,6 +550,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -48,12 +48,16 @@ $code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #e0e0e0; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2px; // Border radius for <code>
|
||||
$code-element-box-shadow: // Box shadow for <code>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$pre-element-padding: 12px; // Padding for <pre>
|
||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
|
||||
$pre-element-margin: 1px 10px; // Margin for <pre>
|
||||
$pre-element-box-shadow: // Box shadow for <pre>
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the
|
||||
// left side of <pre> (`true`/`false`)
|
||||
$pre-element-sidebar-style: 3px solid #1565c0; // Style of the sidebar of <pre>
|
||||
@ -62,6 +66,8 @@ $kbd-element-fore-color: $back-color; // Text color for <kbd>
|
||||
$kbd-element-back-color: $fore-color; // Background color for <kbd>
|
||||
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||
$kbd-element-border-radius: 2px; // Border radius for <kbd>
|
||||
$kbd-element-box-shadow: // Box shadow for <kbd>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$style-samp-element: false; // Should styles for <samp> be included?
|
||||
// (`true`/`false`) [6]
|
||||
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
||||
@ -130,6 +136,8 @@ $header-back-color: #263238; // Background color for header
|
||||
$header-fore-color: $back-color; // Text color for header
|
||||
$header-margin: 0; // Margin for header
|
||||
$header-padding: 2px 8px; // Padding for header
|
||||
$header-box-shadow: // Box shadow for header
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$header-logo-name: 'logo'; // Class name for header's logo
|
||||
$header-logo-font-size: 1.75em; // Font size for header's logo
|
||||
$header-logo-line-height: 1.2; // Line height for header's logo
|
||||
@ -160,6 +168,8 @@ $form-border-style: 1px solid #90a4ae; // Border style for forms
|
||||
$form-border-radius: 2px; // Border radius for forms
|
||||
$form-margin: 8px; // Margin for forms
|
||||
$form-padding: 8px; // Padding for forms
|
||||
$form-box-shadow: // Box shadow for forms
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #b0bec5; // Border style for fieldset
|
||||
$fieldset-border-radius: 1px; // Border radius for fieldset
|
||||
@ -191,6 +201,8 @@ $button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2px; // Border radius for button elements
|
||||
$button-padding: 4px 6px; // Padding for button elements
|
||||
$button-margin: 4px; // Margin for button elements
|
||||
$button-box-shadow: // Box shadow for buttons
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$button-disabled-opacity: 0.65; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$hide-file-inputs: true; // Should a style be added that makes all
|
||||
@ -250,6 +262,8 @@ $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabl
|
||||
$table-border-style: 1px solid #bdbdbd; // Border style for <table> and children
|
||||
$table-border-radius: 2px; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: // Box shadow for <table>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$table-caption-font-size: 1.5em; // Font size for <caption>
|
||||
$table-caption-margin: 6px 0 12px; // Margin for <caption>
|
||||
$table-row-padding: 6px; // Padding for <tr> - both views
|
||||
@ -270,6 +284,8 @@ $card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: 1px solid #9e9e9e; // Border style for cards
|
||||
$card-border-radius: 2px; // Border radius for cards
|
||||
$card-margin: 2px 10px 20px; // Margin for cards
|
||||
$card-box-shadow: // Box shadow for cards
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #bdbdbd; // Border style for card sections
|
||||
$card-section-padding: 6px 8px 6px; // Padding for card sections
|
||||
@ -298,6 +314,8 @@ $card-section-padding1-padding: 12px 16px 12px; // Padding for card sect
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// Variables for tabs [1]
|
||||
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||
$tab-container-box-shadow: // Box shadow for the tabs' container
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$tab-label-back-color: #b0bec5; // Background color for tabs' labels
|
||||
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
|
||||
$tab-label-selected-back-color: #cfd8dc; // Background color for open tab's label
|
||||
@ -313,13 +331,17 @@ $tab-panel-padding: 6px; // Padding for tabs' panels
|
||||
$tab-panel-height: 400px; // Height for tabs' panels
|
||||
$tab-stacked-breakpoint: $grid-medium-breakpoint; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
// Variables for contextual background elements
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #0277bd; // Background color for <mark>
|
||||
$mark-fore-color: $back-color; // Text color for <mark>
|
||||
$mark-font-size: 95%; // Font size for <mark>
|
||||
$mark-line-height: 1; // Line height for <mark>
|
||||
$mark-padding: 1px; // Padding for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-padding: 2px 4px; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: // Box shadow for <mark>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||
$mark-variant1-back-color: #f44336; // Background color for <mark> variant 1
|
||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||
@ -337,6 +359,8 @@ $alert-border-style: 1px solid #bdbdbd; // Border style for alerts
|
||||
$alert-border-radius: 2px; // Border radius for alerts
|
||||
$alert-padding: 12px 16px; // Padding for alerts
|
||||
$alert-margin: 1px 10px; // Margin for alerts
|
||||
$alert-box-shadow: // Box shadow for alerts
|
||||
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #f5f5f5; // Background color for <progress>
|
||||
$progress-fore-color: #01579b; // Progress bar color for <progress>
|
||||
@ -344,6 +368,8 @@ $progress-height: 10px; // Height of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 1px; // Border radius for the <progress> container
|
||||
$progress-margin: 1px auto; // Margin for <progress>
|
||||
$progress-box-shadow: // Box shadow for <progress>
|
||||
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 60vw; // Width for inline <progress>
|
||||
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||
|
||||
@ -39,7 +39,9 @@ $card-normal-width: 320px !default; // Width for normal cards
|
||||
margin: $card-margin;
|
||||
}
|
||||
// Tasteful shadow
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0 0 3px 0;
|
||||
@if $card-box-shadow != 0 {
|
||||
box-shadow: $card-box-shadow;
|
||||
}
|
||||
// Card sections
|
||||
& > .#{$card-section-name} {
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -14,12 +14,21 @@ mark {
|
||||
@if $mark-line-height != $base-line-height {
|
||||
line-height: $mark-line-height;
|
||||
}
|
||||
@if $mark-border-style != 0 {
|
||||
border: $mark-border-style;
|
||||
}
|
||||
@if $mark-border-radius != 0 {
|
||||
border-radius: $mark-border-radius;
|
||||
}
|
||||
@if $mark-padding != 0 {
|
||||
padding: $mark-padding;
|
||||
}
|
||||
@if $mark-margin != 0 {
|
||||
margin: $mark-margin;
|
||||
}
|
||||
@if $mark-box-shadow != 0 {
|
||||
box-shadow: $mark-box-shadow;
|
||||
}
|
||||
}
|
||||
// Mixin for alternate mark (contextual color variants).
|
||||
// Variables:
|
||||
@ -75,6 +84,9 @@ $alert-name: 'alert' !default; // Class name for the
|
||||
@if $alert-padding != 0 {
|
||||
padding: $alert-padding;
|
||||
}
|
||||
@if $alert-box-shadow != 0 {
|
||||
box-shadow: $alert-box-shadow;
|
||||
}
|
||||
}
|
||||
// Mixin for alternate alert (alert color variants).
|
||||
// Variables:
|
||||
|
||||
@ -163,6 +163,9 @@ code {
|
||||
@if $code-element-padding != 0 {
|
||||
padding: $code-element-padding;
|
||||
}
|
||||
@if $code-element-box-shadow != 0 {
|
||||
box-shadow: $code-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
@ -189,6 +192,9 @@ pre {
|
||||
@if $add-pre-element-sidebar {
|
||||
border-left: $pre-element-sidebar-style;
|
||||
}
|
||||
@if $pre-element-box-shadow != 0 {
|
||||
box-shadow: $pre-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
@ -207,6 +213,9 @@ kbd {
|
||||
@if $kbd-element-padding != 0 {
|
||||
padding: $kbd-element-padding;
|
||||
}
|
||||
@if $kbd-element-box-shadow != 0 {
|
||||
box-shadow: $kbd-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
$style-samp-element: false !default;
|
||||
|
||||
@ -20,6 +20,9 @@ form {
|
||||
@if $form-padding != 0 {
|
||||
padding: $form-padding;
|
||||
}
|
||||
@if $form-box-shadow != 0 {
|
||||
box-shadow: $form-box-shadow;
|
||||
}
|
||||
}
|
||||
// Fieldset styling.
|
||||
fieldset {
|
||||
@ -146,6 +149,9 @@ button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name
|
||||
@if $button-margin != 0 {
|
||||
margin: $button-margin;
|
||||
}
|
||||
@if $button-box-shadow != 0 {
|
||||
box-shadow: $button-box-shadow;
|
||||
}
|
||||
@if $apply-link-underline { // Override for links if underline is enabled.
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -12,6 +12,9 @@ header {
|
||||
@if $header-padding != 0 {
|
||||
padding: $header-padding;
|
||||
}
|
||||
@if $header-box-shadow != 0 {
|
||||
box-shadow: $header-box-shadow;
|
||||
}
|
||||
// Reposnivenes for smaller displays, scrolls horizontally.
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
|
||||
@ -16,6 +16,9 @@ progress {
|
||||
@if $progress-margin != 0 {
|
||||
margin: $progress-margin;
|
||||
}
|
||||
@if $progress-box-shadow != 0 {
|
||||
box-shadow: $progress-box-shadow;
|
||||
}
|
||||
background: $progress-back-color; // Background color of the element (IE 10+ and Firefox).
|
||||
color: $progress-fore-color; // Foreground of the element (IE 10+).
|
||||
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
|
||||
|
||||
@ -16,6 +16,9 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
||||
justify-content: space-between;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
@if $tab-container-box-shadow != 0 {
|
||||
box-shadow: $tab-container-box-shadow;
|
||||
}
|
||||
// Tab label styling
|
||||
& > label {
|
||||
// Old syntax
|
||||
|
||||
@ -12,6 +12,9 @@ table {
|
||||
@if $table-margin != 0 {
|
||||
margin: $table-margin;
|
||||
}
|
||||
@if $table-box-shadow !=0 {
|
||||
box-shadow: $table-box-shadow;
|
||||
}
|
||||
}
|
||||
caption {
|
||||
font-size: $table-caption-font-size;
|
||||
@ -38,6 +41,9 @@ th:first-child, td:first-child {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
@if $table-box-shadow !=0 {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
// Accessibility (element is not visible, but screen readers read it normally)
|
||||
thead {
|
||||
@ -57,7 +63,10 @@ th:first-child, td:first-child {
|
||||
border: $table-border-style;
|
||||
@if $table-border-radius != 0 {
|
||||
border-radius: $table-border-radius;
|
||||
}
|
||||
}
|
||||
@if $table-box-shadow !=0 {
|
||||
box-shadow: $table-box-shadow;
|
||||
}
|
||||
margin-bottom: $table-mobile-card-spacing;
|
||||
}
|
||||
td {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user