mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-04-13 08:51:52 +02:00
Breadcrumbs, utilities and button groups updates
This commit is contained in:
Angelos Chalaris
parent
eb671c361f
commit
692f3c00ff
125
dist/mini-default.css
vendored
125
dist/mini-default.css
vendored
@ -657,7 +657,9 @@ input[type="file"] {
|
||||
.button-group {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex; }
|
||||
display: flex;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px; }
|
||||
.button-group button, .button-group [type="button"], .button-group [type="submit"], .button-group [type="reset"], .button-group a.button, .button-group label.button, .button-group .button {
|
||||
margin: 0;
|
||||
-webkit-box-flex: 1;
|
||||
@ -667,28 +669,19 @@ input[type="file"] {
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
text-align: center;
|
||||
border: 1px solid #bdbdbd;
|
||||
border: 0;
|
||||
border-radius: 0; }
|
||||
.button-group button:first-child, .button-group [type="button"]:first-child, .button-group [type="submit"]:first-child, .button-group [type="reset"]:first-child, .button-group a.button:first-child, .button-group label.button:first-child, .button-group .button:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px; }
|
||||
.button-group button:last-child, .button-group [type="button"]:last-child, .button-group [type="submit"]:last-child, .button-group [type="reset"]:last-child, .button-group a.button:last-child, .button-group label.button:last-child, .button-group .button:last-child {
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button {
|
||||
border-left: 1px solid #bdbdbd; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.button-group {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column; }
|
||||
.button-group button:first-child, .button-group [type="button"]:first-child, .button-group [type="submit"]:first-child, .button-group [type="reset"]:first-child, .button-group a.button:first-child, .button-group label.button:first-child, .button-group .button:first-child {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.button-group button:last-child, .button-group [type="button"]:last-child, .button-group [type="submit"]:last-child, .button-group [type="reset"]:last-child, .button-group a.button:last-child, .button-group label.button:last-child, .button-group .button:last-child {
|
||||
border-radius: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; } }
|
||||
.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd; } }
|
||||
[type="checkbox"], [type="radio"] {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
@ -1045,6 +1038,73 @@ progress {
|
||||
height: 20px;
|
||||
animation: spinner-donut-anim 1.2s linear infinite; }
|
||||
|
||||
.hidden {
|
||||
display: none !important; }
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip-path: inset(100%);
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden !important; }
|
||||
|
||||
ul.breadcrumbs {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); }
|
||||
ul.breadcrumbs li {
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background: #e0e0e0;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin-right: 18px; }
|
||||
ul.breadcrumbs li:before, ul.breadcrumbs li:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0 solid #e0e0e0;
|
||||
border-width: 16px 8px; }
|
||||
ul.breadcrumbs li:before {
|
||||
left: -16px;
|
||||
border-left-color: transparent; }
|
||||
ul.breadcrumbs li:after {
|
||||
left: 100%;
|
||||
border-color: transparent;
|
||||
border-left-color: #e0e0e0; }
|
||||
ul.breadcrumbs li:first-child:before {
|
||||
border: 0; }
|
||||
ul.breadcrumbs li:last-child {
|
||||
margin-right: 0; }
|
||||
ul.breadcrumbs li:last-child:after {
|
||||
border: 0; }
|
||||
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
.center-block {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
|
||||
button.primary, [type="button"].primary, [type="submit"].primary,
|
||||
[type="reset"].primary, .button.primary {
|
||||
background: #1565c0;
|
||||
@ -1186,41 +1246,8 @@ progress.nano {
|
||||
.circular {
|
||||
border-radius: 50% !important; }
|
||||
|
||||
.hidden {
|
||||
display: none !important; }
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip-path: inset(100%);
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden !important; }
|
||||
|
||||
.float-left {
|
||||
float: left !important; }
|
||||
|
||||
.float-right {
|
||||
float: right !important; }
|
||||
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
.center-block {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
|
||||
ul.breadcrumbs {
|
||||
list-style: none; }
|
||||
ul.breadcrumbs > li {
|
||||
display: inline-block;
|
||||
padding-right: 0.125em; }
|
||||
ul.breadcrumbs > li + li:before {
|
||||
content: '\27e9';
|
||||
padding: 0.125em; }
|
||||
|
||||
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
@ -407,4 +407,10 @@
|
||||
- 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.
|
||||
- Added flexbox-based `button-group` system. Added responsiveness to it and optimized accordingly.
|
||||
- Deployed live demo with new features.
|
||||
- Deployed live demo with new features.
|
||||
|
||||
## 20161111
|
||||
|
||||
- Rebuilt `breadcrumbs` from scratch. Uses flexbox.
|
||||
- Changed `clearfix`, `center-block`, `hidden` and `visually-hidden` from mixins to normal components.
|
||||
- Changed the appearance of `button-group`, it will now use `border` and `border-radius` more creatively to get rid of unnecessary and excessive styling.
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<!-- Live demo styled as of 20161109 -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/4c473fa3216f1da2d0c140c9274a506de6e2ecd5/dist/mini-default.min.css">
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/4c473fa3216f1da2d0c140c9274a506de6e2ecd5/dist/mini-default.min.css"> -->
|
||||
<link rel="stylesheet" href="../../dist/mini-default.min.css">
|
||||
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8">
|
||||
@ -402,7 +402,7 @@
|
||||
<h2>Utilities and Helpers <small>Useful classes for common problems</small></h2>
|
||||
<p>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Some of them are showcased below:</p>
|
||||
<p><span class="bordered">Generic border (using black outline and opacity of 0.25)</span>, <span class="bordered rounded">Radial border style 1</span> & <span class="bordered circular"> 2 </span>.</p>
|
||||
<ul class="breadcrumbs"><li><a href="#">These</a></li><li><a href="#">are</a></li><li><a href="#">breadcrumbs</a></li></ul>
|
||||
<ul class="breadcrumbs"><li><a href="#">These</a></li><li><a href="#">is</a></li><li><a href="#">what</a></li><li><a href="#">breadcrumbs</a></li><li><a href="#">look</a></li><li><span>like</span></li></ul>
|
||||
<p>You can also use the <code>.hidden</code> class to hide any element you want or the <code>.visually-hidden</code> class for elements that need to be invisible to users but exist in the accessibility tree, set <code>float</code>s to left or right using the <code>.float-left</code> and <code>.float-right</code> classes or clear <code>float</code>s using the <code>.clearfix</code> class, which implements the <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> by Nicolas Gallagher. Finally, use the <code>.center-block</code> class to make an element center and display as a block.</p><br>
|
||||
<h2>Cards <small>Modern content containers</small></h2>
|
||||
<p>Cards are some of the most modern and stylish content containers and are widely used in many website types. <strong>mini.css</strong> provides you with the <code>.card</code> class, along with a handful of pre-built styles to help you create beatiful cards for your pages. Note that this module is heavily dependent on the grid system module. To use the cards, simply replace the grid's columns with your cards and you're ready to go. Note that in the examples below, we try to showcase as many features as possible, but there might be something we missed. Also, the <code>.row</code> which acts as the contaienr for the cards has the <code>.cards</code> class applied to it, which helps align the cards horizontally, by automatically shrinking or expanding the spaces between them.</p>
|
||||
|
||||
@ -400,17 +400,25 @@ $spinner-donut-variant2-back-color: // Background color for donut spi
|
||||
$spinner-donut-variant2-fore-color: // Foreground color for donut spinner variant 2
|
||||
#2e7d32;
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$breadcrumbs-back-color: #e0e0e0; // Background color for breadcrumbs
|
||||
$breadcrumbs-height: 32px; // Height of the breadcrumbs
|
||||
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
|
||||
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
|
||||
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
|
||||
$breadcrumbs-box-shadow: // Box shadow for breadcrumbs
|
||||
0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.15);
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
|
||||
$float-prefix: 'float'; // Prefix for float classes
|
||||
$clearfix-name: 'clearfix'; // Class name for clearfix
|
||||
$center-block-name: 'center-block'; // Class name for center block
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
// Notes:
|
||||
// [1] - The tabs module is somewhat dependent on the grid system module.
|
||||
// Enable mini.css
|
||||
@ -463,9 +471,4 @@ $breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
@include make-border-generic ($border-generic-name);
|
||||
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
||||
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
||||
@include make-hidden ($hidden-name);
|
||||
@include make-visually-hidden ($visually-hidden-name);
|
||||
@include make-floats ($float-prefix);
|
||||
@include make-clearfix ($clearfix-name);
|
||||
@include make-center-block ($center-block-name);
|
||||
@include make-breadcrumbs ($breadcrumbs-name);
|
||||
@include make-floats ($float-prefix);
|
||||
@ -197,6 +197,10 @@ $hide-file-inputs: true !default;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
border: $button-group-border-style;
|
||||
@if $button-border-radius != 0 {
|
||||
border-radius: $button-border-radius;
|
||||
}
|
||||
button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
|
||||
margin: 0;
|
||||
// Old syntax
|
||||
@ -208,21 +212,18 @@ $hide-file-inputs: true !default;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
text-align: center;
|
||||
border: $button-group-border-style;
|
||||
border: 0;
|
||||
@if $button-border-radius != 0 {
|
||||
border-radius: 0;
|
||||
&:first-child {
|
||||
border-top-left-radius: $button-border-radius;
|
||||
border-bottom-left-radius: $button-border-radius;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: $button-border-radius;
|
||||
border-bottom-right-radius: $button-border-radius;
|
||||
}
|
||||
@if $button-group-border-style !=0 {
|
||||
+ button, + [type="button"], + [type="submit"], + [type="reset"], + a.#{$button-class-name}, + label.#{$button-class-name}, + .#{$button-class-name} {
|
||||
border-left: $button-group-border-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Responsiveness for
|
||||
// Responsiveness for button groups
|
||||
@media (max-width: #{$button-group-mobile-breakpoint}) {
|
||||
.#{$button-group-name} {
|
||||
// Old syntax
|
||||
@ -230,23 +231,16 @@ $hide-file-inputs: true !default;
|
||||
// New syntax
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
@if $button-border-radius != 0 {
|
||||
@if $button-group-border-style !=0 {
|
||||
button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
|
||||
&:first-child {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $button-border-radius;
|
||||
border-top-right-radius: $button-border-radius;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0;
|
||||
border-bottom-left-radius: $button-border-radius;
|
||||
border-bottom-right-radius: $button-border-radius;
|
||||
+ button, + [type="button"], + [type="submit"], + [type="reset"], + a.#{$button-class-name}, + label.#{$button-class-name}, + .#{$button-class-name} {
|
||||
border: 0;
|
||||
border-top: $button-group-border-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for alternate buttons (button color variants).
|
||||
// Variables:
|
||||
// - $button-alt-name : The name of the class used for the alternate button.
|
||||
@ -271,7 +265,7 @@ $hide-file-inputs: true !default;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate button styles (button color variants).
|
||||
// Mixin for alternate button styles (button style variants).
|
||||
// Variables:
|
||||
// - $button-alt-name : The name of the class used for the alternate button style.
|
||||
// - $button-alt-border-style : The border style of the alternate button style.
|
||||
|
||||
@ -1,5 +1,98 @@
|
||||
// Definitions for utilities and helper classes.
|
||||
// Note: most mixins need to be called separately to work.
|
||||
// Hidden elements class. ATTENTION: Uses !important.
|
||||
.#{$hidden-name}{
|
||||
display: none !important;
|
||||
}
|
||||
// Visually hidden elements class. ATTENTIONS: Uses !important.
|
||||
.#{$visually-hidden-name} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip-path: inset(100%);
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden !important;
|
||||
}
|
||||
// Breadcrumbs
|
||||
ul.#{$breadcrumbs-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0; // Remove unnecessary left and right empty space
|
||||
@if $breadcrumbs-border-style !=0 {
|
||||
border: $breadcrumbs-border-style;
|
||||
}
|
||||
@if $breadcrumbs-border-radius != 0 {
|
||||
border-radius: $breadcrumbs-border-radius;
|
||||
}
|
||||
@if $breadcrumbs-box-shadow !=0 {
|
||||
box-shadow: $breadcrumbs-box-shadow;
|
||||
}
|
||||
li {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background: $breadcrumbs-back-color;
|
||||
height: $breadcrumbs-height;
|
||||
line-height: $breadcrumbs-height;
|
||||
margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width;
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0 solid $breadcrumbs-back-color;
|
||||
border-width: ($breadcrumbs-height/2) ($breadcrumbs-height/4);
|
||||
}
|
||||
&:before {
|
||||
left: -($breadcrumbs-height/2);
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&:after {
|
||||
left: 100%;
|
||||
border-color: transparent;
|
||||
border-left-color: $breadcrumbs-back-color;
|
||||
}
|
||||
&:first-child {
|
||||
&:before {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
&:after {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Clearfix
|
||||
.#{$clearfix-name} {
|
||||
&:before, &:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
// Center block
|
||||
.#{$center-block-name} {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
// Generic border mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $border-generic-name : The name of the class used for the generic border.
|
||||
@ -17,32 +110,8 @@
|
||||
border-radius: $border-radial-radius !important;
|
||||
}
|
||||
}
|
||||
// Hidden mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $hidden-name : The name of the class used for the hidden elements.
|
||||
@mixin make-hidden ($hidden-name) {
|
||||
.#{$hidden-name}{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
// Visually hidden mixin. ATTENTION: Uses !important.
|
||||
// Makes element invisible, but still accessible to screen readers.
|
||||
// Variables:
|
||||
// - $visually-hidden-name : The name of the class used for the visually hidden elements.
|
||||
@mixin make-visually-hidden ($visually-hidden-name) {
|
||||
.#{$visually-hidden-name} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip-path: inset(100%);
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
// Floats mixin. ATTENTION: Uses !important.
|
||||
// NOTE: This mixin might be obsolete and not play well with others.
|
||||
// Variables:
|
||||
// - $float-prefix : Prefix for the class names of floats.
|
||||
@mixin make-floats ($float-prefix) {
|
||||
@ -52,51 +121,4 @@
|
||||
.#{$float-prefix}-right {
|
||||
float: right !important;
|
||||
}
|
||||
}
|
||||
// Clearfix mixin.
|
||||
// Variables:
|
||||
// - $clearfix-name : The name of the class used for the clearfix.
|
||||
@mixin make-clearfix ($clearfix-name) {
|
||||
.#{$clearfix-name} {
|
||||
&:before, &:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Center block mixin.
|
||||
// Variables:
|
||||
// - $center-block-name : The name of the class used for the center block.
|
||||
@mixin make-center-block ($center-block-name) {
|
||||
.#{$center-block-name} {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
// Breadcrumb mixin.
|
||||
// Variables:
|
||||
// - $breadcrumbs-name : The name of the class used for the breadcrumbs.
|
||||
// - $use-right-angle-symbol : (Optional) Should the right angle symbol be used as a separator (`true`/`false`).
|
||||
// Value is `true` by default. If `false` a forward slash will be used.
|
||||
@mixin make-breadcrumbs ($breadcrumbs-name, $use-right-angle-symbol : true) {
|
||||
ul.#{$breadcrumbs-name} {
|
||||
list-style: none;
|
||||
& > li{
|
||||
display: inline-block;
|
||||
// Some padding is needed for the breacrumbs to appear properly. 2px should be enough.
|
||||
padding-right: 0.125em;
|
||||
& + li:before{
|
||||
@if $use-right-angle-symbol {
|
||||
content: '\27e9';
|
||||
}
|
||||
@else {
|
||||
content: '\002f';
|
||||
}
|
||||
// Some padding is needed for the breacrumbs to appear properly. 2px should be enough.
|
||||
padding: 0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user