mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-25 20:46:48 +00:00
ec2213d2f0
It looks ike these CSS rules are actually being re-imported multiple times, which is bloating the output.
123 lines
2.2 KiB
SCSS
123 lines
2.2 KiB
SCSS
//Big search used in active table search \\
|
|
|
|
@mixin big-input($input, $inputhvr, $inputactv) {
|
|
@include headingFont;
|
|
|
|
@include csstrans;
|
|
|
|
@include border-radius(0.5rem);
|
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid $input;
|
|
font-size: 2rem;
|
|
box-shadow: 0;
|
|
padding: 0.5rem 1rem;
|
|
height: auto;
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
box-shadow: none;
|
|
color: $inputactv;
|
|
|
|
@include breakpoint(phablet) {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
&:hover {
|
|
@include box-shadow(0 1px 1px 0 rgba(255, 255, 255, 0.25));
|
|
|
|
border: 2px solid $inputhvr;
|
|
color: $inputactv;
|
|
}
|
|
|
|
&:active, &:focus, &.active {
|
|
border: 2px solid $inputactv;
|
|
color: $inputactv;
|
|
background: white;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
text-shadow: 0 0 10px #ffffff;
|
|
padding: 1rem;
|
|
letter-spacing: 0.02rem;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
@mixin big-input-static {
|
|
outline: 0;
|
|
|
|
&:active, &:focus, &.active {
|
|
padding: 0.75rem 1rem 0.35rem 1rem;
|
|
letter-spacing: 0;
|
|
}
|
|
}
|
|
|
|
@mixin medium-input($input, $inputhvr, $inputactv) {
|
|
@include headingFont;
|
|
|
|
@include csstrans;
|
|
|
|
@include border-radius(0.5rem);
|
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid $input;
|
|
font-size: 0.875rem;
|
|
box-shadow: 0;
|
|
padding: 0.5rem 0.625rem 0.375rem;
|
|
height: auto;
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
box-shadow: none;
|
|
color: $inputactv;
|
|
|
|
&:hover {
|
|
@include box-shadow(0 1px 1px 0 rgba(255, 255, 255, 0.25));
|
|
|
|
border: 2px solid $inputhvr;
|
|
color: $inputactv;
|
|
}
|
|
|
|
&:active, &:focus, &.active {
|
|
border: 2px solid $inputactv;
|
|
color: $inputactv;
|
|
background: white;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
text-shadow: 0 0 10px #ffffff;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
@mixin placeholder($placeholder, $placeholderhvr) {
|
|
::-webkit-input-placeholder {
|
|
color: $placeholder;
|
|
}
|
|
|
|
-moz-placeholder: {
|
|
color: $placeholder;
|
|
};
|
|
|
|
::-moz-placeholder {
|
|
color: $placeholder;
|
|
}
|
|
|
|
-ms-input-placeholder: {
|
|
color: $placeholder;
|
|
};
|
|
|
|
&:hover {
|
|
::-webkit-input-placeholder {
|
|
color: $placeholderhvr;
|
|
}
|
|
|
|
-moz-placeholder: {
|
|
color: $placeholderhvr;
|
|
};
|
|
|
|
::-moz-placeholder {
|
|
color: $placeholderhvr;
|
|
}
|
|
|
|
-ms-input-placeholder: {
|
|
color: $placeholderhvr;
|
|
};
|
|
}
|
|
}
|