_utilities.scss 10.8 KB
Newer Older
arturo's avatar
arturo committed
1 2 3 4 5 6 7 8 9 10 11 12 13
/// Utility classes
///
/// Pattern strategies:
///
///     [ ] "!important" keyword → «using a sledgehammer to hit a nail
///         in the wall»
///     [x] rule precedence based on higher selector (ie. "#id")
///     [ ] adding an extra cascade layer → not fully browser compliant
///
///
/// @https://sebastiandedeyne.com/why-we-use-important-with-tailwind/
/// @https://css-tricks.com/css-cascade-layers/

arturo's avatar
arturo committed
14 15
#app,
#portal {
arturo's avatar
arturo committed
16

arturo's avatar
arturo committed
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
  /// Width
  $widths:
    auto,
    inherit,
    min-content,
    max-content,
    fit-content;

  @each $value in $widths {
    .w-#{$value} { width: $value; }
  }

  @for $i from 0 through 10 {
    .w-#{$i} { width: space-x($i) }
  }
arturo's avatar
arturo committed
32

arturo's avatar
arturo committed
33
  .w-0        { width: 0;           }
34 35
  .w-fluid,
  .w-100      { width: 100%;        }
arturo's avatar
arturo committed
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

  .w-1\/2	    { width: 50%;         }
  .w-1\/3	    { width: 33.333333%;  }
  .w-2\/3	    { width: 66.666667%;  }
  .w-1\/4	    { width: 25%;         }
  .w-2\/4	    { width: 50%;         }
  .w-3\/4	    { width: 75%;         }
  .w-1\/5	    { width: 20%;         }
  .w-2\/5	    { width: 40%;         }
  .w-3\/5	    { width: 60%;         }
  .w-4\/5	    { width: 80%;         }
  .w-1\/6	    { width: 16.666667%;  }
  .w-2\/6  	  { width: 33.333333%;  }
  .w-3\/6	    { width: 50%;         }
  .w-4\/6	    { width: 66.666667%;  }
  .w-5\/6	    { width: 83.333333%;  }
  .w-1\/12	  { width: 8.333333%;   }
  .w-2\/12	  { width: 16.666667%;  }
  .w-3\/12	  { width: 25%;         }
  .w-4\/12	  { width: 33.333333%;  }
  .w-5\/12	  { width: 41.666667%;  }
  .w-6\/12	  { width: 50%;         }
  .w-7\/12	  { width: 58.333333%;  }
  .w-8\/12	  { width: 66.666667%;  }
  .w-9\/12	  { width: 75%;         }
  .w-10\/12	  { width: 83.333333%;  }
  .w-11\/12	  { width: 91.666667%;  }

  /// Height
arturo's avatar
arturo committed
65
  .h-auto     { height: auto;     }
arturo's avatar
arturo committed
66 67
  .h-fluid,
  .h-100      { height: 100%;     }
arturo's avatar
arturo committed
68 69
  .h-inherit  { height: inherit;  }

arturo's avatar
arturo committed
70 71 72 73
  @for $i from 0 through 10 {
    .h-#{$i} { height: space-x($i) }
  }

arturo's avatar
arturo committed
74

arturo's avatar
arturo committed
75
  /// Margin
arturo's avatar
arturo committed
76 77 78
  .ml-auto, .mx-auto { margin-left: auto;  }
  .mr-auto, .mx-auto { margin-right: auto; }

arturo's avatar
arturo committed
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
  @for $i from 0 through 10 {
    .m-#{$i}   { margin: space-x($i);                                          }

    .mt-#{$i}  { margin-top:     space-x($i);                                  }
    .mr-#{$i}  { margin-right:   space-x($i);                                  }
    .mb-#{$i}  { margin-bottom:  space-x($i);                                  }
    .ml-#{$i}  { margin-left:    space-x($i);                                  }
    .mx-#{$i}  { margin-left:    space-x($i);  margin-right:   space-x($i);    }
    .my-#{$i}  { margin-top:     space-x($i);  margin-bottom:  space-x($i);    }


    .m-#{$i}\.5   { margin: space-x($i + .5);                                  }

    .mt-#{$i}\.5  { margin-top:     space-x($i + .5);                          }
    .mr-#{$i}\.5  { margin-right:   space-x($i + .5);                          }
    .mb-#{$i}\.5  { margin-bottom:  space-x($i + .5);                          }
    .ml-#{$i}\.5  { margin-left:    space-x($i + .5);                          }
    .mx-#{$i}\.5  { margin-left:    space-x($i + .5);
                    margin-right:   space-x($i + .5);                          }
    .my-#{$i}\.5  { margin-top:     space-x($i + .5);
                    margin-bottom:  space-x($i + .5);                          }
  }

  /// Padding
  @for $i from 0 through 10 {
    .p-#{$i}   { padding: space-x($i);                                         }

    .pt-#{$i}  { padding-top:     space-x($i);                                 }
    .pr-#{$i}  { padding-right:   space-x($i);                                 }
    .pb-#{$i}  { padding-bottom:  space-x($i);                                 }
    .pl-#{$i}  { padding-left:    space-x($i);                                 }
    .px-#{$i}  { padding-left:    space-x($i);  padding-right:   space-x($i);  }
    .py-#{$i}  { padding-top:     space-x($i);  padding-bottom:  space-x($i);  }
  }

  /// Display
