140 lines
3.1 KiB
SCSS
140 lines
3.1 KiB
SCSS
/* Mixin file for sass. Here is where we define our variables and
|
|
browser compatability functions used in all scss/sass files */
|
|
|
|
/* Transision defaults */
|
|
$speed: 0.1s;
|
|
$easing: linear;
|
|
|
|
$default-border-radius: 3px;
|
|
|
|
/* Style includes */
|
|
|
|
@mixin button-gradient($color){
|
|
@include linear-gradient(lighten($color,20%), $color);
|
|
}
|
|
|
|
@mixin button-gradient-hover($color){
|
|
@include linear-gradient(lighten($color,20%), darken(saturate($color,15%),10%));
|
|
}
|
|
|
|
@mixin button-gradient-hover-no-saturation($color){
|
|
@include linear-gradient(lighten($color,20%), darken($color,15%));
|
|
}
|
|
|
|
@mixin header-gradient($color) {
|
|
@include linear-gradient(lighten($color, 2%), darken($color, 2%), 0%, 80%);
|
|
}
|
|
|
|
@mixin linear-gradient($from, $to, $start:0%, $end:100%){
|
|
background: mix($from,$to);
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to);
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})";
|
|
|
|
background: linear-gradient(to bottom, $from $start, $to $end);
|
|
}
|
|
|
|
@mixin horizontal-linear-gradient($from, $to, $start:0%, $end:100%){
|
|
background-image: mix($from,$to);
|
|
background-image: linear-gradient(left, $from $start, $to $end);
|
|
}
|
|
|
|
|
|
@mixin transition($type, $speed:$speed, $easing:$easing){
|
|
transition : $type $speed $easing;
|
|
}
|
|
|
|
@mixin animate($name, $speed:$speed, $occurances:"") {
|
|
animation : $name $speed $occurances;
|
|
}
|
|
|
|
@mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
|
|
animation: $name $speed $easing;
|
|
}
|
|
|
|
@mixin video-overlay(){
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
.video-overlay {
|
|
background : {
|
|
color: rgba(0,0,0, .65);
|
|
image : image-url('buttons/playbtn.png');
|
|
repeat : no-repeat;
|
|
position : 10px center;
|
|
size : 60px 60px;
|
|
}
|
|
|
|
border-radius: 40px 10px 10px 40px;
|
|
box-shadow: 0 0 32px rgba(255,255,255,.5);
|
|
|
|
position : absolute;
|
|
top : 50%;
|
|
left : 10%;
|
|
right : 10%;
|
|
|
|
height: 80px;
|
|
margin-top: -40px;
|
|
padding: 10px 7px 10px 80px;
|
|
overflow: hidden;
|
|
|
|
line-height: 60px;
|
|
|
|
& > div {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
max-width: 100%;
|
|
}
|
|
|
|
& > div > div {
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
text-shadow: -1px -1px 0 #000, 0 0 7px #111;
|
|
color: #F0F0F0;
|
|
font-size: 0.9em;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
line-height: .95em;
|
|
}
|
|
.meta {
|
|
font-size: .94em;
|
|
line-height: 1.3em;
|
|
white-space: nowrap;
|
|
opacity: 0.9;
|
|
|
|
a {
|
|
color: lighten($link-color, 25%);
|
|
}
|
|
a:visited {
|
|
color: $link-color;
|
|
}
|
|
}
|
|
.desc {
|
|
font-size: .91em;
|
|
line-height: .97em;
|
|
max-height: 35px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin selectable-list() {
|
|
.glyphicon-ok,
|
|
.glyphicon-refresh {
|
|
display: none;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
&.selected {
|
|
.glyphicon-ok { display: inline-block;}
|
|
.glyphicon-refresh { display: none;}
|
|
}
|
|
|
|
&.loading {
|
|
.glyphicon-refresh { display: inline-block;}
|
|
.glyphicon-ok { display: none;}
|
|
}
|
|
}
|