trungnd
/
iot-web-ui
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 3 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 Commits
14 Branches
Branch: features/camera
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'features/camera'
${ noResults }
iot-web-ui/dist/lot-web-ui/assets/style/scss/common.scss

111 lines
2.3KB
Raw Permalink Blame History 

  1. @mixin mixPaddingMargin($i, $px) {

  2.   // reusable code here

  3.   .mt-#{$i} {

  4.     margin-top: $px * 1px !important;

  5.   }

  6.   .mb-#{$i} {

  7.     margin-bottom: $px * 1px !important;

  8.   }

  9.   .ms-#{$i} {

  10.     margin-left: $px * 1px !important;

  11.   }

  12.   .me-#{$i} {

  13.     margin-right: $px * 1px !important;

  14.   }

  15.   .mx-#{$i} {

  16.     margin-left: $px * 1px !important;

  17.     margin-right: $px * 1px !important;

  18.   }

  19.   .my-#{$i} {

  20.     margin-top: $px * 1px !important;

  21.     margin-bottom: $px * 1px !important;

  22.   }

  23.   .p-#{$i} {

  24.     padding: $px * 1px !important;

  25.   }

  26.   .pt-#{$i} {

  27.     padding-top: $px * 1px !important;

  28.   }

  29.   .pb-#{$i} {

  30.     padding-bottom: $px * 1px !important;

  31.   }

  32.   .ps-#{$i} {

  33.     padding-left: $px * 1px !important;

  34.   }

  35.   .pe-#{$i} {

  36.     padding-right: $px * 1px !important;

  37.   }

  38.   .px-#{$i} {

  39.     padding-left: $px * 1px !important;

  40.     padding-right: $px * 1px !important;

  41.   }

  42.   .py-#{$i} {

  43.     padding-top: $px * 1px !important;

  44.     padding-bottom: $px * 1px !important;

  45.   }

  46.   .mt--#{$i} {

  47.     margin-top: $px * -1px !important;

  48.   }

  49.   .mb--#{$i} {

  50.     margin-bottom: $px * -1px !important;

  51.   }

  52.   .ms--#{$i} {

  53.     margin-left: $px * -1px !important;

  54.   }

  55.   .me--#{$i} {

  56.     margin-right: $px * -1px !important;

  57.   }

  58.   .mx--#{$i} {

  59.     margin-left: $px * -1px !important;

  60.     margin-right: $px * -1px !important;

  61.   }

  62.   .my--#{$i} {

  63.     margin-top: $px * -1px !important;

  64.     margin-bottom: $px * -1px !important;

  65.   }

  66. }

  67. @mixin mixPosition($i, $px) {

  68.   .top-#{$i} {

  69.    top: $px * 1px !important;

  70.   }

  71.   .top--#{$i} {

  72.     top: $px * -1px !important;

  73.   }

  74.   .right-#{$i} {

  75.     right: $px * 1px !important;

  76.   }

  77.   .bottom-#{$i} {

  78.     bottom: $px * 1px !important;

  79.   }

  80.   .bottom--#{$i} {

  81.     bottom: $px * -1px !important;

  82.   }

  83.   .left-#{$i} {

  84.     left: $px * 1px !important;

  85.   }

  86. }

  87. $pxs: 0 0, 1 4, 2 8, 3 16, 4 24, 5 32, 6 48, 7 56, 8 62, 9 70, 10 78 ;

  88. @each $i, $px in $pxs {

  89.   @include mixPaddingMargin($i, $px);

  90.   @include mixPosition($i, $px);

  91. }

  92. 

  93. @each $weight in 100, 200, 300, 400, 500, 600, 700, 800, 900 {

  94.   [mat-weight='#{$weight}'] {

  95.     font-weight: $weight !important;

  96.   }

  97. }

  98. 

  99. @mixin mixFontSize($i, $rem) {

  100.   // reusable code here

  101.   .fz-#{$i} {

  102.    font-size: $rem * 1rem !important;

  103.   }

  104. 

  105. }

  106. 

  107. $rems: 0 0.5, 1 0.75, 2 1, 3 1.25, 4 1.5, 5 1.75, 6 2, 7 2.25, 8 2.5, 9 2.75, 10 3;

  108. @each $i,  $rem in  $rems {

  109.   @include mixFontSize($i, $rem);

  110. }