arturo's avatar
arturo committed
115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
  $displays:
    none,
    inline,
    inline-block,
    block,
    table,
    table-row,
    table-cell,
    flex,
    inline-flex;

  @each $value in $displays {
    .d-#{$value} { display: $value; }
  }

arturo's avatar
arturo committed
130
  /// Position
arturo's avatar
arturo committed
131 132 133 134 135 136 137 138 139 140 141
  $positions:
    static,
    relative,
    absolute,
    fixed,
    sticky;

  @each $value in $positions {
    .position-#{$value} { position: $value; }
  }

142 143 144 145 146 147 148 149 150 151 152 153 154
  /// Placement
  $placements:
    top,
    right,
    bottom,
    left;

  @each $value in $placements {
    .#{$value}-0 { #{$value}: 0; }
  }

  // Overflow
  $overflows: auto, hidden;
arturo's avatar
arturo committed
155 156 157 158 159

  @each $value in $overflows {
    .overflow-#{$value} { overflow: $value; }
  }

arturo's avatar
arturo committed
160
  /// Typography
arturo's avatar
arturo committed
161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
  .text-bold      { font-weight: bold;          }
  .text-italic    { font-style: italic;         }

  .text-justify  { text-align: justify; }
  .text-wrap     { white-space: normal; }
  .text-nowrap   { white-space: nowrap; }

  .text-left   { text-align: left;    }
  .text-right  { text-align: right;   }
  .text-center { text-align: center;  }

  .text-lowercase  { text-transform: lowercase;   }
  .text-uppercase  { text-transform: uppercase;   }
  .text-capitalize { text-transform: capitalize;  }

  .text-decoration-none       { text-decoration: none;      }
  .text-decoration-underline  { text-decoration: underline; }

arturo's avatar
arturo committed
179 180 181 182
  /// Font-size
  @for $unit from 1 through 40 {
    .font-size-#{$unit * 5} { font-size: #{$unit * 5%}; }
  }
arturo's avatar
arturo committed
183

arturo's avatar
arturo committed
184 185 186 187 188 189 190 191 192 193 194 195 196
  /// Line-height
  $line-heights:
    normal,
    inherit;

  @each $value in $line-heights {
    .line-height-#{$value} { line-height: normal; }
  }

  @for $unit from 1 through 20 {
    .line-height-#{$unit + 0} { line-height: #{$unit * + 0}; }
  }

197 198 199 200 201 202 203 204 205 206 207 208
  /// Vertical Alignment
  $vertical-aligns:
    baseline,
    top,
    middle,
    bottom,
    text-bottom,
    text-top;

  @each $value in $vertical-aligns {
    .vertical-align-#{$value} { vertical-align: $value; }
  }
arturo's avatar
arturo committed
209

arturo's avatar
arturo committed
210
  /// Color (keep ".text" classes for Bootstrap legacy)
211 212
  .text-white, .color-white { color: $white; }
  .text-black, .color-black { color: $black; }
arturo's avatar
arturo committed
213 214

  @each $theme, $value in $palette-semantic {
215
    .text-#{$theme}, .color-#{$theme} { color: $value; }
arturo's avatar
arturo committed
216 217 218
  }

  @each $theme, $value in $palette-gray {
219
    .text-gray-#{$theme}, .color-gray-#{$theme} { color: $value; }
arturo's avatar
arturo committed
220 221 222
  }

  @each $theme, $value in $palette-pastel {
223
    .text-pastel-#{$theme}, .color-pastel-#{$theme} { color: $value; }
arturo's avatar
arturo committed
224 225 226
  }

  /// Background
arturo's avatar
arturo committed
227 228 229 230
  .bg-white          { background-color: $white;      }
  .bg-black          { background-color: $black;      }
  .bg-transparent    { background-color: transparent; }

arturo's avatar
arturo committed
231
  @each $theme, $value in $palette-semantic {
232 233 234 235 236 237 238 239
    .bg-#{$theme} { background-color: $value; }
  }

  @each $theme, $value in $palette-gray {
    .bg-gray-#{$theme} { background-color: $value; }
  }
  @each $theme, $value in $palette-pastel {
    .bg-pastel-#{$theme} { background-color: $value; }
arturo's avatar
arturo committed
240
  }
arturo's avatar
arturo committed
241

