Utilities and helper classes complete
This commit is contained in:
Angelos Chalaris
parent
473cbac5e2
commit
abc020aad1
|
|
@ -9,4 +9,4 @@ A minimal, responsive CSS framework to get you started.
|
|||
- **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes
|
||||
- **nav**: coming soon
|
||||
- **table**: table styles `GZIPPED SIZE`: 243 bytes
|
||||
- **helper and utility classes**: coming soon
|
||||
- **helper and utility classes**: classes for quick floats, border styling, contextual text and more `GZIPPED SIZE`: 441 bytes
|
||||
|
|
|
|||
|
|
@ -746,3 +746,174 @@ textarea {
|
|||
border-bottom: 1px solid #bdbdbd; }
|
||||
.tbl.bor td, .tbl.bor th {
|
||||
border-bottom: 1px solid #bdbdbd; }
|
||||
|
||||
/*
|
||||
Image thumbnail style mixin. [1]
|
||||
Parameters:
|
||||
- $thumb-name : The class name for the thumbnail style.
|
||||
- $thumb-padding : The padding between the image and the border.
|
||||
- $thumb-border : The style of the thumbnail's border.
|
||||
- $thumb-border-radius : The border radius of the thumbnail.
|
||||
Notes:
|
||||
- [1] : This style only applies to `img` elements with the class specified in
|
||||
`$thumb-name`.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic border style.
|
||||
Parameters:
|
||||
- $border-generic-name : The class name for the generic border.
|
||||
Notes:
|
||||
- [1] : The border style uses rgba to create a 1px solid border with 0.25
|
||||
opacity around an element, which makes it look properly bordered.
|
||||
Might be incompatible with older browsers.
|
||||
- [2] : The border style overwrites any border style as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic border radius styles.
|
||||
Parameters:
|
||||
- $border-style-name : The class name for the generic border radius style.
|
||||
- $border-style-radius : The radius for the generic border radius style.
|
||||
Notes:
|
||||
- [1] : The border style overwrites any border style as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic contextual color text styles.
|
||||
Parameters:
|
||||
- $colored-text-name : The class name for the contextual color text style.
|
||||
- $colored-text-color : The color for the contextual color text style.
|
||||
Notes:
|
||||
- [1] : The contextual color text style overwrites any text color as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic contextual background text styles.
|
||||
Parameters:
|
||||
- $colored-bg-text-name : The class name for the contextual background text style.
|
||||
- $colored-bg-text-color : The background color for the contextual background text style.
|
||||
Notes:
|
||||
- [1] : The contextual background text style overwrites any text color as it
|
||||
uses `!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for simple caret utility class.
|
||||
Parameters:
|
||||
- $caret-name : The class name for caret utility class.
|
||||
- $caret-size : The size of the caret utility element. [1]
|
||||
- $caret-color : The color of the caret utility element.
|
||||
Notes:
|
||||
- [1] : The caret is built using the border trick. Sizes can be specified
|
||||
in either `px` or `em`, but they might take a bit of tweaking to
|
||||
get right.
|
||||
*/
|
||||
/*
|
||||
Mixin for simple close sign utility class.
|
||||
Parameters:
|
||||
- $close-name : The class name for close utility class.
|
||||
- $close-color : The color of the close utility element.
|
||||
- $close-cursor : The cursor for the close utility element.
|
||||
- $close-font-size : The font-size for the close utility element.
|
||||
- $close-font-weight : The font-weight for the close utility element.
|
||||
- $close-hover-color : The color of the close utility element when hovering over it.
|
||||
*/
|
||||
/*
|
||||
Mixin for quick float classes. [1]
|
||||
Parameters:
|
||||
- $drag-left-name : The class name for left drags.
|
||||
- $drag-right-name : The class name for right drags.
|
||||
Notes:
|
||||
- [1] : These classes use `!important` to set the float properties,
|
||||
exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for center block class.
|
||||
Parameters:
|
||||
- $center-block-name : The class name for center block class.
|
||||
*/
|
||||
/*
|
||||
Mixin for clearfix class.
|
||||
Parameters:
|
||||
- $clearfix-name : The class name for the clearfix class.
|
||||
*/
|
||||
/*
|
||||
Mixin for hidden class. [1]
|
||||
Parameters:
|
||||
- $hidden-name : The class name for hidden elements.
|
||||
Notes:
|
||||
- [1] : This class uses `!important` to set the display property,
|
||||
exercise caution when using.
|
||||
*/
|
||||
img.thumb {
|
||||
padding: 0.25em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px; }
|
||||
|
||||
.bordered {
|
||||
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
|
||||
|
||||
.rounded {
|
||||
border-radius: 4px !important; }
|
||||
|
||||
.circle {
|
||||
border-radius: 50% !important; }
|
||||
|
||||
.txt-blue {
|
||||
color: #3f84b3 !important; }
|
||||
|
||||
.txt-green {
|
||||
color: #2db747 !important; }
|
||||
|
||||
.txt-red {
|
||||
color: #ea4848 !important; }
|
||||
|
||||
.bg-blue {
|
||||
background-color: #3f84b3 !important; }
|
||||
|
||||
.bg-green {
|
||||
background-color: #2db747 !important; }
|
||||
|
||||
.bg-red {
|
||||
background-color: #ea4848 !important; }
|
||||
|
||||
.caret {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.35em solid transparent;
|
||||
border-right: 0.35em solid transparent;
|
||||
border-top: 0.35em solid #222; }
|
||||
|
||||
.close {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
color: #aaa;
|
||||
font-size: 1.3em;
|
||||
font-weight: 700;
|
||||
cursor: pointer; }
|
||||
.close:before {
|
||||
content: '\00d7'; }
|
||||
.close:hover {
|
||||
color: #777; }
|
||||
|
||||
.drg-left {
|
||||
float: left !important; }
|
||||
|
||||
.drg-right {
|
||||
float: right !important; }
|
||||
|
||||
.ct-block {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
|
||||
.cf:before, .cf:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
.hidden {
|
||||
display: none !important; }
|
||||
|
|
|
|||
2
css/mini-full.min.css
vendored
2
css/mini-full.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -16,4 +16,22 @@
|
|||
@include make-frm(frm, 1px solid #ccc, 4px, 0.2em, 0.3em, #2678b3, #e9322d, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, ctrl-group, 0 0 0.3em 0, inline, aligned,15em);
|
||||
@import 'mini/table';
|
||||
// Use table mixin to create table with default specs.
|
||||
@include make-tbl(tbl, 1px solid #bdbdbd, 0, 0.5em, #d9d9d9, #111, #f5f5f5, #ececec, #111, hor, bor);
|
||||
@include make-tbl(tbl, 1px solid #bdbdbd, 0, 0.5em, #d9d9d9, #111, #f5f5f5, #ececec, #111, hor, bor);
|
||||
@import 'mini/utility';
|
||||
// Use utility mixins to create utility classes with default specs.
|
||||
@include make-thumb(thumb, 0.25em, 1px solid #ccc, 4px);
|
||||
@include make-border-generic(bordered);
|
||||
@include make-border-radial-style(rounded, 4px);
|
||||
@include make-border-radial-style(circle, 50%);
|
||||
@include make-colored-text(txt-blue, $btn-b-bg-color);
|
||||
@include make-colored-text(txt-green, $btn-g-bg-color);
|
||||
@include make-colored-text(txt-red, $btn-r-bg-color);
|
||||
@include make-colored-bg-text(bg-blue, $btn-b-bg-color);
|
||||
@include make-colored-bg-text(bg-green, $btn-g-bg-color);
|
||||
@include make-colored-bg-text(bg-red, $btn-r-bg-color);
|
||||
@include make-caret-down(caret, 0.35em, #222);
|
||||
@include make-close(close, #aaa, pointer, 1.3em, 700, #777);
|
||||
@include make-drags(drg-left, drg-right);
|
||||
@include make-center-block(ct-block);
|
||||
@include make-clearfix(cf);
|
||||
@include make-hidden(hidden);
|
||||
182
scss/mini/_utility.scss
Normal file
182
scss/mini/_utility.scss
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
/*
|
||||
Image thumbnail style mixin. [1]
|
||||
Parameters:
|
||||
- $thumb-name : The class name for the thumbnail style.
|
||||
- $thumb-padding : The padding between the image and the border.
|
||||
- $thumb-border : The style of the thumbnail's border.
|
||||
- $thumb-border-radius : The border radius of the thumbnail.
|
||||
Notes:
|
||||
- [1] : This style only applies to `img` elements with the class specified in
|
||||
`$thumb-name`.
|
||||
*/
|
||||
@mixin make-thumb($thumb-name, $thumb-padding, $thumb-border, $thumb-border-radius){
|
||||
img.#{$thumb-name}{
|
||||
padding: $thumb-padding;
|
||||
border: $thumb-border;
|
||||
border-radius: $thumb-border-radius;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for generic border style.
|
||||
Parameters:
|
||||
- $border-generic-name : The class name for the generic border.
|
||||
Notes:
|
||||
- [1] : The border style uses rgba to create a 1px solid border with 0.25
|
||||
opacity around an element, which makes it look properly bordered.
|
||||
Might be incompatible with older browsers.
|
||||
- [2] : The border style overwrites any border style as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
@mixin make-border-generic($border-generic-name){
|
||||
.#{$border-generic-name}{
|
||||
border: 1px solid rgba(0,0,0, 0.25) !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for generic border radius styles.
|
||||
Parameters:
|
||||
- $border-style-name : The class name for the generic border radius style.
|
||||
- $border-style-radius : The radius for the generic border radius style.
|
||||
Notes:
|
||||
- [1] : The border style overwrites any border style as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
@mixin make-border-radial-style($border-style-name, $border-style-radius){
|
||||
.#{$border-style-name}{
|
||||
border-radius: $border-style-radius !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for generic contextual color text styles.
|
||||
Parameters:
|
||||
- $colored-text-name : The class name for the contextual color text style.
|
||||
- $colored-text-color : The color for the contextual color text style.
|
||||
Notes:
|
||||
- [1] : The contextual color text style overwrites any text color as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
@mixin make-colored-text($colored-text-name, $colored-text-color){
|
||||
.#{$colored-text-name}{
|
||||
color: $colored-text-color !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for generic contextual background text styles.
|
||||
Parameters:
|
||||
- $colored-bg-text-name : The class name for the contextual background text style.
|
||||
- $colored-bg-text-color : The background color for the contextual background text style.
|
||||
Notes:
|
||||
- [1] : The contextual background text style overwrites any text color as it
|
||||
uses `!important`, exercise caution when using.
|
||||
*/
|
||||
@mixin make-colored-bg-text($colored-bg-text-name, $colored-bg-text-color){
|
||||
.#{$colored-bg-text-name}{
|
||||
background-color: $colored-bg-text-color !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for simple caret utility class.
|
||||
Parameters:
|
||||
- $caret-name : The class name for caret utility class.
|
||||
- $caret-size : The size of the caret utility element. [1]
|
||||
- $caret-color : The color of the caret utility element.
|
||||
Notes:
|
||||
- [1] : The caret is built using the border trick. Sizes can be specified
|
||||
in either `px` or `em`, but they might take a bit of tweaking to
|
||||
get right.
|
||||
*/
|
||||
@mixin make-caret-down($caret-name, $caret-size, $caret-color){
|
||||
.#{$caret-name} {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: $caret-size solid transparent;
|
||||
border-right: $caret-size solid transparent;
|
||||
border-top: $caret-size solid $caret-color;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for simple close sign utility class.
|
||||
Parameters:
|
||||
- $close-name : The class name for close utility class.
|
||||
- $close-color : The color of the close utility element.
|
||||
- $close-cursor : The cursor for the close utility element.
|
||||
- $close-font-size : The font-size for the close utility element.
|
||||
- $close-font-weight : The font-weight for the close utility element.
|
||||
- $close-hover-color : The color of the close utility element when hovering over it.
|
||||
*/
|
||||
@mixin make-close($close-name, $close-color, $close-cursor, $close-font-size, $close-font-weight, $close-hover-color){
|
||||
.#{$close-name}{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
font-size: $close-font-size;
|
||||
font-weight: $close-font-weight;
|
||||
cursor: $close-cursor;
|
||||
&:before {
|
||||
content: '\00d7';
|
||||
}
|
||||
&:hover{
|
||||
color: $close-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for quick float classes. [1]
|
||||
Parameters:
|
||||
- $drag-left-name : The class name for left drags.
|
||||
- $drag-right-name : The class name for right drags.
|
||||
Notes:
|
||||
- [1] : These classes use `!important` to set the float properties,
|
||||
exercise caution when using.
|
||||
*/
|
||||
@mixin make-drags($drag-left-name, $drag-right-name){
|
||||
.#{$drag-left-name} {
|
||||
float: left !important;
|
||||
}
|
||||
.#{$drag-right-name} {
|
||||
float: right !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for center block class.
|
||||
Parameters:
|
||||
- $center-block-name : The class name for center block class.
|
||||
*/
|
||||
@mixin make-center-block($center-block-name){
|
||||
.#{$center-block-name} {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for clearfix class.
|
||||
Parameters:
|
||||
- $clearfix-name : The class name for the clearfix class.
|
||||
*/
|
||||
@mixin make-clearfix($clearfix-name){
|
||||
.#{$clearfix-name} {
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for hidden class. [1]
|
||||
Parameters:
|
||||
- $hidden-name : The class name for hidden elements.
|
||||
Notes:
|
||||
- [1] : This class uses `!important` to set the display property,
|
||||
exercise caution when using.
|
||||
*/
|
||||
@mixin make-hidden($hidden-name){
|
||||
.#{$hidden-name}{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<h2>Heading 2 <small>smaller</small></h2><br>
|
||||
<p><strong>Paragraph</strong>: Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipiscing elit. <code>Praesent est mi</code>, commodo vitae mauris at, sagittis vehicula sem. Quisque malesuada dui at justo maximus, vel placerat nibh blandit. Phasellus <sub>quis</sub> ipsum aliquam, <sup>fringilla</sup> ante <kbd>sit</kbd> amet, sagittis magna. In at dignissim eros, id vulputate tellus. Quisque orci urna, pretium in porttitor et, rhoncus in nulla. Aenean viverra ante in velit tincidunt, <kbd>sit</kbd> amet tincidunt ante suscipit. In malesuada consectetur molestie.</p>
|
||||
<br>
|
||||
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
|
||||
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTZiYmE2OTM4NyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1NmJiYTY5Mzg3Ij48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" class="circle">
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
|
|
@ -50,16 +50,16 @@ Suspendisse varius turpis et dui viverra semper.</pre>
|
|||
<textarea rows="4" cols="16">This is a textarea.</textarea>
|
||||
<h6>Heading 6 <small>smaller</small></h6>
|
||||
<ul>
|
||||
<li>Suspendisse convallis ac metus non efficitur.</li>
|
||||
<li>Suspendisse convallis ac metus non efficitur.<span class="caret"></span></li>
|
||||
<li>Donec consectetur eu nisi luctus bibendum.</li>
|
||||
<li>Nam tempor facilisis sem vitae mattis.</li>
|
||||
<li>Fusce feugiat rhoncus eros, id auctor mauris facilisis quis.</li>
|
||||
</ul>
|
||||
<br>
|
||||
<div>Etiam maximus, ante vitae porttitor tincidunt, sem erat pharetra turpis, a ornare tortor purus <a href="https://www.google.com" class="btn lg">ut justo</a>.
|
||||
<div>Etiam maximus, <span class="txt-blue">ante vitae porttitor tincidunt, sem erat</span> pharetra turpis, a ornare tortor purus <a href="https://www.google.com" class="btn lg bordered">ut justo</a>.
|
||||
</div>
|
||||
<br>
|
||||
<h3>TODO: Add helper class for bordered that uses 1px solid rgba(0,0,0,0.25) to add a border to elements easily</h3>
|
||||
<h3>TODO: Add helper class for <span class="bg-red">bordered that uses 1px solid</span> rgba(0,0,0,0.25) to add a border to elements easily</h3>
|
||||
<table class="tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -94,7 +94,7 @@ Suspendisse varius turpis et dui viverra semper.</pre>
|
|||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<button type="button" class="green sm btn">Sample button</button>
|
||||
<button type="button bordered" class="green lg btn">Sample button</button>
|
||||
<blockquote cite="https://www.google.com">Nam non diam ante. Curabitur non enim vitae eros luctus porta.</blockquote>
|
||||
<div class="grid-container"><div class="row"><div class="col xs-4 sm-6" style="background: red;">1c</div><div class="col xs-8 sm-6" style="background: blue;">2c</div></div><div class="row"><div class="col xs-1 sm-no md-no lg-no" style="background: purple;"></div><div class="col xs-10 sm-12" style="background: yellow;">3c</div></div></div>
|
||||
<br><br>
|
||||
|
|
|
|||
Loading…
Reference in a new issue