vanzhiganov/clipbucket
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
clipbucket/upload/styles/cb_28/theme/scss/_mymixins.scss
jamilrehman ba2e235899 ajax video placeholder style added
2016-03-21 15:36:42 +05:00

266 lines
No EOL
8.8 KiB
SCSS
Raw Blame History

/* variables */
$sprite : url(../images/sprite.png) no-repeat;
$black:#000;
$white:#fff;
$search-txt:#a8a8a8;
$bg-theme:#17181a;
$grey-txt:#757575;
$lt-grey:#f9f9f9;
$green: #4caf50;
$sidebar-color:#1a1e21;
$orange:#ffa000;
$dark-btn:#17181a;
$header-btn:#262727;
// $duration-bg:rgba(0,0,0,0.8);
$blue-color:#0080b4;
$body-bg:#eee;
$block-bg:#eee;
$block-color:#333;
$heading-color:#666;
$search-toggle:#999;
$base-font:'Source Sans Pro', sans-serif;
$base-color:#000;
$iconfont: 'icomoon';
$default-border:1px solid #d9d9d9;
$fb-color:#2b4b90;
$tw-color:#1c95d0;
$gplus-color:#d34332;
$com-color:#2d2d2d;
$probox-bg: #f8f8f8;
/**/
@mixin gradient-bg(){
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.6+0,0.59+43,0.55+49,0.26+70,0.12+82,0.05+90,0.01+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.59) 43%, rgba(0,0,0,0.55) 49%, rgba(0,0,0,0.26) 70%, rgba(0,0,0,0.12) 82%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0.01) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.59) 43%,rgba(0,0,0,0.55) 49%,rgba(0,0,0,0.26) 70%,rgba(0,0,0,0.12) 82%,rgba(0,0,0,0.05) 90%,rgba(0,0,0,0.01) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.59) 43%,rgba(0,0,0,0.55) 49%,rgba(0,0,0,0.26) 70%,rgba(0,0,0,0.12) 82%,rgba(0,0,0,0.05) 90%,rgba(0,0,0,0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#03000000',GradientType=0 ); /* IE6-9 */
}
@mixin gradientbottom-bg(){
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.01+0,0.02+8,0.09+18,0.23+28,0.43+41,0.57+58,0.69+78,0.76+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.02) 8%, rgba(0,0,0,0.09) 18%, rgba(0,0,0,0.23) 28%, rgba(0,0,0,0.43) 41%, rgba(0,0,0,0.57) 58%, rgba(0,0,0,0.69) 78%, rgba(0,0,0,0.76) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.02) 8%,rgba(0,0,0,0.09) 18%,rgba(0,0,0,0.23) 28%,rgba(0,0,0,0.43) 41%,rgba(0,0,0,0.57) 58%,rgba(0,0,0,0.69) 78%,rgba(0,0,0,0.76) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.02) 8%,rgba(0,0,0,0.09) 18%,rgba(0,0,0,0.23) 28%,rgba(0,0,0,0.43) 41%,rgba(0,0,0,0.57) 58%,rgba(0,0,0,0.69) 78%,rgba(0,0,0,0.76) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03000000', endColorstr='#c2000000',GradientType=0 ); /* IE6-9 */
}
@mixin after(){
display: block;
clear: both;
content: "";
}
@mixin list-style(){
list-style: none;
padding: 0;
margin: 0;
}
@mixin transition-property($transitionProperty){
-webkit-transition-property: $transitionProperty;
-moz-transition-property: $transitionProperty;
-ms-transition-property: $transitionProperty;
-o-transition-property: $transitionProperty;
transition-property: $transitionProperty;
}
@mixin transition($transition) {
-webkit-transition: $transition;
-moz-transition: $transition;
-ms-transition: $transition;
-o-transition: $transition;
}
@mixin boxsizing(){
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@mixin text-replacement(){
text-indent:-9999px;
overflow: hidden;
}
@mixin pro-box-mix(){
background: #f8f8f8;
border:1px solid #e1e1e1;
}
@mixin img-thumb(){
.row{
margin: 0 -10px;
}
.img-holder{
padding: 0 10px;
margin: 0 auto 20px;
img{
width: 100%;
}
}
}
@mixin vertical-top(){
display: inline-block;
vertical-align: top;
}
@mixin vertical-middle(){
display: inline-block;
vertical-align: middle;
}
@mixin vertical-bottom(){
display: inline-block;
vertical-align: bottom;
}
/**/
@mixin text-shadow ($string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
text-shadow: $string;
}
@mixin box-shadow ($string) {
-webkit-box-shadow: $string;
-moz-box-shadow: $string;
box-shadow: $string;
}
@mixin drop-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
-webkit-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
-moz-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
}
@mixin inner-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
-webkit-box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
-moz-box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
}
@mixin gradient ($startColor: #eee, $endColor: white) {
background-color: $startColor;
background: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
background: -webkit-linear-gradient(top, $startColor, $endColor);
background: -moz-linear-gradient(top, $startColor, $endColor);
background: -ms-linear-gradient(top, $startColor, $endColor);
background: -o-linear-gradient(top, $startColor, $endColor);
}
@mixin horizontal-gradient ($startColor: #eee, $endColor: white) {
background-color: $startColor;
background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
background-image: -webkit-linear-gradient(left, $startColor, $endColor);
background-image: -moz-linear-gradient(left, $startColor, $endColor);
background-image: -ms-linear-gradient(left, $startColor, $endColor);
background-image: -o-linear-gradient(left, $startColor, $endColor);
}
@mixin myanimation ($name, $duration, $ease) {
-webkit-animation: $name $duration $ease;
-moz-animation: $name $duration $ease;
-ms-animation: $name $duration $ease;
-o-animation: $name $duration $ease;
animation: $name $duration $ease;
}
@mixin transform($string){
-webkit-transform: $string;
-moz-transform: $string;
-ms-transform: $string;
-o-transform: $string;
}
@mixin scale ($factor) {
-webkit-transform: scale($factor);
-moz-transform: scale($factor);
-ms-transform: scale($factor);
-o-transform: scale($factor);
}
@mixin rotate ($deg) {
-webkit-transform: rotate($deg);
-moz-transform: rotate($deg);
-ms-transform: rotate($deg);
-o-transform: rotate($deg);
}
@mixin skew ($deg, $deg2) {
-webkit-transform: skew($deg, $deg2);
-moz-transform: skew($deg, $deg2);
-ms-transform: skew($deg, $deg2);
-o-transform: skew($deg, $deg2);
}
@mixin translate ($x, $y:0) {
-webkit-transform: translate($x, $y);
-moz-transform: translate($x, $y);
-ms-transform: translate($x, $y);
-o-transform: translate($x, $y);
}
@mixin translate3d ($x, $y: 0, $z: 0) {
-webkit-transform: translate3d($x, $y, $z);
-moz-transform: translate3d($x, $y, $z);
-ms-transform: translate3d($x, $y, $z);
-o-transform: translate3d($x, $y, $z);
}
@mixin perspective ($value: 1000) {
-webkit-perspective: $value;
-moz-perspective: $value;
-ms-perspective: $value;
perspective: $value;
}
@mixin transform-origin ($x:center, $y:center) {
-webkit-transform-origin: $x $y;
-moz-transform-origin: $x $y;
-ms-transform-origin: $x $y;
-o-transform-origin: $x $y;
}
/* buttons */
.btn-default{
background:#ededed;
border-color: #e0e0e0;
font-weight: 700;
color: $base-color;
&:hover,
&:focus,
&:active,
&.active,
&:hover{
background:#ededed;
border-color: #e0e0e0;
//color: @base-color;
}
}
.btn-primary{
background:#1976d2;
border-color:#1976d2;
font-weight: 700;
color:#fff;
&:hover,
&:focus,
&:active,
&.active,
&:hover{
background:#1976d2;
border-color:#1976d2;
color:#fff;
}
}
.btn-success{
background:#4caf50;
border-color:#4caf50;
font-weight: 700;
color:#fff;
&:hover,
&:focus,
&:active,
&.active,
&:hover{
background:#4caf50;
border-color:#4caf50;
color:#fff;
}
}
/* sprite */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) {
.playlists-dropdown .item_playlist .playlist-thumb .date-time,
.playlists-dropdown .playlist-header .close-playlists,
.headerIcon.active.playlist-icon a,
.headerIcon.active.channels-icon a,
.headerIcon.active.video-icon a,
.headerIcon.playlist-icon a,
.headerIcon.channels-icon a,
.headerIcon.video-icon a,
.navbar-default .right-menu.navbar-nav > li > a.user-area .btn-setting,
.navbar-default .right-menu.navbar-nav > li > a.btn-upload,
.ch-playlists .playlist-thumb .date-time,
.rating .like-dislike a.btn-dislike i,
.rating .like-dislike a.btn-like i{
// Reference the @2x Sprite
background-image:url('../images/sprite@2x.png') !important;
/* Translate the @2x sprite's dimensions back to 1x */
background-size: 60px 4400px !important;
}
}
Reference in a new issue View git blame Copy permalink