onetwocss/dist/onetwocss.css

CSS framework - Beta

@charset "UTF-8";
/*
 * Author: el Ovejo
 * onetwocss v0.0.6 (https://elovejo.com/onetwocss)
 * License: MIT
*/

:root {
    --ot-one: #0d6efd;
    --ot-two: #6c757d;

    --ot-three: #198754;
    --ot-four: #0dcaf0;
    --ot-five: #ffc107;
    --ot-six: #dc3545;

    --ot-white: #ffffff;
    --ot-black: #000000;
    --ot-light:#f8f9fa;
    --ot-dark:#212529;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*--- Color Utilities ---*/

.text-one { color: var(--ot-one) !important; }
.text-two { color: var(--ot-two) !important; }
.text-three { color: var(--ot-three) !important; }
.text-four { color: var(--ot-four) !important; }
.text-five { color: var(--ot-five) !important; }
.text-six { color: var(--ot-six) !important; }
.text-white { color: var(--ot-white) !important; }
.text-black { color: var(--ot-black) !important; }
.text-light { color: var(--ot-light) !important; }
.text-dark { color: var(--ot-dark) !important; }

.bg-one { background-color: var(--ot-one) !important; }
.bg-two { background-color: var(--ot-two) !important; }
.bg-three { background-color: var(--ot-three) !important; }
.bg-four { background-color: var(--ot-four) !important; }
.bg-five { background-color: var(--ot-five) !important; }
.bg-six { background-color: var(--ot-six) !important; }
.bg-white { background-color: var(--ot-white) !important; }
.bg-black { background-color: var(--ot-black) !important; }
.bg-light { background-color: var(--ot-light) !important; }
.bg-dark { background-color: var(--ot-dark) !important; }

/*--- Container Utilities ---*/

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
    max-width: 100%;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}
@media (min-width: 768px) {
    .container { max-width: 720px; }
}
@media (min-width: 992px) {
    .container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
    max-width: 100%;
}

/*--- Spacing ---*/

.m-0 { margin: 0; }
.m-10 { margin: 10px; }
.m-20 { margin: 20px; }
.m-30 { margin: 30px; }
.m-40 { margin: 40px; }
.m-50 { margin: 50px; }
.m-60 { margin: 60px; }
.m-70 { margin: 70px; }
.m-80 { margin: 80px; }
.m-90 { margin: 90px; }
.m-100 { margin: 100px; }

.mx-0 { margin-left: 0px; margin-right: 0px; }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mx-30 { margin-left: 30px; margin-right: 30px; }
.mx-40 { margin-left: 40px; margin-right: 40px; }
.mx-50 { margin-left: 50px; margin-right: 50px; }
.mx-60 { margin-left: 60px; margin-right: 60px; }
.mx-70 { margin-left: 70px; margin-right: 70px; }
.mx-80 { margin-left: 80px; margin-right: 80px; }
.mx-90 { margin-left: 90px; margin-right: 90px; }
.mx-100 { margin-left: 100px; margin-right: 100px; }

.my-0 { margin-top: 0px; margin-bottom: 0px; }
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-20 { margin-top: 20px; margin-bottom: 20px; }
.my-30 { margin-top: 30px; margin-bottom: 30px; }
.my-40 { margin-top: 40px; margin-bottom: 40px; }
.my-50 { margin-top: 50px; margin-bottom: 50px; }
.my-60 { margin-top: 60px; margin-bottom: 60px; }
.my-70 { margin-top: 70px; margin-bottom: 70px; }
.my-80 { margin-top: 80px; margin-bottom: 80px; }
.my-90 { margin-top: 90px; margin-bottom: 90px; }
.my-100 { margin-top: 100px; margin-bottom: 100px; }

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

.mt-10 { margin-top: 10px; }
.mr-10 { margin-right: 10px; }
.mb-10 { margin-bottom: 10px; }
.ml-10 { margin-left: 10px; }

.mt-20 { margin-top: 20px; }
.mr-20 { margin-right: 20px; }
.mb-20 { margin-bottom: 20px; }
.ml-20 { margin-left: 20px;}

.mt-30 { margin-top: 30px; }
.mr-30 { margin-right: 30px;}
.mb-30 { margin-bottom: 30px; }
.ml-30 { margin-left: 30px; }

.mt-40 { margin-top: 40px;}
.mr-40 { margin-right: 40px; }
.mb-40 { margin-bottom: 40px; }
.ml-40 { margin-left: 40px; }

.mt-50 { margin-top: 50px; }
.mr-50 { margin-right: 50px; }
.mb-50 { margin-bottom: 50px; }
.ml-50 { margin-left: 50px; }

.mt-60 { margin-top: 60px; }
.mr-60 { margin-right: 60px; }
.mb-60 { margin-bottom: 60px; }
.ml-60 { margin-left: 60px; }

