django-allauth-ens/allauth_ens/scss/_mixins.scss

107 lines
1.8 KiB
SCSS
Raw Normal View History

2017-08-03 12:40:52 +02:00
@mixin hover {
&:hover { @content }
}
@mixin hover-focus {
@if $enable-hover-media-query {
&:focus { @content }
@include hover { @content }
} @else {
&:focus,
&:hover {
@content
}
}
}
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
@mixin ellipsis($text-overflow: ellipsis) {
& {
overflow: hidden;
text-overflow: $text-overflow;
white-space: nowrap;
}
}
@mixin transition($time: .15s) {
transition: background $time, color $time, border-color $time;
2017-09-16 02:32:42 +02:00
}
2017-08-03 12:40:52 +02:00
@mixin link {
2017-09-16 02:32:42 +02:00
@include transition;
2017-08-03 12:40:52 +02:00
color: $link-color;
font-size: inherit;
text-decoration: $link-decoration;
@include hover-focus {
2017-09-16 02:32:42 +02:00
//color: $link-hover-color;
2017-08-03 12:40:52 +02:00
text-decoration: $link-hover-decoration;
}
}
@mixin btn {
2017-09-16 02:32:42 +02:00
@include transition;
display: block;
width: 100%;
2017-09-16 02:32:42 +02:00
min-height: 30px;
line-height: initial;
2017-08-03 12:40:52 +02:00
border: 0;
border-radius: 3px;
padding: 7px 15px;
2017-08-03 12:40:52 +02:00
font-size: 18px;
2017-09-16 02:32:42 +02:00
text-align: center;
2017-08-03 12:40:52 +02:00
@include hover-focus {
text-decoration: none;
cursor: pointer;
}
}
@mixin btn-primary {
background: $brand-primary;
color: $white;
2017-08-03 12:40:52 +02:00
@include hover-focus {
background: darken($brand-primary, 5%);
2017-08-03 12:40:52 +02:00
color: $white;
}
}
@mixin btn-success {
background: $brand-success;
2017-09-16 02:32:42 +02:00
color: $white;
2017-08-03 12:40:52 +02:00
@include hover-focus {
background: darken($brand-success, 15%);
color: $white;
}
}
@mixin btn-danger {
background: $brand-danger;
color: $white;
@include hover-focus {
background: darken($brand-danger, 15%);
color: $white;
}
}
@mixin btn-sm {
min-height: auto;
padding: 4px 7px;
font-size: 12px;
}