clarus-css 0.1.0 → 0.1.1

package/assets/css/forms.css

@@ -1,153 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
-
-@media (min-width: 120px) { 
-
-    .form-row {
-        width: 100%;
-        min-height: 10px;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: baseline;
-        justify-content: flex-start;
-    }
-
-    .form-col {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        align-items: flex-start;
-        justify-content: flex-end;
-    }
-
-    /* LABEL */
-    .form-label {
-        width: 120px;
-        font-family: 'Google Sans Flex', sans-serif;
-        font-size: 0.75rem;
-        font-weight: 400;
-        color: #777777;
-        margin-left: 8px;
-        margin-bottom: 2px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    /* TEXT INFO */
-    .form-text {
-        width: 120px;
-        font-family: 'Google Sans Flex', sans-serif;
-        font-size: 0.65rem;
-        font-weight: 400;
-        color: #bbbbbb;
-        margin-top: 4px;
-        padding: 4px 8px;
-        border-radius: 4px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-        .form-text.valid {
-            background-color: #e6f4ea;
-            color: #1fca7a;
-        }
-        .form-text.invalid {
-            background-color: #fce8e6;
-            color: #d93025;
-        }
-        .form-text.warning {
-            background-color: #fff4e5;
-            color: #f9ab00;
-        }
-        .form-text.info {
-            background-color: #e8f0fe;
-            color: #1a73e8;
-        }
-
-    /* INPUT FIELD */
-    .form-control {
-        height: 38px;
-        font-family: 'Google Sans Flex', sans-serif;
-        font-size: 0.85rem;
-        font-weight: 500;
-        color: #000000;
-        background-color: #ffffff;
-        border: 1px solid #ced4da;
-        padding: 0 7px;
-        border-radius: 4px;
-    }
-        .form-control-sm {
-            height: 30px;
-            font-size: 0.65rem;
-        }
-        .form-control-lg {
-            height: 46px;
-            font-size: 0.85rem;
-        }
-
-    .form-control::placeholder {
-        color: #bbbbbb;
-    }
-        .form-control:disabled::placeholder {
-            color: transparent;
-        }
-    .form-control:focus {
-        border-color: #1a73e8;
-        box-shadow: 0 0 5px 2px rgba(26, 115, 232, 0.2);
-        outline: none;
-    }
-    .form-control:disabled {
-        background-color: #e9ecef;
-        color:#bbbbbb;
-        opacity: 0.4;
-        pointer-events: none;
-        cursor: default;
-    }
-    .form-control:read-only {
-        background-color: #e9ecef;
-    }
-        .form-control:read-only:focus {
-            border-color: #ecdd56;
-            box-shadow: 0 0 5px 2px rgba(232, 211, 26, 0.2);
-            outline: none;
-        }
-        .form-control-plaintext:read-only {
-            background-color: transparent;
-            border: none;
-            box-shadow: none;
-        }
-            .form-control-plaintext:read-only:focus {
-                border-color: transparent;
-                box-shadow: none;
-                outline: none;
-            }
-
-    .form-size-sm {
-        width: 120px;
-    }
-    .form-size-md {
-        width: 180px;
-    }
-    .form-size-lg {
-        width: 240px;
-    }
-    .form-size-xl {
-        width: 300px;
-    }
-    .form-size-xxl {
-        width: 360px;
-    }
-
-}
-
-@media (min-width: 576px) {  }
-
-@media (min-width: 768px) {  }
-
-@media (min-width: 992px) {  }
-
-@media (min-width: 1200px) {  }
-
-@media (min-width: 1400px) {  }

package/assets/css/helpers.css

@@ -1 +0,0 @@
-    

package/assets/css/layout.css

@@ -1,526 +0,0 @@
-@media (min-width: 120px) { 
-    .container,
-    .container-sm,
-    .container-md,
-    .container-lg,
-    .container-xl,
-    .container-xxl,
-    .container-fluid {
-        width: 100%;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        box-sizing: border-box;
-    }
-
-    div {
-        display: flex;
-    }
-
-    .row {
-        flex-direction: row;
-        flex-wrap: nowrap;
-        box-sizing: border-box;
-    }
-        .row-fluid {
-            width: 100%;
-        }
-
-        .row.align-items-start {
-            align-items: flex-start;
-        }
-        .row.align-items-center {
-            align-items: center;
-        }
-        .row.align-items-end {
-            align-items: flex-end;
-        }
-
-        .row.justify-content-start {
-            justify-content: flex-start;
-        }
-        .row.justify-content-center {
-            justify-content: center;
-        }
-        .row.justify-content-end {
-            justify-content: flex-end;
-        }
-        .row.justify-content-around {
-            justify-content: space-around;
-        }
-        .row.justify-content-between {
-            justify-content: space-between;
-        }
-
-    .col,
-    .col-sm,
-    .col-md,
-    .col-lg,
-    .col-xl,
-    .col-xxl {
-        flex-direction: column;
-        width: 100%;
-    }
-    .col-fluid {
-        width: 100%;
-    }
-
-        .col.align-self-start {
-            align-self: flex-start;
-        }
-        .col.align-self-center {
-            align-self: center;
-        }
-        .col.align-self-end {
-            align-self: flex-end;
-        }
-
-    /* MARGINS */
-    .ml-auto {
-        margin-left: auto;
-    }
-        .ml-0 {
-            margin-left: 0;
-        }
-        .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;
-        }
-        .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;
-        }
-    .mx-auto {
-        margin-left: auto;
-        margin-right: auto;
-    }
-        .mx-0 {
-            margin-left: 0;
-            margin-right: 0;
-        }
-        .mx-1 {
-            margin-left: 0.25rem;
-            margin-right: 0.25rem;
-        }
-        .mx-2 {
-            margin-left: 0.5rem;
-            margin-right: 0.5rem;
-        }
-        .mx-3 {
-            margin-left: 1rem;
-            margin-right: 1rem;
-        }
-        .mx-4 {
-            margin-left: 1.5rem;
-            margin-right: 1.5rem;
-        }
-        .mx-5 {
-            margin-left: 3rem;
-            margin-right: 3rem;
-        }
-    .mt-auto {
-        margin-top: auto;
-    }
-        .mt-0 {
-            margin-top: 0;
-        }
-        .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-auto {
-        margin-bottom: auto;
-    }
-        .mb-0 {
-            margin-bottom: 0;
-        }
-        .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;
-        }
-    .my-auto {
-        margin-top: auto;
-        margin-bottom: auto;
-    }
-        .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;
-        }
-    .m-1 {
-        margin: 0.25rem;
-    }
-        .m-2 {
-            margin: 0.5rem;
-        }
-        .m-3 {
-            margin: 1rem;
-        }
-        .m-4 {
-            margin: 1.5rem;
-        }
-        .m-5 {
-            margin: 3rem;
-        }
-
-    /* PADDINGS */
-    .p-0 {
-        padding: 0;
-    }
-        .p-1 {
-            padding: 0.25rem;
-        }
-        .p-2 {
-            padding: 0.5rem;
-        }
-        .p-3 {
-            padding: 1rem;
-        }
-        .p-4 {
-            padding: 1.5rem;
-        }
-        .p-5 {
-            padding: 3rem;
-        }
-    
-    .pl-0 {
-        padding-left: 0;
-    }
-        .pl-1 {
-            padding-left: 0.25rem;
-        }
-        .pl-2 {
-            padding-left: 0.5rem;
-        }
-        .pl-3 {
-            padding-left: 1rem;
-        }
-        .pl-4 {
-            padding-left: 1.5rem;
-        }
-        .pl-5 {
-            padding-left: 3rem;
-        }
-
-    .pr-0 {
-        padding-right: 0;
-    }
-        .pr-1 {
-            padding-right: 0.25rem;
-        }
-        .pr-2 {
-            padding-right: 0.5rem;
-        }
-        .pr-3 {
-            padding-right: 1rem;
-        }
-        .pr-4 {
-            padding-right: 1.5rem;
-        }
-        .pr-5 {
-            padding-right: 3rem;
-        }
-
-    .pt-0 {
-        padding-top: 0;
-    }
-        .pt-1 {
-            padding-top: 0.25rem;
-        }
-        .pt-2 {
-            padding-top: 0.5rem;
-        }
-        .pt-3 {
-            padding-top: 1rem;
-        }
-        .pt-4 {
-            padding-top: 1.5rem;
-        }
-        .pt-5 {
-            padding-top: 3rem;
-        }
-
-    .pb-0 {
-        padding-bottom: 0;
-    }
-        .pb-1 {
-            padding-bottom: 0.25rem;
-        }
-        .pb-2 {
-            padding-bottom: 0.5rem;
-        }
-        .pb-3 {
-            padding-bottom: 1rem;
-        }
-        .pb-4 {
-            padding-bottom: 1.5rem;
-        }
-        .pb-5 {
-            padding-bottom: 3rem;
-        }
-
-    .px-0 {
-        padding-left: 0;
-        padding-right: 0;
-    }
-        .px-1 {
-            padding-left: 0.25rem;
-            padding-right: 0.25rem;
-        }
-        .px-2 {
-            padding-left: 0.5rem;
-            padding-right: 0.5rem;
-        }
-        .px-3 {
-            padding-left: 1rem;
-            padding-right: 1rem;
-        }
-        .px-4 {
-            padding-left: 1.5rem;
-            padding-right: 1.5rem;
-        }
-        .px-5 {
-            padding-left: 3rem;
-            padding-right: 3rem;
-        }
-
-    .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;
-        }
-
-    /* GAPS */
-    .gx-0 {
-        column-gap: 0;
-    }
-    .gx-1 {
-        column-gap: 0.25rem;
-    }
-    .gx-2 {
-        column-gap: 0.5rem;
-    }
-    .gx-3 {
-        column-gap: 1rem;
-    }
-    .gx-4 {
-        column-gap: 1.5rem;
-    }
-    .gx-5 {
-        column-gap: 3rem;
-    }
-    .gy-0 {
-        row-gap: 0;
-    }
-    .gy-1 {
-        row-gap: 0.25rem;
-    }
-    .gy-2 {
-        row-gap: 0.5rem;
-    }
-    .gy-3 {
-        row-gap: 1rem;
-    }
-    .gy-4 {
-        row-gap: 1.5rem;
-    }
-    .gy-5 {
-        row-gap: 3rem;
-    }
-    .g-0 {
-        gap: 0;
-    }
-    .g-1 {
-        gap: 0.25rem;
-    }
-    .g-2 {
-        gap: 0.5rem;
-    }
-    .g-3 {
-        gap: 1rem;
-    }
-    .g-4 {
-        gap: 1.5rem;
-    }
-    .g-5 {
-        gap: 3rem;
-    }
-
-    /* VISIBILITY */
-    .visible {
-        visibility: visible;
-    }
-    .invisible {
-        visibility: hidden;
-    }
-
-    /* DISPLAY */
-    .d-none {
-        display: none;
-    }
-    .d-block {
-        display: block;
-    }
-    .d-inline {
-        display: inline;
-    }
-    .d-inline-block {
-        display: inline-block;
-    }
-    .d-flex {
-        display: flex;
-    }
-
-}   
-
-@media (min-width: 576px) { 
-    .container,
-    .container-sm {
-        width: 540px;
-    }
-
-    .col-sm {
-        max-width: 120px;
-    }
-}
-
-@media (min-width: 768px) { 
-    .container,
-    .container-sm,
-    .container-md {
-        width: 720px;
-    }
-
-    .col-md {
-        max-width: 240px;
-    }
-}
-
-@media (min-width: 992px) { 
-    .container,
-    .container-sm,
-    .container-md,
-    .container-lg {
-        width: 960px;
-    }
-
-    .col-lg {
-        max-width: 360px;
-    }
-}
-
-@media (min-width: 1200px) { 
-    .container,
-    .container-sm,
-    .container-md,
-    .container-lg,
-    .container-xl {
-        width: 1140px;
-    }
-
-    .col-xl {
-        max-width: 480px;
-    }
-}
-
-@media (min-width: 1400px) { 
-    .container,
-    .container-sm,
-    .container-md,
-    .container-lg,
-    .container-xl,
-    .container-xxl {
-        width: 1320px;
-    }
-
-    .col-xxl {
-        max-width: 560px;
-    }
-}