mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-04-06 01:25:38 +00:00
98 lines
2.1 KiB
SCSS
98 lines
2.1 KiB
SCSS
/* GLOBAL MIXINS
|
|
--------------------------------------------- */
|
|
|
|
// Reset
|
|
@mixin reset {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
@mixin reset-list {
|
|
@include reset;
|
|
list-style: none;
|
|
}
|
|
|
|
@mixin reset-button {
|
|
@include reset;
|
|
border: 0;
|
|
width: auto;
|
|
overflow: visible;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
line-height: normal;
|
|
outline: none;
|
|
font-smoothing: inherit;
|
|
-webkit-font-smoothing: inherit;
|
|
-moz-osx-font-smoothing: inherit;
|
|
-webkit-appearance: none;
|
|
|
|
&::-moz-focus-inner {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@mixin clearfix {
|
|
&:before, &:after {
|
|
display: table;
|
|
content: '';
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
// Used to prevent text selection on an element
|
|
@mixin prevent-user-select {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/// Used to hide an element visually, but keeping it accessible for
|
|
/// accessibility tools.
|
|
@mixin visually-hidden {
|
|
// Need to make sure we override any existing styles.
|
|
position: absolute !important;
|
|
top: 0;
|
|
clip: rect(1px, 1px, 1px, 1px) !important;
|
|
overflow: hidden !important;
|
|
height: 1px !important;
|
|
width: 1px !important;
|
|
padding: 0 !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
/// To be used on flex items. Resolves some common layout issues, such as
|
|
/// text truncation not respecting padding or breaking out of container.
|
|
/// https://css-tricks.com/flexbox-truncated-text/
|
|
@mixin layout-flex-fix {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@mixin border-radius($size, $side: false) {
|
|
@if ($side == 'top') {
|
|
border-top-left-radius: $size;
|
|
border-top-right-radius: $size;
|
|
}
|
|
@else if ($side == 'bottom') {
|
|
border-bottom-left-radius: $size;
|
|
border-bottom-right-radius: $size;
|
|
}
|
|
@else if ($side == 'left') {
|
|
border-top-left-radius: $size;
|
|
border-bottom-left-radius: $size;
|
|
}
|
|
@else if ($side == 'right') {
|
|
border-top-right-radius: $size;
|
|
border-bottom-right-radius: $size;
|
|
}
|
|
@else {
|
|
border-top-left-radius: $size;
|
|
border-top-right-radius: $size;
|
|
border-bottom-left-radius: $size;
|
|
border-bottom-right-radius: $size;
|
|
}
|
|
}
|