Skip to content

Instantly share code, notes, and snippets.

@zexeder

zexeder/helpers.css

Last active November 17, 2023 09:44
Show Gist options
  • Save zexeder/e13f21d64b23419fef5e732fc4d3b88a to your computer and use it in GitHub Desktop.
Save zexeder/e13f21d64b23419fef5e732fc4d3b88a to your computer and use it in GitHub Desktop.
Download ZIP
scss class helpers
Raw
helpers.css
/* Helpers */
@font-face {
font-family: "Roboto";
src: url("../fonts/Roboto/Roboto-Regular.woff") format("woff");
font-weight: normal;
}
@font-face {
font-family: "Roboto";
src: url("../fonts/Roboto/Roboto-Bold.woff") format("woff");
font-weight: bold;
}
:root {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--success-color: #198754;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #0dcaf0;
--light-color: #f8f9fa;
--dark-color: #212529;
--border-color: #ECF0F1;
--muted-color: #ECF0F1;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family: Roboto;
}
.pos-relative {
position: relative;
}
.pos-absolute {
position: absolute;
}
.top-0 {
top: 0;
}
.left-0 {
left: 0;
}
.overflow-hidden {
overflow: hidden;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* ==========================================================================
Displays
========================================================================== */
.d-flex {
display: flex;
}
.d-grid {
display: grid;
}
.d-block {
display: block;
}
.d-inline-block {
display: inline-block;
}
.btns-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 10px
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.justify-content-between {
justify-content: space-between
}
.justify-content-around {
justify-content: space-around
}
.justify-content-end {
justify-content: end
}
.align-items-center {
align-items: center;
}
.align-self-start {
align-self: start;
}
/* ==========================================================================
Sizing
========================================================================== */
.w-25 {
width: 25%;
}
.w-50 {
width: 50%;
}
.w-75 {
width: 75%;
}
.w-100 {
width: 100%;
}
.w-auto {
width: auto;
}
.mw-100 {
max-width: 100%;
}
.vh-100 {
height: 100vh;
}
/* ==========================================================================
Margin
========================================================================== */
.m-0 {
margin: 0 !important;
}
.my-0 {
margin-top: 0;
margin-bottom: 0;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-3 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-4 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.my-5 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.mt-0 {
margin-top: 0 !important;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 1rem;
}
.mt-4 {
margin-top: 1.5rem;
}
.mt-5 {
margin-top: 3rem;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 1rem;
}
.mb-4 {
margin-bottom: 1.5rem;
}
.mb-5 {
margin-bottom: 3rem;
}
.ml-auto {
margin-left: auto;
}
.ml-0 {
margin-left: 0 !important;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-3 {
margin-left: 1rem;
}
.ml-4 {
margin-left: 1.5rem;
}
.ml-5 {
margin-left: 3rem;
}
.mr-auto {
margin-right: auto;
}
.mr-0 {
margin-right: 0 !important;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 1rem;
}
.mr-4 {
margin-right: 1.5rem;
}
.mr-5 {
margin-right: 3rem;
}
/* ==========================================================================
Padding
========================================================================== */
.p-0 {
padding: 0 !important;
}
.py-0 {
padding-top: 0;
padding-bottom: 0;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-4 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-5 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* ==========================================================================
Text
========================================================================== */
.text-success {
color: var(--success-color);
}
.text-danger,
.text-error {
color: var(--danger-color);
}
.text-muted,
.text-offtop {
color: var(--muted-color);
}
.text-white {
color: #fff;
}
.text-nowrap {
white-space: nowrap;
}
.text-break {
word-wrap: break-word;
word-break: break-word;
}
.text-reset {
color: inherit !important;
}
.font-bold {
font-weight: bold;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: .5rem;
font-weight: 500;
line-height: 1.2;
}
.h1 {
font-size: 2.5rem;
}
.h2 {
font-size: 2rem;
}
.h3 {
font-size: 1.75rem;
}
.h4 {
font-size: 1.5rem;
}
.h5 {
font-size: 1.25rem;
}
.h6 {
font-size: 1rem;
}
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
font-weight: 300;
line-height: 1.2;
}
.display-1 {
font-size: 5rem;
}
.display-2 {
font-size: 4.5rem;
}
.display-3 {
font-size: 4rem;
}
.display-4 {
font-size: 3.5rem;
}
.display-5 {
font-size: 3rem;
}
.display-6 {
font-size: 2.5rem;
}
/* p.lead*/
.lead {
font-size: 1.25rem;
font-weight: 300;
}
/* Lists*/
.no-bullets {
list-style-type: none;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
/* Btn */
.btn {
border: 1px solid transparent;
padding: .375rem .75rem;
border-radius: .25rem;
cursor: pointer;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn:hover {
opacity: .7;
}
.btn-lg {
padding: .5rem 1rem;
font-size: 1.25rem;
border-radius: .3rem;
}
.btn-sm {
padding: .25rem .5rem;
font-size: .875rem;
border-radius: .2rem;
}
[role="button"] {
cursor: pointer;
}
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
cursor: pointer;
}
.btn.disabled,
.btn:disabled,
.blocked {
pointer-events: none;
opacity: .65;
}
.btn-close {
box-sizing: content-box;
width: 1em;
height: 1em;
/* padding: .25em .25em;*/
padding: .5rem .5rem;
margin: -.5rem -.5rem -.5rem auto;
color: #000;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
border: 0;
border-radius: .25rem;
opacity: .5;
}
.btn-close:hover {
color: #000;
text-decoration: none;
opacity: .75;
}
/* END Btn */
.border-top {
border-top: 1px solid var(--border-color);
}
.border-bottom {
border-bottom: 1px solid var(--border-color);
}
table {
border-collapse: collapse;
}
tbody,
td,
tfoot,
th,
thead,
tr {
border-color: inherit;
border-style: solid;
border-width: 0;
}
.table-striped>tbody>tr:nth-of-type(2n+1) {
background-color: inherit
}
.table> :not(caption)>*>* {
padding: .5rem .5rem;
}
.table-bordered> :not(caption)>*>* {
border-width: 0px 1px;
}
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
/* Preloader*/
.main-preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00000090;
z-index: 9999999999;
display: grid;
align-items: center;
justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment