src/wolnelektury/static/2022/styles/utils/_mixins.scss

   1 /* ------------------------------
   2     Util: Mixins
   3 ------------------------------ */
   4
   5 /* Calculate px to rem */
   6 @function calculateRem($size) {
   7   $remSize: $size / $base-font-size;
   8   @return $remSize * 1rem;
   9 }
  10
  11 @mixin font-size($size) {
  12   font-size: $size;
  13   font-size: calculateRem($size);
  14 }
  15
  16
  17
  18 /* Breakpoints */
  19 $tablet:             1024px;
  20
  21
  22 // under...
  23
  24 $break2: 360px;
  25 $break3: 520px;
  26 $break4: 680px;
  27 $break5: 840px;
  28 // somewhere here -- widen?
  29 $break-wide: 1172px;
  30
  31 $screen-md:          1418px;
  32
  33 $B2: $break2;
  34 $B3: $break3;
  35 $B4: $break4;
  36 $B5: $break5;
  37
  38 $break-menu: $break5;
  39 $break-footer: $break5;
  40 $break-flow: $break5;
  41
  42
  43 @mixin rwd($canvas) {
  44     //@if $canvas == 'phone' {
  45     //} @else if $...
  46     @media only screen and (min-width: $canvas) {
  47         @content;
  48     }
  49 }
  50
  51 /*
  52   // Print styles
  53   @else if $canvas == 'print' {
  54     @media print {
  55       @content;
  56     }
  57   }
  58
  59 }
  60 */
  61
  62
  63 .only-l {
  64     display: none;
  65     @include rwd($break5) {
  66         display: block;
  67     }
  68 }
  69 .only-s {
  70     display: block;
  71     @include rwd($break5) {
  72         display: none;
  73     }
  74 }
  75
  76 .lay-row {
  77     display: flex;
  78     flex-direction: row;
  79     column-gap: 16px;
  80 }
  81 .lay-col {
  82     display: flex;
  83     flex-direction: column;
  84 }
  85 .lay-spread {
  86     justify-content: space-between;
  87 }
  88 .lay-l-row {
  89     @include rwd($break5) {
  90         display: flex;
  91         flex-direction: row;
  92     }
  93 }
  94 .lay-l-block {
  95     @include rwd($break5) {
  96         display: block;
  97     }
  98 }
  99 .lay-s-col-rev {
 100     flex-direction: column-reverse;
 101     @include rwd($break5) {
 102         flex-direction: row;
 103     }
 104 }
 105 .lay-grow {
 106     flex-grow: 1;
 107 }
 108
 109
 110
 111 $max-logical-viewport-width: 1140px + 32px;
 112
 113 @mixin lvw($property, $size) {
 114     #{$property}: $size * $max-logical-viewport-width / 100;
 115
 116     @include rwd($break-wide) {
 117         #{$property}: $size * 1vw;
 118     }
 119 }