Skip to content

Instantly share code, notes, and snippets.

@zexeder

zexeder/helpers.css

Last active November 17, 2023 09:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zexeder/e13f21d64b23419fef5e732fc4d3b88a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zexeder/e13f21d64b23419fef5e732fc4d3b88a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. zexeder revised this gist Nov 17, 2023. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion links
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,3 @@
    https://github.com/yoksel/common-words
    https://github.com/abartsev/common-css-class-names
    https://github.com/abartsev/common-css-class-names
    https://pagepro.co/blog/how-to-name-your-css-components/
  2. zexeder revised this gist Oct 19, 2023. No changes.
  3. zexeder revised this gist Oct 19, 2023. 2 changed files with 237 additions and 123 deletions.
    357 changes: 235 additions & 122 deletions helpers.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,60 +1,69 @@
    /* Helpers */
    @font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Regular.woff") format("woff");
    font-weight: normal;
    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;
    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;
    --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;

    html,
    body {
    margin: 0;
    padding: 0;
    font-family: Roboto;
    }

    .pos-relative {
    position: relative;
    }

    .pos-absolute {
    position: absolute;
    }

    .top-0 {
    top: 0;
    top: 0;
    }

    .left-0 {
    left: 0;
    left: 0;
    }

    .overflow-hidden {
    overflow: hidden;
    overflow: hidden;
    }

    .clearfix:after {
    content: "";
    display: table;
    clear: both;
    content: "";
    display: table;
    clear: both;
    }

    /* ==========================================================================
    Displays
    ========================================================================== */
    @@ -74,12 +83,14 @@ html, body {
    .d-inline-block {
    display: inline-block;
    }

    .btns-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px
    }

    .flex-column {
    flex-direction: column;
    }
    @@ -95,6 +106,7 @@ html, body {
    .justify-content-around {
    justify-content: space-around
    }

    .justify-content-end {
    justify-content: end
    }
    @@ -113,23 +125,29 @@ html, body {
    .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;
    height: 100vh;
    }

    /* ==========================================================================
    @@ -138,26 +156,32 @@ html, body {
    .m-0 {
    margin: 0 !important;
    }
    .my-0{

    .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;
    @@ -166,81 +190,103 @@ html, body {
    .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;
    }
    @@ -251,26 +297,32 @@ html, body {
    .p-0 {
    padding: 0 !important;
    }
    .py-0{

    .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;
    @@ -290,187 +342,248 @@ html, body {
    .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;
    color: #fff;
    }

    .text-nowrap {
    white-space: nowrap;
    }

    .text-break {
    word-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    word-break: break-word;
    }

    .text-reset {
    color: inherit !important;
    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,
    .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;
    font-size: 2.5rem;
    }

    .h2 {
    font-size: 2rem;
    font-size: 2rem;
    }

    .h3 {
    font-size: 1.75rem;
    font-size: 1.75rem;
    }

    .h4 {
    font-size: 1.5rem;
    font-size: 1.5rem;
    }

    .h5 {
    font-size: 1.25rem;
    font-size: 1.25rem;
    }

    .h6 {
    font-size: 1rem;
    font-size: 1rem;
    }


    .display-1,.display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 300;
    line-height: 1.2;
    .display-1,
    .display-2,
    .display-3,
    .display-4,
    .display-5,
    .display-6 {
    font-weight: 300;
    line-height: 1.2;
    }

    .display-1 {
    font-size: 5rem;
    font-size: 5rem;
    }

    .display-2 {
    font-size: 4.5rem;
    font-size: 4.5rem;
    }

    .display-3 {
    font-size: 4rem;
    font-size: 4rem;
    }

    .display-4 {
    font-size: 3.5rem;
    font-size: 3.5rem;
    }

    .display-5 {
    font-size: 3rem;
    font-size: 3rem;
    }

    .display-6 {
    font-size: 2.5rem;
    font-size: 2.5rem;
    }

    /* p.lead*/
    .lead {
    font-size: 1.25rem;
    font-weight: 300;
    font-size: 1.25rem;
    font-weight: 300;
    }

    /* Lists*/
    .no-bullets {
    list-style-type: none;
    list-style-type: none;
    }

    .list-unstyled {
    padding-left: 0;
    list-style: none;
    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;
    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;
    opacity: .7;
    }

    .btn-lg {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: .3rem;
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: .3rem;
    }

    .btn-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
    }

    [role="button"] {
    cursor: pointer;
    cursor: pointer;
    }
    [type="button"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
    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.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;
    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;
    color: #000;
    text-decoration: none;
    opacity: .75;
    }

    /* END Btn */

    .border-top {
    border-top: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    }

    .border-bottom {
    border-bottom: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    }

    table {
    border-collapse: collapse;
    border-collapse: collapse;
    }
    tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;

    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-striped>tbody>tr:nth-of-type(2n+1) {
    background-color: inherit
    }
    .table > :not(caption) > * > * {
    padding: .5rem .5rem;

    .table> :not(caption)>*>* {
    padding: .5rem .5rem;
    }
    .table-bordered > :not(caption) > * > * {
    border-width: 0px 1px;

    .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;
    -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;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000090;
    z-index: 9999999999;
    display: grid;
    align-items: center;
    justify-content: center;
    }
    3 changes: 2 additions & 1 deletion links
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,2 @@
    https://github.com/yoksel/common-words
    https://github.com/yoksel/common-words
    https://github.com/abartsev/common-css-class-names
  4. zexeder revised this gist Oct 18, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion helpers.css
    View file
    Original file line number Diff line number Diff line change
    @@ -413,7 +413,7 @@ html, body {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    // padding: .25em .25em;
    /* padding: .25em .25em;*/
    padding: .5rem .5rem;
    margin: -.5rem -.5rem -.5rem auto;
    color: #000;
  5. zexeder revised this gist Oct 18, 2023. 2 changed files with 476 additions and 22 deletions.
    476 changes: 476 additions & 0 deletions helpers.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,476 @@
    /* 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;
    }
    22 changes: 0 additions & 22 deletions helpers.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +0,0 @@
    /* Helpers */
    .mb-1 {
    margin-bottom: .25rem;
    }
    .mb-2 {
    margin-bottom: .5rem;
    }
    .mb-3 {
    margin-bottom: 1rem;
    }
    .mb-4 {
    margin-bottom: 1.5rem;
    }
    .mb-5 {
    margin-bottom: 3rem;
    }
    .d-block {
    display: block;
    }
    .d-flex {
    display: flex;
    }
  6. zexeder revised this gist Oct 18, 2023. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions links
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    https://github.com/yoksel/common-words
  7. zexeder created this gist Feb 26, 2021.
    22 changes: 22 additions & 0 deletions helpers.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    /* Helpers */
    .mb-1 {
    margin-bottom: .25rem;
    }
    .mb-2 {
    margin-bottom: .5rem;
    }
    .mb-3 {
    margin-bottom: 1rem;
    }
    .mb-4 {
    margin-bottom: 1.5rem;
    }
    .mb-5 {
    margin-bottom: 3rem;
    }
    .d-block {
    display: block;
    }
    .d-flex {
    display: flex;
    }