@mixin placeholder-color($color)
{
&::-webkit-input-placeholder
{
/* WebKit, Blink, Edge */
text-overflow: ellipsis;
opacity: 1;
color: $color;
}
&:-moz-placeholder
{
/* Mozilla Firefox 4 to 18 */
text-overflow: ellipsis;
opacity: 1;
color: $color;
}
&::-moz-placeholder
{
/* Mozilla Firefox 19+ */
text-overflow: ellipsis;
opacity: 1;
color: $color;
}
&:-ms-input-placeholder
{
/* Internet Explorer 10-11 */
text-overflow: ellipsis;
opacity: 1;
color: $color;
}
&::-ms-input-placeholder
{
/* Microsoft Edge */
text-overflow: ellipsis;
opacity: 1;
color: $color;
}
&::placeholder
{
/* Most modern browsers support this now. */
text-overflow: ellipsis;
opacity: 1;
color: $color;
}
}
.link {
@include placeholder-color(#ccc);
&:hover {
@include placeholder-color(#000);
}
}
.benefit {
text-align: center;
@media only screen and (min-width: $phones) {
display: flex;
}
}
$self: "select";
.#{$self} {
&.open {
z-index: 2;
.#{$self}__dropdown {
display: block;
background-color: white;
}
.#{$self}__label {
border-bottom: none;
}
.#{$self}__arrow {
transition: 0.3s ease;
transform: rotate(180deg);
}
}
}
.select {
&.open {
z-index: 2;
}
&.open &__dropdown {
display: block;
background-color: white;
}
&.open &__label {
border-bottom: none;
}
&.open &__arrow {
transition: 0.3s ease;
transform: rotate(180deg);
}
}
mixin color-group(color, description, value)
.color-group
.color-group__color(style={background: color})
h2.color-group__description= description
p.color-group__value= value
+color-group('#1F2041', 'Текст', 'Еще какой то текст')
+color-group('#ccc', 'Текст 2', 'Еще какой то текст 2')
.class_1 {
@extend .class_2;
right: 0;
left: 0;
}
.class_2 {
position: absolute;
top: 0;
bottom: 0;
}
%position {
position: absolute;
top: 0;
bottom: 0;
}
.class_1 {
@extend %position;
right: 0;
left: 0;
}
.class_2 {
@extend %position;
}