_utilities.scss 9.49 KB
Newer Older
arturo's avatar
arturo committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 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 65 66 67 68 69 70 71 72 73 74 75
/// 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/

#app {

  // Width
  .w-0 { width: 0;          }
  .w-1 { width: space-x(1); }
  .w-2 { width: space-x(2); }
  .w-3 { width: space-x(3); }
  .w-4 { width: space-x(4); }
  .w-5 { width: space-x(5); }

  .w-auto     { width: auto;    }
  .w-fluid    { width: 100%;    }
  .w-inherit  { width: inherit; }

  // Height
  .h-0 { height: 0;          }
  .h-1 { height: space-x(1); }
  .h-2 { height: space-x(2); }
  .h-3 { height: space-x(3); }
  .h-4 { height: space-x(4); }
  .h-5 { height: space-x(5); }

  .h-auto     { height: auto;     }
  .h-fluid    { height: 100%;     }
  .h-inherit  { height: inherit;  }

  // Margin
  .m-0 { margin: 0;           }
  .m-1 { margin: space-x(1);  }
  .m-2 { margin: space-x(2);  }
  .m-3 { margin: space-x(3);  }
  .m-4 { margin: space-x(4);  }
  .m-5 { margin: space-x(5);  }

  .mt-0 { margin-top:     0;                      }
  .mr-0 { margin-right:   0;                      }
  .mb-0 { margin-bottom:  0;                      }
  .ml-0 { margin-left:    0;                      }
  .mx-0 { margin-left:    0;  margin-right:   0;  }
  .my-0 { margin-top:     0;  margin-bottom:  0;  }

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

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

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

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 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269
  // Padding
  .p-0 { padding: 0;          }
  .p-1 { padding: space-x(1); }
  .p-2 { padding: space-x(2); }
  .p-3 { padding: space-x(3); }
  .p-4 { padding: space-x(4); }
  .p-5 { padding: space-x(5); }

  .pt-0 { padding-top:    0;                      }
  .pr-0 { padding-right:  0;                      }
  .pb-0 { padding-bottom: 0;                      }
  .pl-0 { padding-left:   0;                      }
  .px-0 { padding-left:   0;  padding-right:  0;  }
  .py-0 { padding-top:    0;  padding-bottom: 0;  }

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

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

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

  // Display
  $displays:
    none,
    inline,
    inline-block,
    block,
    table,
    table-row,
    table-cell,
    flex,
    inline-flex;

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

  // Position
  $positions:
    static,
    relative,
    absolute,
    fixed,
    sticky;

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

  // Overflow
  $overflows: auto, hidden !default;

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

  // Typography
  .text-primary     { color: $primary;      }
  .text-secondary   { color: $secondary;    }
  .text-info        { color: $info;         }
  .text-success     { color: $success;      }
  .text-warning     { color: $warning;      }
  .text-danger      { color: $danger;       }
  .text-dark        { color: $dark;         }
  .text-light       { color: $light;        }

  .text-bold      { font-weight: bold;          }
  .text-italic    { font-style: italic;         }
  .text-underline { text-decoration: underline; }

  .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;  }

  .font-italic     { font-style: italic;          }

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


  // Align
  .align-baseline    { vertical-align: baseline;    }
  .align-top         { vertical-align: top;         }
  .align-middle      { vertical-align: middle;      }
  .align-bottom      { vertical-align: bottom;      }
  .align-text-bottom { vertical-align: text-bottom; }
  .align-text-top    { vertical-align: text-top;    }

  // Background
  .bg-white          { background-color: $white;      }
  .bg-black          { background-color: $black;      }
  .bg-transparent    { background-color: transparent; }

  .bg-primary     { background-color: $primary;      }
  .bg-secondary   { background-color: $secondary;    }
  .bg-info        { background-color: $info;         }
  .bg-success     { background-color: $success;      }
  .bg-warning     { background-color: $warning;      }
  .bg-danger      { background-color: $danger;       }
  .bg-dark        { background-color: $dark;         }
  .bg-light       { background-color: $light;        }

  // Border
  .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;    }

  // Border radius
  .rounded-circle   { border-radius: 50%; }
  .rounded-0        { border-radius: 0;   }

  // Clearfix
  .clearfix       { @include clearfix; }

  // Flex
  .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;          }

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

  .align-items-start    { align-items: flex-start;  }
  .align-items-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: flex-start;     }
  .align-content-end     { align-content: flex-end;       }
  .align-content-center  { align-content: center;         }
  .align-content-between { align-content: space-between;  }
  .align-content-around  { align-content: space-around;   }
  .align-content-stretch { align-content: stretch;        }

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

  // Float
  .float-left   { float: left;  }
  .float-right  { float: right; }
  .float-none   { float: none;  }


  // Visibility
  .visible  { visibility: visible; }
  .hidden   { visibility: hidden;  }

}