Last active
November 17, 2023 09:44
-
-
Save zexeder/e13f21d64b23419fef5e732fc4d3b88a to your computer and use it in GitHub Desktop.
scss class helpers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
https://github.com/yoksel/common-words | |
https://github.com/abartsev/common-css-class-names | |
https://pagepro.co/blog/how-to-name-your-css-components/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment