mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-04 12:57:23 +02:00
Updated fixes provided by wad3g
Also started updating codebase to spaces from tabs. Shouldn't be long until it's all ready and clean.
This commit is contained in:
Angelos Chalaris
24
dist/mini-dark.css
vendored
24
dist/mini-dark.css
vendored
@@ -3,7 +3,7 @@
|
||||
Flavor name: Dark (mini-dark)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.0
|
||||
mini.css version: v2.3.1
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
@@ -731,8 +731,8 @@ label {
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
-webkit-flex-basis: 0px;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
@@ -764,8 +764,8 @@ label {
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
-webkit-flex-basis: 0px;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
|
||||
@@ -812,6 +812,20 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
|
||||
border-color: #20292e;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-right: 1.5rem;
|
||||
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23d0d0d0" d="M.25.75h.5L.5 1"/></svg>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%2339444a"/>');
|
||||
background-position: right, left;
|
||||
background-repeat: no-repeat, repeat;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select[readonly] {
|
||||
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23d0d0d0" d="M.25.75h.5L.5 1"/></svg>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23263238"/>');
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: #757575;
|
||||
|
||||
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
24
dist/mini-default.css
vendored
24
dist/mini-default.css
vendored
@@ -3,7 +3,7 @@
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.0
|
||||
mini.css version: v2.3.1
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
@@ -730,8 +730,8 @@ label {
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
-webkit-flex-basis: 0px;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
@@ -763,8 +763,8 @@ label {
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
-webkit-flex-basis: 0px;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
|
||||
@@ -811,6 +811,20 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
|
||||
border-color: #c9c9c9;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-right: 1.5rem;
|
||||
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23212121" d="M.25.75h.5L.5 1"/></svg>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23fafafa"/>');
|
||||
background-position: right, left;
|
||||
background-repeat: no-repeat, repeat;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select[readonly] {
|
||||
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23212121" d="M.25.75h.5L.5 1"/></svg>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23e5e5e5"/>');
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: #616161;
|
||||
|
||||
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
16
dist/mini-lite.css
vendored
16
dist/mini-lite.css
vendored
@@ -3,7 +3,7 @@
|
||||
Flavor name: Lite (mini-lite)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.0
|
||||
mini.css version: v2.3.1
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
@@ -756,6 +756,20 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
|
||||
border-color: #c9c9c9;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-right: 1.5rem;
|
||||
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23212121" d="M.25.75h.5L.5 1"/></svg>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23fafafa"/>');
|
||||
background-position: right, left;
|
||||
background-repeat: no-repeat, repeat;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select[readonly] {
|
||||
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23212121" d="M.25.75h.5L.5 1"/></svg>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23e5e5e5"/>');
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: #616161;
|
||||
|
||||
2
dist/mini-lite.min.css
vendored
2
dist/mini-lite.min.css
vendored
File diff suppressed because one or more lines are too long
24
dist/mini-nord.css
vendored
24
dist/mini-nord.css
vendored
@@ -3,7 +3,7 @@
|
||||
Flavor name: Nord (mini-nord)
|
||||
Author: tphecca (https://github.com/tphecca)
|
||||
Maintainers: tphecca
|
||||
mini.css version: v2.3.0
|
||||
mini.css version: v2.3.1
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
@@ -734,8 +734,8 @@ label {
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
-webkit-flex-basis: 0px;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
@@ -767,8 +767,8 @@ label {
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
-webkit-flex-basis: 0px;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
|
||||
@@ -820,6 +820,20 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
|
||||
border-color: #bdbdbd;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-right: 20px;
|
||||
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%232E3440" d="M.25.75h.5L.5 1"/></svg>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23E5E9F0"/>');
|
||||
background-position: right, left;
|
||||
background-repeat: no-repeat, repeat;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select[readonly] {
|
||||
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%232E3440" d="M.25.75h.5L.5 1"/></svg>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23e0e0e0"/>');
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: #616161;
|
||||
|
||||
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
24
dist/mini-sucroa.css
vendored
24
dist/mini-sucroa.css
vendored
@@ -3,7 +3,7 @@
|
||||
Flavor name: Sucroa (mini-sucroa)
|
||||
Author: Angeliki Daskalakis
|
||||
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.3.0
|
||||
mini.css version: v2.3.1
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
|
||||
/*
|
||||
@@ -738,8 +738,8 @@ label {
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
-webkit-flex-basis: 0px;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
@@ -771,8 +771,8 @@ label {
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
-webkit-flex-basis: 0px;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
|
||||
@@ -824,6 +824,20 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
|
||||
border-color: #a9a2ba;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-right: 20px;
|
||||
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23211423" d="M.25.75h.5L.5 1"/></svg>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23f2edff"/>');
|
||||
background-position: right, left;
|
||||
background-repeat: no-repeat, repeat;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select[readonly] {
|
||||
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23211423" d="M.25.75h.5L.5 1"/></svg>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23eae1ff"/>');
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: #493e4b;
|
||||
|
||||
2
dist/mini-sucroa.min.css
vendored
2
dist/mini-sucroa.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -1255,3 +1255,13 @@
|
||||
- Altered `$label-padding` from `0.25rem` to `0.25rem 0.5rem` to make it align properly with everything else.
|
||||
- Added code for `.vertical` `.input-group`, documented it, updated flavors. Everything is ready, size is `6.70KB`, which is pretty good I might add.
|
||||
- Updated `CHANGELOG` and doc pages (new tag etc.), released **v2.3.0**.
|
||||
|
||||
|
||||
# v2.3.1 Development Log
|
||||
|
||||
## 20170619
|
||||
|
||||
- Merged two PRs resolving two issues that have been reported.
|
||||
- Added a lot of code in `input_control` module, some exotic functions included. Also added `$select-padding-right` to help solve an issue and update changes.
|
||||
- Used `svg` tricks to resolve the `select` issue, file size is now `6.90KB` gzipped, which is just below the maximum limit of the framework.
|
||||
- Updated flavor files and source code to use spaces instead of tabs. Should now look better on Github.
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
Flavor name: Dark (mini-dark)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.0
|
||||
mini.css version: v2.3.1
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #d0d0d0; // Text and general foreground color
|
||||
@@ -184,6 +184,7 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #263238; // Background color for readonly input
|
||||
$input-readonly-border-color: #20292e; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#757575; // Text color for input placeholder
|
||||
$select-padding-right: 1.5rem; // Right padding for select element
|
||||
$button-back-color: #39444a; // Back color for button elements
|
||||
$button-back-opacity: 0.75; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.0
|
||||
mini.css version: v2.3.1
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
@@ -184,6 +184,7 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e5e5e5; // Background color for readonly input
|
||||
$input-readonly-border-color: #c9c9c9; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#616161; // Text color for input placeholder
|
||||
$select-padding-right: 1.5rem; // Right padding for select element
|
||||
$button-back-color: #dcdcdc; // Back color for button elements
|
||||
$button-back-opacity: 0.75; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
Flavor name: Lite (mini-lite)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.0
|
||||
mini.css version: v2.3.1
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
@@ -172,6 +172,7 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e5e5e5; // Background color for readonly input
|
||||
$input-readonly-border-color: #c9c9c9; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#616161; // Text color for input placeholder
|
||||
$select-padding-right: 1.5rem; // Right padding for select element
|
||||
$button-back-color: #dcdcdc; // Back color for button elements
|
||||
$button-back-opacity: 0.75; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
Flavor name: Nord (mini-nord)
|
||||
Author: tphecca (https://github.com/tphecca)
|
||||
Maintainers: tphecca
|
||||
mini.css version: v2.3.0
|
||||
mini.css version: v2.3.1
|
||||
*/
|
||||
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
|
||||
// Basic rules for body and typography
|
||||
@@ -133,7 +133,7 @@ $include-parent-layout: true !default; // Should the classes for rows def
|
||||
$grid-container-name: 'container'; // Class name for the grid container
|
||||
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
|
||||
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||
$grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2]
|
||||
$grid-row-parent-layout-prefix:'cols'; // Class name prefix for the grid's row parents [2]
|
||||
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
|
||||
@@ -188,6 +188,7 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
|
||||
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
|
||||
$input-placeholder-fore-color: #616161; // Text color for input placeholder
|
||||
$select-padding-right: 20px; // Right padding for select element
|
||||
$button-back-color: #D8DEE9; // Back color for button elements
|
||||
$button-back-opacity: 0.65; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 0.8; // Background opacity for button elements on hover or focus
|
||||
@@ -402,13 +403,13 @@ $card-style1-back-color: #EBCB8B; // Background color for card style 1
|
||||
$card-style1-fore-color: $fore-color; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #D08770; // Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style:1px solid #D08770;// Border style for card style 1 sections
|
||||
$card-style1-section-border-style:1px solid #D08770; // Border style for card style 1 sections
|
||||
$card-style2-name: 'error'; // Class name for card style 2
|
||||
$card-style2-back-color: #BF616A; // Background color for card style 2
|
||||
$card-style2-fore-color: #ECEFF4; // Text color for card style 2
|
||||
$card-style2-border-style: 1px solid #BF616A; // Border style for card style 2
|
||||
$card-style2-border-radius: 0; // Border radius for card style 2
|
||||
$card-style2-section-border-style:1px solid #BF616A;// Border style for card style 2 sections
|
||||
$card-style2-section-border-style:1px solid #BF616A; // Border style for card style 2 sections
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color:#ECEFF4; // Background color for card section style 1
|
||||
$card-section-style1-fore-color:$fore-color; // Text color for card section style 1
|
||||
@@ -579,7 +580,7 @@ $responsive-padding-small-value:2px 4px; // Padding value for responsive pad
|
||||
$responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
|
||||
$responsive-padding-large-value:6px 8px; // Padding value for responsive padding on large screens
|
||||
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
|
||||
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
|
||||
$responsive-visually-hidden-prefix: 'visually-hidden';// Class name prefix for responsive visually hidden elements
|
||||
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
|
||||
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
|
||||
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
Flavor name: Sucroa (mini-sucroa)
|
||||
Author: Angeliki Daskalakis
|
||||
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.3.0
|
||||
mini.css version: v2.3.1
|
||||
*/
|
||||
// Google Fonts imports and usage
|
||||
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');
|
||||
@@ -49,7 +49,7 @@ $blockquote-margin: 10px; // Margin for <blockquote>
|
||||
$blockquote-padding: 8px 12px 28px; // Padding for <blockquote>
|
||||
$blockquote-sidebar-style: 3px solid #331e36; // Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.85em; // Font size for citation of <blockquote>
|
||||
$blockquote-cite-fore-color:#5d545f; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-fore-color: #5d545f; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-left-position: 10px; // Left padding for citation of <blockquote>
|
||||
$blockquote-cite-bottom-position: 4px; // Bottom padding for citation of <blockquote>
|
||||
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||
@@ -62,7 +62,7 @@ $code-element-padding: 3px 4px; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #e8deff; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius:2px; // Border radius 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: 8px 12px 8px; // Padding for <pre>
|
||||
@@ -187,6 +187,7 @@ $input-disabled-opacity: 0.8; // Opacity for disabled input
|
||||
$input-readonly-back-color: #eae1ff; // Background color for readonly input
|
||||
$input-readonly-border-color: #a9a2ba; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#493e4b; // Text color for input placeholder
|
||||
$select-padding-right: 20px; // Right padding for select element
|
||||
$button-back-color: #d3cae8; // Back color for button elements
|
||||
$button-back-opacity: 1; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 0.75; // Background opacity for button elements on hover or focus
|
||||
@@ -377,20 +378,20 @@ $card-style1-back-color: #fe9992; // Background color for card style 1
|
||||
$card-style1-fore-color: $fore-color; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #fedb64; // Border style for card style 1
|
||||
$card-style1-border-radius: 2px; // Border radius for card style 1
|
||||
$card-style1-section-border-style:1px solid #fedb64;// Border style for card style 1 sections
|
||||
$card-style1-section-border-style:1px solid #fedb64; // Border style for card style 1 sections
|
||||
$card-style2-name: 'error'; // Class name for card style 2
|
||||
$card-style2-back-color: #ac354e; // Background color for card style 2
|
||||
$card-style2-fore-color: #fffddc; // Text color for card style 2
|
||||
$card-style2-border-style: 1px solid #86293d; // Border style for card style 2
|
||||
$card-style2-border-radius: 2px; // Border radius for card style 2
|
||||
$card-style2-section-border-style:1px solid #86293d;// Border style for card style 2 sections
|
||||
$card-style2-section-border-style:1px solid #86293d; // Border style for card style 2 sections
|
||||
$card-section-style1-name: 'light'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #f6e5e6; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
|
||||
$card-section-style2-name: 'lighter'; // Class name for card section style 2
|
||||
$card-section-style2-back-color: #fbf4f4; // Background color for card section style 2
|
||||
$card-section-style2-fore-color: $fore-color; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded';// Class name for card section padding style 1
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 12px 14px; // Padding for card section padding style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
@@ -450,11 +451,11 @@ $toast-padding: 12px 24px; // Padding for toasts
|
||||
$toast-box-shadow: none; // Box shadow for toasts
|
||||
$toast-style1-name: 'small'; // Class name for toast style 1
|
||||
$toast-style1-border-style: 0; // Border style for toast style 1
|
||||
$toast-style1-border-radius:24px; // Border radius for toast style 1
|
||||
$toast-style1-border-radius: 24px; // Border radius for toast style 1
|
||||
$toast-style1-padding: 8px 16px; // Padding for toast style 1
|
||||
$toast-style2-name: 'large'; // Class name for toast style 2
|
||||
$toast-style2-border-style: 0; // Border style for toast style 2
|
||||
$toast-style2-border-radius:48px; // Border radius for toast style 2
|
||||
$toast-style2-border-radius: 48px; // Border radius for toast style 2
|
||||
$toast-style2-padding: 18px 36px; // Padding for toast style 2
|
||||
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
|
||||
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
||||
@@ -480,8 +481,8 @@ $progress-height: 16px; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 2px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin:2px; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin:10px; // Left and right margin for <progress>
|
||||
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 10px; // Left and right 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>
|
||||
|
||||
@@ -28,6 +28,37 @@ $fore-color: black !default; // [External variable - core] Foreground
|
||||
// Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default.
|
||||
$apply-link-underline: true !default; // [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
|
||||
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
|
||||
// Necessary functions for certain elements (select)
|
||||
/// Courtesy of: https://css-tricks.com/snippets/sass/str-replace-function/
|
||||
/// -----------------------------------------------------------------------
|
||||
/// Replace `$search` with `$replace` in `$string`
|
||||
/// @author Hugo Giraudel
|
||||
/// @param {String} $string - Initial string
|
||||
/// @param {String} $search - Substring to replace
|
||||
/// @param {String} $replace ('') - New value
|
||||
/// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
@return $string;
|
||||
}
|
||||
// Generate the arrow for the select element
|
||||
@function selectArrow() {
|
||||
$_input_fore_color: str-replace(#{$input-fore-color}, '#', '%23'); // Make sure it's all encoded properly
|
||||
@return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="'+$_input_fore_color+'" d="M.25.75h.5L.5 1"/></svg>';
|
||||
}
|
||||
// Generate the rest of the background for the select element
|
||||
@function selectBackground() {
|
||||
$_input_back_color: str-replace(#{$input-back-color}, '#', '%23'); // Make sure it's all encoded properly
|
||||
@return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:'+$_input-back-color+'"/>';
|
||||
}
|
||||
// Generate the rest of the background for the select element when readonly
|
||||
@function selectReadonlyBackground() {
|
||||
$_input-readonly-back-color: str-replace(#{$input-readonly-back-color}, '#', '%23'); // Make sure it's all encoded properly
|
||||
@return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:'+$_input-readonly-back-color+'"/>';
|
||||
}
|
||||
// Check the `_input_control_mixins.scss` file to find this module's mixins.
|
||||
@import 'input_control_mixins';
|
||||
// Base form styling.
|
||||
@@ -166,13 +197,6 @@ legend {
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
// Correct background styling in Safari
|
||||
select {
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
@@ -241,6 +265,19 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
||||
}
|
||||
}
|
||||
}
|
||||
// Correct background styling in Safari
|
||||
select {
|
||||
padding-right: $select-padding-right;
|
||||
background-image: url(selectArrow()), url(selectBackground());
|
||||
background-position: right, left;
|
||||
background-repeat: no-repeat, repeat;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
&[readonly]{
|
||||
background-image: url(selectArrow()), url(selectReadonlyBackground());
|
||||
}
|
||||
}
|
||||
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
|
||||
Reference in New Issue
Block a user