.mt-70 { margin-top: 70px; }
.mr-70 { margin-right: 70px; }
.mb-70 { margin-bottom: 70px; }
.ml-70 { margin-left: 70px; }

.mt-80 { margin-top: 80px; }
.mr-80 { margin-right: 80px; }
.mb-80 { margin-bottom: 80px; }
.ml-80 { margin-left: 80px; }

.mt-90 { margin-top: 90px; }
.mr-90 { margin-right: 90px; }
.mb-90 { margin-bottom: 90px; }
.ml-90 { margin-left: 90px; }

.mt-100 { margin-top: 100px; }
.mr-100 { margin-right: 100px; }
.mb-100 { margin-bottom: 100px; }
.ml-100 { margin-left: 100px; }

.p-0 { padding: 0; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.p-50 { padding: 50px; }
.p-60 { padding: 60px; }
.p-70 { padding: 70px; }
.p-80 { padding: 80px; }
.p-90 { padding: 90px; }
.p-100 { padding: 100px; }

.px-0 { padding-left: 0px; padding-right: 0px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.px-30 { padding-left: 30px; padding-right: 30px; }
.px-40 { padding-left: 40px; padding-right: 40px; }
.px-50 { padding-left: 50px; padding-right: 50px; }
.px-60 { padding-left: 60px; padding-right: 60px; }
.px-70 { padding-left: 70px; padding-right: 70px; }
.px-80 { padding-left: 80px; padding-right: 80px; }
.px-90 { padding-left: 90px; padding-right: 90px; }
.px-100 { padding-left: 100px; padding-right: 100px; }

.py-0 { padding-top: 0px; padding-bottom: 0px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.py-30 { padding-top: 30px; padding-bottom: 30px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.py-50 { padding-top: 50px; padding-bottom: 50px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.py-70 { padding-top: 70px; padding-bottom: 70px; }
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.py-90 { padding-top: 90px; padding-bottom: 90px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }

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

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

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

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

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

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

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

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

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

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

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

/*--- Typography ---*/

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.75rem; }

.h1 { font-size: 2rem !important; }
.h2 { font-size: 1.5rem !important; }
.h3 { font-size: 1.25rem !important; }
.h4 { font-size: 1rem !important; }
.h5 { font-size: 0.875rem !important; }
.h6 { font-size: 0.75rem !important; }

.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; }

p, .custom { font-size: 1rem; font-weight: 400;}

.fs-10 { font-size: 10px; }
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-26 { font-size: 26px; }
.fs-28 { font-size: 28px; }
.fs-30 { font-size: 30px; }
.fs-32 { font-size: 32px; }
.fs-34 { font-size: 34px; }
.fs-36 { font-size: 36px; }
.fs-38 { font-size: 38px; }
.fs-40 { font-size: 40px; }
.fs-42 { font-size: 42px; }
.fs-44 { font-size: 44px; }
.fs-46 { font-size: 46px; }
.fs-48 { font-size: 48px; }
.fs-50 { font-size: 50px; }
.fs-52 { font-size: 52px; }
.fs-54 { font-size: 54px; }
.fs-56 { font-size: 56px; }
.fs-58 { font-size: 58px; }
.fs-60 { font-size: 60px; }
.fs-62 { font-size: 62px; }
.fs-64 { font-size: 64px; }
.fs-66 { font-size: 66px; }
.fs-68 { font-size: 68px; }
.fs-70 { font-size: 70px; }
.fs-72 { font-size: 72px; }
.fs-74 { font-size: 74px; }
.fs-76 { font-size: 76px; }
.fs-78 { font-size: 78px; }
.fs-80 { font-size: 80px; }
.fs-82 { font-size: 82px; }
.fs-84 { font-size: 84px; }
.fs-86 { font-size: 86px; }
.fs-88 { font-size: 88px; }
.fs-90 { font-size: 90px; }
.fs-92 { font-size: 92px; }
.fs-94 { font-size: 94px; }
.fs-96 { font-size: 96px; }
.fs-98 { font-size: 98px; }
.fs-100 { font-size: 100px; }

.lh-10 { line-height: 10px; }
.lh-12 { line-height: 12px; }
.lh-14 { line-height: 14px; }
.lh-16 { line-height: 16px; }
.lh-18 { line-height: 18px; }
.lh-20 { line-height: 20px; }
.lh-22 { line-height: 22px; }
.lh-24 { line-height: 24px; }
.lh-26 { line-height: 26px; }
.lh-28 { line-height: 28px; }
.lh-30 { line-height: 30px; }
.lh-32 { line-height: 32px; }
.lh-34 { line-height: 34px; }
.lh-36 { line-height: 36px; }
.lh-38 { line-height: 38px; }
.lh-40 { line-height: 40px; }
.lh-42 { line-height: 42px; }
.lh-44 { line-height: 44px; }
.lh-46 { line-height: 46px; }
.lh-48 { line-height: 48px; }
.lh-50 { line-height: 50px; }
.lh-52 { line-height: 52px; }
.lh-54 { line-height: 54px; }
.lh-56 { line-height: 56px; }
.lh-58 { line-height: 58px; }
.lh-60 { line-height: 60px; }
.lh-62 { line-height: 62px; }
.lh-64 { line-height: 64px; }
.lh-66 { line-height: 66px; }
.lh-68 { line-height: 68px; }
.lh-70 { line-height: 70px; }
.lh-72 { line-height: 72px; }
.lh-74 { line-height: 74px; }
.lh-76 { line-height: 76px; }
.lh-78 { line-height: 78px; }
.lh-80 { line-height: 80px; }
.lh-82 { line-height: 82px; }
.lh-84 { line-height: 84px; }
.lh-86 { line-height: 86px; }
.lh-88 { line-height: 88px; }
.lh-90 { line-height: 90px; }
.lh-92 { line-height: 92px; }
.lh-94 { line-height: 94px; }
.lh-96 { line-height: 96px; }
.lh-98 { line-height: 98px; }
.lh-100 { line-height: 100px; }
.lh-110 { line-height: 110px; }
.lh-120 { line-height: 120px; }

.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

.ta-l { text-align: left; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }

.tt-c { text-transform: capitalize; }
.tt-l { text-transform: lowercase; }
.tt-u { text-transform: uppercase; }
.tt-n { text-transform: none; }

.td-n { text-decoration: none; }
.td-u { text-decoration: underline; }
.td-o { text-decoration: overline; }
.td-l { text-decoration: line-through; }

.fst-n { font-style: normal; }
.fst-i { font-style: italic; }

/*--- Display Utilities ---*/

.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-none { display: none !important; }

@media (min-width: 576px) {
    .d-sm-block { display: block !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-block { display: inline-block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-grid { display: grid !important; }
    .d-sm-none { display: none !important; }
}
@media (min-width: 768px) {
    .d-md-block { display: block !important; }
    .d-md-inline { display: inline !important; }
    .d-md-block { display: inline-block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-grid { display: grid !important; }
    .d-md-none { display: none !important; }
}
@media (min-width: 992px) {
    .d-lg-block { display: block !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-block { display: inline-block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-grid { display: grid !important; }
    .d-lg-none { display: none !important; }
}
@media (min-width: 1200px) {
    .d-xl-block { display: block !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-block { display: inline-block !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-grid { display: grid !important; }
    .d-xl-none { display: none !important; }
}

/*--- Width & Height Utilities ---*/

.w-0 { width: 0 !important; }
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.vw-100 { width: 100vw !important; }
.mw-100 { max-width: 100% !important; }

.h-0 { height: 0 !important; }
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.vh-100 { height: 100vh !important; }
.mh-100 { max-height: 100% !important; }

/*--- Flexbox Utilities ---*/

.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

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

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

/*--- Grid Columns Utilities ---*/

.cols {
    display: grid;
    gap: 1rem;
}

.cols-1 { grid-template-columns: repeat(1, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }


@media (min-width: 576px) {
    .cols-sm-1 { grid-template-columns: repeat(1, 1fr); }
    .cols-sm-2 { grid-template-columns: repeat(2, 1fr); }
    .cols-sm-3 { grid-template-columns: repeat(3, 1fr); }
    .cols-sm-4 { grid-template-columns: repeat(4, 1fr); }
    .cols-sm-5 { grid-template-columns: repeat(5, 1fr); }
    .cols-sm-6 { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 768px) {
    .cols-md-1 { grid-template-columns: repeat(1, 1fr); }
    .cols-md-2 { grid-template-columns: repeat(2, 1fr); }
    .cols-md-3 { grid-template-columns: repeat(3, 1fr); }
    .cols-md-4 { grid-template-columns: repeat(4, 1fr); }
    .cols-md-5 { grid-template-columns: repeat(5, 1fr); }
    .cols-md-6 { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 992px) {
    .cols-lg-1 { grid-template-columns: repeat(1, 1fr); }
    .cols-lg-2 { grid-template-columns: repeat(2, 1fr); }
    .cols-lg-3 { grid-template-columns: repeat(3, 1fr); }
    .cols-lg-4 { grid-template-columns: repeat(4, 1fr); }
    .cols-lg-5 { grid-template-columns: repeat(5, 1fr); }
    .cols-lg-6 { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1200px) {
    .cols-xl-1 { grid-template-columns: repeat(1, 1fr); }
    .cols-xl-2 { grid-template-columns: repeat(2, 1fr); }
    .cols-xl-3 { grid-template-columns: repeat(3, 1fr); }
    .cols-xl-4 { grid-template-columns: repeat(4, 1fr); }
    .cols-xl-5 { grid-template-columns: repeat(5, 1fr); }
    .cols-xl-6 { grid-template-columns: repeat(6, 1fr); }
}