mirror of
https://github.com/wagtail/wagtail.git
synced 2024-12-01 03:31:04 +01:00
123 lines
2.6 KiB
SCSS
123 lines
2.6 KiB
SCSS
// =============================================================================
|
|
// Mixins
|
|
// =============================================================================
|
|
// Please note that the mixins partial shouldn't include any classes. This is so
|
|
// it can be included in any file without accidentally producing output
|
|
|
|
// Turns on font-smoothing when used. Use sparingly.
|
|
@mixin font-smoothing {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
@mixin clearfix() {
|
|
&:before,
|
|
&:after {
|
|
content: ' ';
|
|
display: table;
|
|
}
|
|
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
@mixin unlist() {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding-left: 0;
|
|
list-style-type: none;
|
|
font-style: normal;
|
|
|
|
li {
|
|
list-style-type: none;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
|
|
// remove list styles, but only for the immediate element -
|
|
// allow nested lists inside it to keep the default style
|
|
|
|
@mixin unlistimmediate() {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding-left: 0;
|
|
list-style-type: none;
|
|
font-style: normal;
|
|
|
|
> li {
|
|
list-style-type: none;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
@mixin transition($transition...) {
|
|
body.ready & {
|
|
transition: $transition;
|
|
}
|
|
}
|
|
|
|
@mixin visuallyhidden {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|
|
|
|
|
|
@mixin visuallyvisible {
|
|
clip: auto;
|
|
height: auto;
|
|
width: auto;
|
|
margin: initial;
|
|
overflow: visible;
|
|
position: initial;
|
|
}
|
|
|
|
@mixin svg-icon ($size: 1.5em, $position: text-top) {
|
|
width: $size;
|
|
height: $size;
|
|
vertical-align: $position;
|
|
}
|
|
|
|
@mixin icon () {
|
|
@include font-smoothing;
|
|
font-family: 'wagtail';
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
speak: none;
|
|
text-decoration: none;
|
|
width: 1.3em;
|
|
line-height: 1em;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
margin-right: 0.2em;
|
|
}
|
|
|
|
@mixin svg-icon ($size: 1.5em, $position: text-top) {
|
|
width: $size;
|
|
height: $size;
|
|
vertical-align: $position;
|
|
}
|
|
|
|
// Applies given rules on hover, except for touch screens.
|
|
// Relies on feature detection to add a no-touch class on the html element.
|
|
@mixin hover {
|
|
.no-touch &:hover {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Where included, show the focus outline within focusable items instead of around them.
|
|
// This is useful when focusable items are tightly packed and there is no space in-between.
|
|
@mixin show-focus-outline-inside {
|
|
outline-offset: -1 * $focus-outline-width;
|
|
}
|