diff --git a/sites/all/themes/gui/materiobasetheme/less/gui.scss b/sites/all/themes/gui/materiobasetheme/less/gui.scss new file mode 100644 index 00000000..638fa495 --- /dev/null +++ b/sites/all/themes/gui/materiobasetheme/less/gui.scss @@ -0,0 +1,593 @@ +/* + * www.g-u-i.net + */ + +// = +// = +// = +// = +// = +// ===== TYPOGRAHIE ====================================================================================================== + +@mixin fs8(){font-size:8px;} +@mixin fs9(){font-size:9px;} +@mixin fs10(){font-size:10px;} +@mixin fs11(){font-size:10px;} +@mixin fs12(){font-size:12px;} +@mixin fs14(){font-size:14px;} +@mixin fs16(){font-size:16px;} +@mixin fs18(){font-size:18px;} +@mixin fs20(){font-size:20px;} +@mixin fs24(){font-size:24px;} +@mixin fs28(){font-size:24px;} +@mixin fs30(){font-size:30px;} +@mixin fs36(){font-size:36px;} +@mixin fs48(){font-size:48px;} +@mixin fs60(){font-size:60px;} +@mixin fs72(){font-size:72px;} + +@mixin regular(){font-weight:normal;} +@mixin bold(){font-weight:bold;} +@mixin fs100(){font-weight:100;} +@mixin fs200(){font-weight:200;} +@mixin fs300(){font-weight:300;} +@mixin fs400(){font-weight:400;} +@mixin fs500(){font-weight:500;} +@mixin fs600(){font-weight:600;} +@mixin fs700(){font-weight:700;} +@mixin fs800(){font-weight:800;} +@mixin fs900(){font-weight:900;} + +@mixin upper(){text-transform: uppercase;} +@mixin italic(){font-style:italic;} +@mixin normal(){font-style: normal;} + +@mixin hyphens($value: auto) +{ + -webkit-hyphens:$value; + -moz-hyphens:$value; + -ms-hyphens:$value; + -o-hyphens:$value; + hyphens:$value; +} +@mixin font-size($value: 1em,$lineheight:1.3em) +{ + font-size:$value; + line-height:$lineheight; +} + +$green:#17942A; +$red:#E60000; + +// = +// = +// = +// = +// = +// ===== SHORTCUTS ======================================================================================================= + +// padding +@mixin p($p){ padding:$arguments; } +@mixin p($v, $h){ padding:$arguments; } +@mixin p($t, $l, $b, $l){ padding:$arguments; } + +@mixin pt($p){ padding-top:$p; } +@mixin pr($p){ padding-right:$p; } +@mixin pb($p){ padding-bottom:$p; } +@mixin pl($p){ padding-left:$p; } + +// margin +@mixin m($p){ margin:$arguments; } +@mixin m($v, $h){ margin:$arguments; } +@mixin m($t, $l, $b, $l){ margin:$arguments; } + +@mixin mt($m){ margin-top:$m; } +@mixin mr($m){ margin-right:$m; } +@mixin mb($m){ margin-bottom:$m; } +@mixin ml($m){ margin-left:$m; } + +@mixin no-margin(){ margin:0; padding:0; } + +// border +@mixin b($b){ border: $b; } +@mixin b($size, $color){ border: $size solid $color; } + +@mixin bt($b){ border-top: $b;} +@mixin bt($size, $color){border-top: $size solid $color;} + +@mixin br($b){ border-right: $b;} +@mixin br($size, $color){border-right: $size solid $color;} + +@mixin bb($b){ border-bottom: $b;} +@mixin bb($size, $color){border-bottom: $size solid $color;} + +@mixin bl($b){ border-left: $b;} +@mixin bl($size, $color){border-left: $size solid $color;} + +@mixin bordered($top-color: #EEE, $right-color: #EEE, $bottom-color: #EEE, $left-color: #EEE) +{ + border-top : solid 1px $top-color; + border-right : solid 1px $right-color; + border-bottom: solid 1px $bottom-color; + border-left : solid 1px $left-color; +} + +// Background +@mixin bg($color, $url, $repeat, $scrollfixed, $pos){background: $arguments;} +@mixin bgc($color){background-color: $arguments;} +@mixin bkgd($params){background: $arguments;} +@mixin bkgdc($color){@include bgc($arguments);} + +@mixin bgca($r, $g, $b, $a){ + background-color: rgb($r, $g, $b); // ie8 + background-color: rgba($r, $g, $b, $a); + *background-color: rgb($r, $g, $b); // ie7 +}; + +// Selection +@mixin selection($bgcolor,$color) +{ + &::selection { + background:$bgcolor; + color:$color; + } + &::-moz-selection { + background:$bgcolor; + color:$color; + } + &::-webkit-selection { + background:$bgcolor; + color:$color; + } +} + +// Colors +@mixin color($value) +{ + &, + & *{color:$value;} +} + +// Opacity +@mixin opacity($opacity: 0.5) +{ + -webkit-opacity: $opacity; + -khtml-opacity: $opacity; + -moz-opacity: $opacity; + opacity: $opacity; +} + +// size +@mixin size($height, $width) { + width: $width; + height: $height; +} +@mixin square($size) { + @include size($size, $size); +} + +// center +@mixin center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// = +// = +// = +// = +// = +// ===== DISPLAY UTILS =================================================================================================== + +// Inline blocks +@mixin inlineblock($top) +{ + display:moz-inline-stack; + display:inline-block; + vertical-align:$align; + zoom:1; + *display:inline; + // .ie7 &, .ie8 &{display:block;float:left;} +} + +@mixin db(){display:block;} +@mixin dbn(){display:none;} +@mixin dib(){@include inlineblock;} +@mixin dib($align){@include inlineblock($align);} + +@mixin float($left){ + @include db; + float:$align; +} + +@mixin abs($value) { position:absolute; top:$value; left:$value; bottom:$value; right:$value; } +@mixin abs($top, $left) { position:absolute; top:$top; left:$left; } +@mixin abs($top, $right, $bottom, $left) { position:absolute; top:$top; left:$left; bottom:$bottom; right:$right; }; + +@mixin fix($value) { position:fixed; top:$value; left:$value; bottom:$value; right:$value; } +@mixin fix($top, $left) { position:fixed; top:$top; left:$left; } +@mixin fix($top, $right, $bottom, $left) { position:fixed; top:$top; left:$left; bottom:$bottom; right:$right; }; + +// Columns system +$g:0; +@mixin g() { width:$g; } +@mixin col($col,$coltotal:$n,$gutter:$g) { + width: $col * ( 100% - (($coltotal - 1) * $gutter) ) / $coltotal + (($col - 1) * $gutter); +} +@mixin inside-left($col,$coltotal:$n,$gutter:$g) { + padding-left: $col * ( 100% - (($coltotal - 1) * $gutter) ) / $coltotal + ($col * $gutter); +} +@mixin inside-right($col,$coltotal:$n,$gutter:$g) { + padding-right: $col * ( 100% - (($coltotal - 1) * $gutter) ) / $coltotal + ($col * $gutter); +} + + +// Vertical alignement +// +// ___ @mixin align-child() +// | +// | Permet l’alignement vertical d’un objet par rapport à son premier parent (dans son conteneur direct)@mixin +// | +// | 1 param : $vertical-align +// +@mixin align-child($align:middle){ + &:before { content: ""; @include dib(middle); overflow: hidden; visibility: hidden; width: 0; height: 100%; } + & > * { @include dib($align); } +} + +@mixin clear-after(){ + &:after{clear:both;content:'';display:block;height:0px;overflow:hidden;visibility:hidden;width:0px;} +} + +// For clearing floats like a boss h5bp@mixin com/q +@mixin clearix() { + *zoom: 1; + &:before, + &:after { + display: table; + content: ""; + // Fixes Opera/contenteditable bug: + // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + line-height: 0; + } + &:after { + clear: both; + } +} + +// = +// = +// = +// = +// = +// ===== CSS3 ============================================================================================================ + +// Gradients +@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) +{ + background: $color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, $start), + color-stop(1, $stop)); + background: -ms-linear-gradient(bottom, + $start, + $stop); + background: -moz-linear-gradient(center bottom, + $start 0%, + $stop 100%); +} +@mixin bw-gradient($color: #F5F5F5, $start: 0, $stop: 255) +{ + background: $color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, rgb($start,$start,$start)), + color-stop(1, rgb($stop,$stop,$stop))); + background: -ms-linear-gradient(bottom, + rgb($start,$start,$start) 0%, + rgb($start,$start,$start) 100%); + background: -moz-linear-gradient(center bottom, + rgb($start,$start,$start) 0%, + rgb($stop,$stop,$stop) 100%); +} + +// Shadows +// +// ___ .box-shadow() +// | +// | Ombré extérieur. +// | +// | 1 param : $blur +// | 2+ params : $horizontal / $vertical / $blur / $color: #000 / $spread: 0px +// +// ___ .inset-shadow() +// | +// | Ombré intérieur. +// | +// | 1 param : $blur +// | 2+ params : $horizontal / $vertical / $blur / $color: #000 / $spread: 0px +// +@mixin box-shadow($blur: 9px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')"; + -webkit-box-shadow: 0 0 $blur #000; + -moz-box-shadow: 0 0 $blur #000; + -ms-box-shadow: 0 0 $blur #000; + box-shadow: 0 0 $blur #000; +} +@mixin box-shadow($x, $y, $blur: 9px, $color: #000, $spread: 0px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=$x, OffY=$y, Color=~'${color}'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=${x}, OffY=${y}, Color='${color}')"; + -webkit-box-shadow: $x $y $blur $spread $color; + -moz-box-shadow: $x $y $blur $spread $color; + -ms-box-shadow: $x $y $blur $spread $color; + box-shadow: $x $y $blur $spread $color; +} +@mixin inset-shadow($blur: 9px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')"; + -webkit-box-shadow: 0 0 $blur #000 inset; + -moz-box-shadow: 0 0 $blur #000 inset; + -ms-box-shadow: 0 0 $blur #000 inset; + box-shadow: 0 0 $blur #000 inset; +} +@mixin inset-shadow($x, $y, $blur: 9px, $color: #000, $spread: 0px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=$x, OffY=$y, Color=~'${color}'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='${color}')"; + -webkit-box-shadow: $x $y $blur $spread $color inset; + -moz-box-shadow: $x $y $blur $spread $color inset; + -ms-box-shadow: $x $y $blur $spread $color inset; + box-shadow: $x $y $blur $spread $color inset; +} + +@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) +{ + -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); + -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); + box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); +} + +// Border radius +@mixin rounded($radius: 2px) +{ + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} +@mixin border-radius($topleft: 0, $topright: 0, $bottomright: 0, $bottomleft: 0) +{ + -webkit-border-radius:$arguments; + -moz-border-radius:$arguments; + border-radius:$arguments; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +// transitions +@mixin transition-simply-prefix($string) { + -webkit-transition: $string; + -moz-transition: $string; + -o-transition: $string; + transition: $string; +} + +// +// ___ .transition() +// | +// | 1 param : $property +// | 2 params : $property / $duration +// | 3+ params : $property / $duration / $transitiondelay:0s , $timingfunction:ease-out +// +// ___ .transitions() +// | +// | Permet de fixer des paramètres spécifique par propriétés, exemple: +// | +// | .transitions( +// | 'height , padding , margin , box-shadow', +// | '.5s , .2s , .2s , .2s', +// | '0s , 0s , 0s , .3s', +// | 'linear , ease-out , linear , ease-out' +// | ); +// +@mixin transition($property: all) +{ + -webkit-transition: $property; + -moz-transition: $property; + -o-transition: $property; + transition: $property; +} +@mixin transition($property, $duration) +{ + -webkit-transition: $arguments; + -moz-transition: $arguments; + -o-transition: $arguments; + transition: $arguments; +} +@mixin transition($property, $duration, $transitiondelay, $timingfunction:ease-out) +{ + -webkit-transition: $arguments; + -moz-transition: $arguments; + -o-transition: $arguments; + transition: $arguments; +} +@mixin transitions($property: all, $duration:0s, $transitiondelay:0s, $timingfunction:ease-out) +{ + -webkit-transition-property :property; + -webkit-transition-duration :duration; + -webkit-transition-delay :transitiondelay; + -webkit-transition-timing-function:timingfunction; + -moz-transition-property :property; + -moz-transition-duration :duration; + -moz-transition-delay :transitiondelay; + -moz-transition-timing-function:timingfunction; + -o-transition-property :property; + -o-transition-duration :duration; + -o-transition-delay :transitiondelay; + -o-transition-timing-function:timingfunction; + transition-property :property; + transition-duration :duration; + transition-delay :transitiondelay; + transition-timing-function:timingfunction; +} + +@mixin transitions-duration($duration: 0s) +{ + -webkit-transition-duration: $duration; + -moz-transition-duration: $duration; + -o-transition-duration: $duration; + transition-duration: $duration; +} + +@mixin transition-duration($duration: 0.2s) +{ + -webkit-transition-duration: $duration; + -moz-transition-duration: $duration; + -o-transition-duration: $duration; + transition-duration: $duration; +} + +@mixin transitions-delay($delay: 0s) +{ + -webkit-transition-delay: delay; + -moz-transition-delay: delay; + -o-transition-delay: delay; + transition-delay: delay; +} + +// Rotate +// +// ___ .rotation() +// | +// | 1 param : $degree +// +// ___ .rotate() +// | +// | Tentative de compatibilté étendue (fonctionne uniquement pour 0, 90, 180 ou 270 degrés). +// | +// | 1 param : $degree +// | 3 params : $degree / $originX / $originY +// +@mixin rotation($deg:5deg) +{ + -webkit-transform: rotate($deg); + -moz-transform: rotate($deg); + transform: rotate($deg); +} +@mixin rotate($value, $originX:0%, $originY:0%, $unit:'deg') +{ + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = (360 / $value) + 1); //0, 1, 2, or 3 rotate 0, 90, 180 or 270 + -webkit-transform: rotate($value $unit); // $value $unit rather than $value$unit remove the spaces between value and unit. + -moz-transform: rotate($value $unit); + -ms-transform: rotate($value $unit); + -o-transform: rotate($value $unit); + transform: rotate($value $unit); + -webkit-transform-origin:$originX $originY; + -moz-transform-origin:$originX $originY; + -ms-transform-origin:$originX $originY; + -o-transform-origin:$originX $originY; + transform-origin:$originX $originY; +} + +// Scale +@mixin scale($ratio:1.5) +{ + -webkit-transform:scale($ratio); + -moz-transform:scale($ratio); + transform:scale($ratio); +} + +// Translate +@mixin translate($x:0, $y:0) +{ + -webkit-transform: translate($x, $y); + -moz-transform: translate($x, $y); + -ms-transform: translate($x, $y); + -o-transform: translate($x, $y); + transform: translate($x, $y); +} + +// Columns +@mixin columns($colwidth: 250px, $colcount: 0, $colgap: 50px, $columnRuleColor: #EEE, $columnRuleStyle: solid, $columnRuleWidth: 1px) +{ + -webkit-column-width : $colwidth; + -webkit-column-count : $colcount; + -webkit-column-gap : $colgap; + -webkit-column-rule-color: $columnRuleColor; + -webkit-column-rule-style: $columnRuleStyle; + -webkit-column-rule-width: $columnRuleWidth; + -moz-column-width : $colwidth; + -moz-column-count : $colcount; + -moz-column-gap : $colgap; + -moz-column-rule-color: $columnRuleColor; + -moz-column-rule-style: $columnRuleStyle; + -moz-column-rule-width: $columnRuleWidth; + column-width : $colwidth; + column-count : $colcount; + column-gap : $colgap; + column-rule-color: $columnRuleColor; + column-rule-style: $columnRuleStyle; + column-rule-width: $columnRuleWidth; +} + +@mixin edit-link($bc:#CCFF2F,$c:#333) +{ + @include dib; + background-color:$bc; + border:1px solid; + border-color:darken(desaturate($bc, 35%),15%) darken(desaturate($bc, 35%),15%) darken(desaturate($bc, 35%),20%); + @include rounded; + color: $c; + cursor: pointer; + @include font-size(.8em,1em); + font-weight: normal; + padding: 0.25em 0.75em; + margin-top:.5em; + + &:hover{background-color:darken($bc, 20%);} + &:active{ + text-shadow: 0 1px 0 lighten($bc,5%); + background-color:darken($bc, 20%); + //.inset-shadow(0,0,2px,darken($bc,60)); + } +} + +@mixin loader($fc:#000,$bc:#ccc,$h:8px,$radius:0px) +{ + // Safari/chrome + &::-webkit-progress-bar{background-color:$bc;@include rounded($radius);} + &::-webkit-progress-value{background-color:$fc;@include rounded($radius);} + // Firefox + &{background-color:$bc;@include rounded($radius);height:$h;} + &::-moz-progress-bar{background-color:$fc;@include rounded($radius);} +} + +// = +// = +// = +// = +// = +// ===== RETINA ========================================================================================================== + +// retina.less +// A helper mixin for applying high-resolution background images (http://www.retinajs.com) +// @mixin at2x($path, $w: auto, $h: auto) { +// background-image: url($path); +// $at2x_path: $path.split('.').slice(0, $path.split('.').length - 1).join(".") + "$2x" + "." + $path.split('.')[$path.split('.').length - 1]`; + +// $media all and (-webkit-min-device-pixel-ratio : 1.5) { +// background-image: url($at2x_path); +// background-size: $w $h; +// } +// } change this