mirror of https://github.com/kremalicious/blog.git
135 lines
2.7 KiB
SCSS
135 lines
2.7 KiB
SCSS
@import 'variables';
|
|
|
|
// CSS image replacement
|
|
/////////////////////////////////////
|
|
|
|
@mixin hide-text() {
|
|
font: 0/0 a; // stylelint-disable font-family-no-missing-generic-family-keyword
|
|
color: transparent;
|
|
text-shadow: none;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
// Text overflow
|
|
/////////////////////////////////////
|
|
|
|
@mixin ellipsis() {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Layout breakout
|
|
/////////////////////////////////////
|
|
|
|
@mixin breakoutviewport() {
|
|
margin-left: calc(-50vw + 50%);
|
|
margin-right: calc(-50vw + 50%);
|
|
|
|
@media (min-width: $screen-md) {
|
|
@include breakoutviewport--base();
|
|
}
|
|
}
|
|
|
|
@mixin breakoutviewport--base() {
|
|
margin-left: -($spacer * 4);
|
|
margin-right: -($spacer * 4);
|
|
}
|
|
|
|
@mixin breakoutviewport--full() {
|
|
margin-left: calc(-50vw + 50%);
|
|
margin-right: calc(-50vw + 50%);
|
|
}
|
|
|
|
// Button sizing
|
|
/////////////////////////////////////
|
|
|
|
@mixin button-size(
|
|
$padding-vertical,
|
|
$padding-horizontal,
|
|
$font-size,
|
|
$line-height,
|
|
$border-radius
|
|
) {
|
|
padding: $padding-vertical $padding-horizontal;
|
|
font-size: $font-size;
|
|
line-height: $line-height;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
// Form control sizing
|
|
/////////////////////////////////////
|
|
|
|
@mixin input-size(
|
|
$padding-vertical,
|
|
$padding-horizontal,
|
|
$font-size,
|
|
$line-height,
|
|
$border-radius
|
|
) {
|
|
padding: $padding-vertical $padding-horizontal;
|
|
font-size: $font-size;
|
|
line-height: $line-height;
|
|
border-radius: $border-radius;
|
|
|
|
&input[type='search'] {
|
|
background-size: $font-size;
|
|
background-position: $padding-vertical center;
|
|
padding-left: ($padding-vertical * 4);
|
|
}
|
|
|
|
&select {
|
|
line-height: $input-height;
|
|
}
|
|
|
|
&textarea,
|
|
&select[multiple] {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
// Placeholder text
|
|
/////////////////////////////////////
|
|
|
|
@mixin placeholder($color: $input-color-placeholder) {
|
|
&::-moz-placeholder {
|
|
color: $color;
|
|
opacity: 1; // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526
|
|
}
|
|
|
|
&::-webkit-input-placeholder {
|
|
color: $color;
|
|
}
|
|
|
|
&:-ms-input-placeholder {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
// Image frame style
|
|
/////////////////////////////////////
|
|
|
|
@mixin media-frame() {
|
|
@include transition();
|
|
|
|
border-top: 2px solid transparent;
|
|
border-bottom: 2px solid transparent;
|
|
border-radius: $border-radius;
|
|
box-shadow: 0 3px 5px rgba($brand-grey, 0.2),
|
|
0 5px 16px rgba($brand-grey, 0.2);
|
|
|
|
@media (min-width: $screen-sm) {
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
:global(.dark) & {
|
|
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.25),
|
|
0 5px 16px rgba(darken($brand-main, 20%), 0.25);
|
|
}
|
|
|
|
img {
|
|
border-radius: $border-radius;
|
|
}
|
|
}
|