21b1bf81b9
Instead of redefining font-weights, we override the BS variables and add one extra font-weight in the newly-introduced extended utilities file. After this change all the variables needed replacing and some tweaking was needed to get the same or closely similar result as before this change. By doing so the font-weight classes in the typography file were obsolete and hence removed. Some other font-weight issues which were already there have been fixed in this commit too.
111 lines
3.5 KiB
SCSS
111 lines
3.5 KiB
SCSS
// ================================================
|
|
// ================ Mixins =======================
|
|
// ================================================
|
|
|
|
// Utilities
|
|
// ------------------------------------------------------------------
|
|
|
|
@mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto){
|
|
position: absolute;
|
|
top: $top;
|
|
right: $right;
|
|
bottom: $bottom;
|
|
left: $left;
|
|
}
|
|
|
|
@mixin o-transform-origin($x: 50%, $y: 50%, $z: 0){
|
|
-ms-transform-origin: $x $y $z;
|
|
-webkit-transform-origin: $x $y $z;
|
|
-moz-transform-origin: $x $y $z;
|
|
transform-origin: $x $y $z;
|
|
}
|
|
|
|
@mixin o-transition($property: all, $duration: 0s, $timing-function: ease, $transition-delay: 0s){
|
|
-webkit-transition: $property $duration $timing-function $transition-delay;
|
|
-moz-transition: $property $duration $timing-function $transition-delay;
|
|
-o-transition: $property $duration $timing-function $transition-delay;
|
|
transition: $property $duration $timing-function $transition-delay;
|
|
}
|
|
|
|
// Backgrounds
|
|
// ------------------------------------------------------------------
|
|
|
|
@mixin o-gradient($deg: 99deg , $startColor: $secondary, $endColor: #62495B, $startOffset: 10%, $endOffset: 90%){
|
|
background: mix($startColor, $endColor);
|
|
background: -webkit-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
|
background: -moz-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
|
background: -ms-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
|
background: -o-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
|
background: linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
|
}
|
|
|
|
@mixin o-transform($args){
|
|
-webkit-transform : $args;
|
|
-moz-transform : $args;
|
|
-ms-transform : $args;
|
|
-o-transform : $args;
|
|
transform : $args;
|
|
}
|
|
|
|
//-- add icon
|
|
|
|
@mixin o-inline-icon($margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $font-weight-normal) {
|
|
vertical-align: $v-align;
|
|
margin: $margin;
|
|
@include font-size($font-size);
|
|
font-family: 'icomoon' !important;
|
|
font-weight: $font-weight;
|
|
}
|
|
|
|
//-- fix scroll issue
|
|
|
|
@mixin o-scroll-padding() {
|
|
content: '';
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
margin-top: -$o-headers-height - 10px;
|
|
padding-top: calc(#{$o-headers-height} + 10px);
|
|
}
|
|
|
|
@mixin o-easter-egg($width: 100%, $height: 100%, $img: 'img/poule.svg' ){
|
|
position: relative;
|
|
// Easter Egg on hover 5s
|
|
&:after {
|
|
content: '';
|
|
@include o-position-absolute(auto, 0, 0, 0);
|
|
display: block;
|
|
width: $width;
|
|
height: $height;
|
|
background-image: url('#{$img}');
|
|
background-color: $white;
|
|
background-repeat: no-repeat;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
@include o-transition(all, .5s, ease-out, .5s);
|
|
}
|
|
&:hover:after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
@include o-transition(all, .5s, ease-in, 5s);
|
|
}
|
|
}
|
|
|
|
@mixin o-content-tab-selected {
|
|
font-weight: $font-weight-bolder;
|
|
border-bottom: 1px solid $white;
|
|
border-left: 1px solid $o-gray-border;
|
|
border-right: 1px solid $o-gray-border;
|
|
background: $white;
|
|
}
|
|
|
|
@mixin o-code {
|
|
display: inline-block;
|
|
overflow-wrap: anywhere;
|
|
background: $o-literals-bg;
|
|
font-size: 0.875rem;
|
|
font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
|
|
font-weight: inherit;
|
|
color: inherit;
|
|
}
|