barebones/assets/styles/utils/_helpers.scss

110 lines
1.3 KiB
SCSS
Raw Normal View History

2015-10-14 14:03:16 +02:00
/**
* Clearing and floating
*/
2019-01-08 11:52:31 +01:00
2015-10-15 18:24:32 +02:00
.alignleft,
2015-10-14 14:03:16 +02:00
.float-left {
2019-01-08 11:52:31 +01:00
float: left;
2019-01-08 11:52:31 +01:00
img & {
margin-right: $base-spacing-unit;
}
2015-10-14 14:03:16 +02:00
}
2015-10-15 18:24:32 +02:00
.alignright,
2015-10-14 14:03:16 +02:00
.float-right {
2019-01-08 11:52:31 +01:00
float: right;
2019-01-08 11:52:31 +01:00
img & {
margin-left: $base-spacing-unit;
}
2015-10-14 14:03:16 +02:00
}
2015-10-15 18:24:32 +02:00
.aligncenter,
2015-10-14 14:03:16 +02:00
.float-center {
2019-01-08 11:52:31 +01:00
display: block;
margin: {
left: auto;
right: auto;
}
img & {
margin-bottom: $base-spacing-unit;
}
2015-10-14 14:03:16 +02:00
}
.clearfix {
2019-01-08 11:52:31 +01:00
@include clearfix;
2015-10-14 14:03:16 +02:00
}
/**
* Text aligments
*/
2019-01-08 11:52:31 +01:00
2016-04-29 14:01:43 +02:00
.align-text-left {
2019-01-08 11:52:31 +01:00
text-align: left;
2015-04-01 18:32:10 +02:00
}
2016-04-29 14:01:43 +02:00
.align-text-right {
2019-01-08 11:52:31 +01:00
text-align: right;
2015-04-01 18:32:10 +02:00
}
2016-04-29 14:01:43 +02:00
.align-text-center {
2019-01-08 11:52:31 +01:00
text-align: center;
2015-04-01 18:32:10 +02:00
}
2015-10-14 14:03:16 +02:00
2023-08-03 13:57:13 +02:00
/**
* Aligments
*/
.items-center {
align-items: center;
}
2015-10-14 14:03:16 +02:00
/**
2019-01-08 11:52:31 +01:00
* Elements visibility
*/
2015-10-14 15:58:18 +02:00
.visible-on-mobile {
2019-01-08 11:52:31 +01:00
display: none !important;
2019-01-08 11:52:31 +01:00
@include resp-max($breakpoint-sm) {
display: block !important;
}
2015-04-01 18:32:10 +02:00
}
2015-10-14 15:58:18 +02:00
.visible-on-tablet {
2019-01-08 11:52:31 +01:00
display: none !important;
2019-01-08 11:52:31 +01:00
@include resp-max($breakpoint-md) {
display: block !important;
}
2019-01-08 11:52:31 +01:00
@include resp-max($breakpoint-sm) {
display: none !important;
}
2015-04-01 18:32:10 +02:00
}
2016-04-29 14:01:43 +02:00
.visible-on-desktop {
2019-01-08 11:52:31 +01:00
@include resp-max($breakpoint-md) {
display: none !important;
}
2015-12-14 18:33:14 +01:00
}
2019-01-08 11:52:31 +01:00
/**
* Accessibility
*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}