src/assets/scss/mixins/_custom.scss

   1 /*
   2  Copyright 2020 TATA ELXSI
   3
   4  Licensed under the Apache License, Version 2.0 (the 'License');
   5  you may not use this file except in compliance with the License.
   6  You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10  Unless required by applicable law or agreed to in writing, software
  11  distributed under the License is distributed on an "AS IS" BASIS,
  12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  See the License for the specific language governing permissions and
  14  limitations under the License.
  15
  16  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17  */
  18 /**
  19  * @ file contains custom @mixin functions
  20  */
  21
  22 // @mixin for container width and height
  23 @mixin wh-value($width, $height) {
  24     width: $width;
  25     height: $height;
  26 }
  27
  28 // @mixin for padding values
  29 @mixin padding-value($top, $right, $bottom, $left) {
  30     padding: $top+px $right+px $bottom+px $left+px;
  31 }
  32
  33 // @mixin for any padding values
  34 @mixin padding-percentage-value($top: null, $right: null, $bottom: null, $left: null) {
  35     padding: $top $right $bottom $left;
  36 }
  37
  38 // @mixin for margin values
  39 @mixin margin-value($top, $right, $bottom, $left) {
  40     margin: $top+px $right+px $bottom+px $left+px;
  41 }
  42
  43 // @mixin for margin values in percentage
  44 @mixin margin-value-percentage($top: null, $right: null, $bottom: null, $left: null) {
  45     margin: $top $right $bottom $left;
  46 }
  47
  48 // @mixin for center-align element/container
  49 @mixin align-center($topbottom, $width) {
  50     margin: $topbottom auto;
  51     width: $width;
  52 }
  53
  54 // @mixin for center-align with top and bottom margin element/container
  55 @mixin tband-align-center($topbottom, $width, $bottommargin) {
  56     margin: $topbottom auto $bottommargin;
  57     width: $width;
  58 }
  59
  60 // @mixin for transform style
  61 @mixin transform($x, $y, $z)
  62 {
  63     transform: translate3d($x+px, $y+px, $z+px);
  64     -webkit-transform: translate3d($x+px, $y+px, $z+px);
  65 }
  66
  67 // @mixin for font-family setting
  68 @mixin font-family($font){
  69     font-family: $font;
  70 }
  71
  72 // @mixin for font-style setting
  73 @mixin font-style($font-style){
  74     font-style: $font-style;
  75 }
  76
  77 // Mixin for font & its attributes
  78 @mixin font($family, $size, $weight) {
  79     font-family: $family;
  80     font-size: $size;
  81     font-weight: $weight;
  82 }
  83
  84 // @mixin for line-height setting
  85 @mixin line-height($line-height){
  86     line-height: $line-height;
  87 }
  88
  89 // @mixin for letter-spacing setting
  90 @mixin letter-spacing($letter-spacing){
  91     letter-spacing: $letter-spacing;
  92 }
  93
  94 // @mixin to manipulate placeholder attribute in input element
  95 @mixin placeholder {
  96   ::-webkit-input-placeholder {@content}
  97   :-moz-placeholder           {@content}
  98   ::-moz-placeholder          {@content}
  99   :-ms-input-placeholder      {@content}
 100 }
 101
 102 // mixins for user-select
 103 @mixin user-select($select) {
 104     @each $pre in -webkit-, -moz-, -ms-, -o- {
 105       #{$pre + user-select}: #{$select};
 106     }
 107     #{user-select}: #{$select};
 108   }