arturo's avatar
arturo committed
242
  /// Border
arturo's avatar
arturo committed
243 244 245 246 247 248
  .border-0        { border: 0;         }
  .border-top-0    { border-top: 0;     }
  .border-right-0  { border-right: 0;   }
  .border-bottom-0 { border-bottom: 0;  }
  .border-left-0   { border-left: 0;    }

arturo's avatar
arturo committed
249 250 251 252
  @each $theme, $value in $palette-semantic {
    .border-#{$theme} { border-color: $value;}
  }

253 254 255 256 257 258 259
  @each $theme, $value in $palette-gray {
    .border-gray-#{$theme} { border-color: $value;}
  }
  @each $theme, $value in $palette-pastel {
    .border-pastel-#{$theme} { border-color: $value;}
  }

arturo's avatar
arturo committed
260
  /// Border radius
arturo's avatar
arturo committed
261 262 263
  .rounded-circle   { border-radius: 50%; }
  .rounded-0        { border-radius: 0;   }

arturo's avatar
arturo committed
264
  /// Clearfix
arturo's avatar
arturo committed
265 266
  .clearfix       { @include clearfix; }

arturo's avatar
arturo committed
267
  /// Flex
arturo's avatar
arturo committed
268 269 270 271 272 273 274 275 276 277 278 279 280 281
  .flex-row            { flex-direction: row;             }
  .flex-column         { flex-direction: column;          }
  .flex-row-reverse    { flex-direction: row-reverse;     }
  .flex-column-reverse { flex-direction: column-reverse;  }

  .flex-wrap         { flex-wrap: wrap;         }
  .flex-nowrap       { flex-wrap: nowrap;       }
  .flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .flex-fill         { flex: 1 1 auto;          }
  .flex-grow-0       { flex-grow: 0;            }
  .flex-grow-1       { flex-grow: 1;            }
  .flex-shrink-0     { flex-shrink: 0;          }
  .flex-shrink-1     { flex-shrink: 1;          }

282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320
  .justify-content-start          { justify-content: start;           }
  .justify-content-end            { justify-content: end;             }
  .justify-content-flex-start     { justify-content: flex-start;      }
  .justify-content-flex-end       { justify-content: flex-end;        }
  .justify-content-center         { justify-content: center;          }
  .justify-content-space-between  { justify-content: space-between;   }
  .justify-content-space-around   { justify-content: space-around;    }

  .align-items-start              { align-items: start;               }
  .align-items-end                { align-items: end;                 }
  .align-items-flex-start         { align-items: flex-start;          }
  .align-items-flex-end           { align-items: flex-end;            }
  .align-items-center             { align-items: center;              }
  .align-items-baseline           { align-items: baseline;            }
  .align-items-stretch            { align-items: stretch;             }

  .align-content-start            { align-content: start;             }
  .align-content-end              { align-content: end;               }
  .align-content-flex-start       { align-content: flex-start;        }
  .align-content-flex-end         { align-content: flex-end;          }
  .align-content-center           { align-content: center;            }
  .align-content-stretch          { align-content: stretch;           }
  .align-content-space-between    { align-content: space-between;     }
  .align-content-space-around     { align-content: space-around;      }

  .align-self-auto                { align-self: auto;                 }
  .align-self-start               { align-self: start;                }
  .align-self-end                 { align-self: end;                  }
  .align-self-flex-start          { align-self: flex-start;           }
  .align-self-flex-end            { align-self: flex-end;             }
  .align-self-center              { align-self: center;               }
  .align-self-baseline            { align-self: baseline;             }
  .align-self-stretch             { align-self: stretch;              }

  @for $i from 0 through 10 {
    .gap-#{$i}          { gap: space-x($i);         }
    .column-gap-#{$i}   { column-gap: space-x($i);  }
    .row-gap-#{$i}      { row-gap: space-x($i);     }
  }
arturo's avatar
arturo committed
321

arturo's avatar
arturo committed
322
  /// Float
arturo's avatar
arturo committed
323 324 325 326
  .float-left   { float: left;  }
  .float-right  { float: right; }
  .float-none   { float: none;  }

arturo's avatar
arturo committed
327
  /// Visibility
arturo's avatar
arturo committed
328 329
  .visible  { visibility: visible; }
  .hidden   { visibility: hidden;  }
arturo's avatar
arturo committed
330

331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347
  /// Cursor
  $cursors:
    crosshair,
    text,
    move,
    grab,
    grabbing,
    not-allowed,
    all-scroll,
    ew-resize,
    ns-resize,
    pointer;

  @each $value in $cursors {
    .cursor-#{$value} { cursor: $value; }
  }

arturo's avatar
arturo committed
348 349 350 351 352 353
  /// Content helpers
  .virtual-space {
    &::after {
      content: "\200B";
    }
  }
arturo's avatar
arturo committed
354
}