wj-elements 0.1.134 → 0.1.136

package/dist/styles.css

@@ -1,849 +0,0 @@
-/*
-[ Standard Element ]
-*/
-
-html {
-    font-size: 100%;
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-}
-body {
-    color: var(--wje-color-contrast-8);
-    font-family: var(--wje-font-family);
-    font-size: var(--wje-font-size);
-    font-weight: normal;
-    letter-spacing: 0.01em;
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
-    -webkit-font-feature-settings: 'kern' 1;
-    -moz-font-feature-settings: 'kern' 1;
-    margin: 0;
-    padding: 0 !important;
-}
-/* Headings
-------------------------------------
-*/
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    margin: 0.625rem 0;
-    font-family: var(--wje-font-family);
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
-    font-weight: 500;
-    color: inherit;
-    display: inline-block;
-}
-h1 {
-    font-size: var(--wje-font-size-2x-large);
-    line-height: 44px;
-    letter-spacing: -0.0141279em;
-}
-h2 {
-    font-size: var(--wje-font-size-x-large);
-    line-height: 34px;
-    letter-spacing: -0.021em;
-}
-h3 {
-    font-size: var(--wje-font-size-large);
-    line-height: 28px;
-    letter-spacing: -0.0114923em;
-}
-h4 {
-    font-size: var(--wje-font-size-large);
-    line-height: 26px;
-    letter-spacing: -0.00865734em;
-}
-h5 {
-    font-size: var(--wje-font-size-medium);
-    line-height: 24px;
-    letter-spacing: -0.00630069em;
-}
-h3 small,
-h4 small,
-h5 small {
-    font-weight: 300;
-}
-h1.block,
-h2.block,
-h3.block,
-h4.block,
-h5.block,
-h6.block {
-    padding-bottom: 0.625rem;
-}
-/* Lins and Others
-------------------------------------
-*/
-a {
-    text-shadow: none !important;
-    color: var(--wje-color-primary-11);
-    transition:
-        color 0.1s linear 0s,
-        background-color 0.1s linear 0s,
-        opacity 0.2s linear 0s !important;
-    font-weight: 500;
-}
-a:focus,
-a:hover,
-a:active {
-    color: var(--wje-color-primary);
-}
-
-a,
-a:focus,
-a:hover,
-a:active {
-    outline: 0 !important;
-    text-decoration: none;
-}
-
-a.no-style {
-    color: inherit;
-    font-weight: normal;
-}
-
-br {
-    line-height: normal;
-    clear: both;
-}
-
-p {
-    display: block;
-    color: inherit;
-    font-size: var(--wje-font-size);
-    font-weight: normal;
-    letter-spacing: 0.00177646em;
-    line-height: 21px;
-    margin: 0 0 0.625rem 0;
-    font-style: normal;
-    white-space: normal;
-}
-
-small,
-.small {
-    line-height: 18px;
-    font-size: 85.714%;
-}
-
-label {
-    &.inline {
-        display: inline-block;
-        position: relative;
-        top: 0;
-        font-size: 13px;
-    }
-}
-
-ul,
-ol {
-    margin-bottom: 0.625rem;
-    & > li {
-        padding-left: 3px;
-        line-height: 24px;
-    }
-    &.lg-icon {
-        & > li {
-            font-size: 21px;
-            & span {
-                font-size: 14px;
-            }
-        }
-    }
-    &.no-style {
-        list-style: none;
-        padding-left: 5px;
-    }
-}
-
-address {
-    margin-bottom: 0;
-    a {
-        color: var(--wje-color-contrast-8);
-    }
-}
-
-blockquote {
-    padding: 4px 0 0 18px;
-    border-left: 0;
-    &:before {
-        content: '\e95d';
-        font-size: 20px;
-        margin-right: 6px;
-        float: left;
-        position: relative;
-        top: -12px;
-    }
-    p {
-        font-size: 16px;
-        margin-bottom: 4px;
-    }
-    small {
-        line-height: 29px;
-        color: var(--wje-color-contrast-8);
-        &:before {
-            content: '—';
-            margin-right: 6px;
-        }
-    }
-    &.pull-right {
-        border-right: 0;
-        &:before {
-            float: right;
-            content: '';
-            margin-left: 6px;
-            margin-right: 0;
-        }
-        small {
-            padding-right: 30px;
-            &:after {
-                content: '';
-            }
-        }
-    }
-}
-hr {
-    border-color: var(--wje-border-color);
-    &.double {
-        border-width: 2px;
-    }
-    &.dotted {
-        border-style: dotted none none;
-    }
-}
-
-.ff-sup {
-    font-feature-settings:
-        'kern' 1,
-        'sups' 1;
-    -webkit-font-feature-settings:
-        'kern' 1,
-        'sups' 1;
-    -moz-font-feature-settings:
-        'kern' 1,
-        'sups' 1;
-}
-
-.ff-sub {
-    font-feature-settings:
-        'kern' 1,
-        'subs' 1;
-    -webkit-font-feature-settings:
-        'kern' 1,
-        'subs' 1;
-    -moz-font-feature-settings:
-        'kern' 1,
-        'subs' 1;
-}
-
-/* Standard HTML Typography tags
-------------------------------------
-*/
-
-code {
-    color: var(--wje-color-contrast-6);
-    background-color: var(--wje-color);
-    font-size: 97%;
-    position: relative;
-    line-height: inherit;
-    border-radius: 3px;
-    padding: 5px 7px;
-    margin: 0;
-    &:hover {
-        color: var(--wje-color-complete);
-    }
-    &.code-sm {
-        padding: 3px 6px;
-    }
-}
-
-figcaption {
-    font-size: 13px;
-    margin-top: 0.625rem;
-    font-weight: 400;
-    display: block;
-    letter-spacing: 0.008em;
-    text-align: center;
-    color: var(--wje-color-contrast-6);
-    line-height: 1.46;
-}
-
-em {
-    font-style: italic !important;
-    font-family: inherit;
-    font-weight: inherit;
-}
-
-ins {
-    font-family: var(--wje-font-family);
-    border-bottom: 1px solid #d0d0d0;
-    text-decoration: none;
-    color: var(--wje-color-contrast-8);
-    font-weight: normal;
-    font-size: 94%;
-}
-
-cite {
-    font-family: var(--wje-font-family);
-    font-weight: 300;
-    color: var(--wje-color-contrast-6);
-    text-decoration: none;
-    font-style: normal;
-    hanging-punctuation: first;
-}
-
-sup {
-    top: -0.28em;
-    font-size: 70%;
-}
-
-sub {
-    bottom: 0.03em;
-}
-
-var {
-    font-family: var(--wje-font-family);
-    font-feature-settings:
-        'calt' 1,
-        'tnum' 1,
-        'frac' 1,
-        'case' 1,
-        'ss01' 1,
-        'cv11' 1;
-}
-
-abbr {
-    text-decoration: none;
-    letter-spacing: 0.01em;
-    background-color: transparent;
-    border-bottom: 2px solid #ffba5a;
-    transition-property: color, background, border;
-    transition-duration: 0.15s;
-    transition-timing-function: linear;
-    color: var(--wje-color-contrast-8);
-}
-
-q {
-    font-family: var(--wje-font-family);
-    font-weight: 500;
-    font-size: 20px;
-    hanging-punctuation: first;
-
-    &:before {
-        content: '\201C';
-        color: rgba(0, 0, 0, 0.44);
-        font-size: 35px;
-    }
-
-    &:after {
-        content: '\201D';
-        font-size: 35px;
-        color: rgba(0, 0, 0, 0.44);
-    }
-}
-audio {
-    margin-top: 42px;
-}
-hr {
-    clear: both;
-    margin-bottom: 42px;
-    margin-top: 42px;
-    border: 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.13);
-}
-address {
-    font-family: var(--wje-font-family);
-    font-style: normal;
-    margin: 0 0 1.75em;
-    font-size: 14px;
-    line-height: 24px;
-    margin-top: 24px;
-}
-abbr {
-    text-decoration: none;
-    letter-spacing: 0.01em;
-    background-color: transparent;
-    border-bottom: 2px solid #ffba5a;
-    transition-property: color, background, border;
-    transition-duration: 0.15s;
-    transition-timing-function: linear;
-    color: var(--wje-color-contrast-8);
-}
-
-acronym {
-    text-decoration: none;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    background-color: transparent;
-    border-bottom: 2px solid #ffba5a;
-    transition-property: color, background, border;
-    transition-duration: 0.15s;
-    transition-timing-function: linear;
-    color: var(--wje-color-contrast-8);
-}
-
-pre {
-    tab-size: 4;
-    font-size: 85.714%;
-    overflow-x: auto;
-    font-family: monospace, monospace;
-    line-height: 1.7;
-    counter-reset: line;
-    background-color: var(--wje-color-contrast-3) er;
-    color: var(--wje-color-contrast-8);
-    margin-inline: 0;
-    padding: 1rem 1.25rem;
-    border-radius: 3px;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-}
-
-dt {
-    font-weight: 700;
-    margin-bottom: 5px;
-}
-
-dd {
-    margin: 0 0 1.75em;
-}
-
-kbd {
-    font-size: 85.714%;
-    font-family: var(--wje-font-family);
-    position: relative;
-    line-height: 34px;
-    top: -3px;
-    letter-spacing: 0.01em;
-    padding: 5px 7px;
-    margin: 0;
-    color: rgba(0, 0, 0, 0.53);
-    background-color: #fff;
-    border-radius: 3px;
-    box-shadow:
-        0 2px 0 1px #c7c7c7,
-        0 1px 0 1px rgba(0, 0, 0, 0.15),
-        0 0 0 1px #ececec;
-}
-
-/* Types
-------------------------------------
-*/
-
-.overline {
-    text-transform: uppercase;
-    display: inline-block;
-    letter-spacing: 0.06em;
-    font-size: 11px;
-}
-
-/* Font Sizes
-------------------------------------
-*/
-
-.small-text {
-    font-size: 12px !important;
-    letter-spacing: 0.00849077em;
-    line-height: 18px;
-    a {
-        text-decoration: underline;
-    }
-}
-.normal-text {
-    font-size: 13px !important;
-}
-.large-text {
-    font-size: 15px !important;
-}
-
-/* Font Weights
-------------------------------------
- */
-
-.normal {
-    font-weight: normal !important;
-}
-.semi-bold {
-    font-weight: 500 !important;
-}
-.bold {
-    font-weight: 600 !important;
-}
-.light {
-    font-weight: 300 !important;
-}
-
-/* Misc
-------------------------------------
-*/
-
-.all-caps {
-    text-transform: uppercase;
-    letter-spacing: 0.07em !important;
-}
-.text-uppercase {
-    text-transform: uppercase !important;
-    letter-spacing: 0.07em !important;
-}
-.muted {
-    color: var(--wje-color-contrast-6);
-}
-.hint-text {
-    opacity: 0.76 !important;
-}
-.no-decoration {
-    text-decoration: none !important;
-}
-
-.text-ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-/* Gradients
-------------------------------------
-*/
-.gradient-grey {
-    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);
-}
-.gradient-black {
-    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);
-}
-
-/* Other Colors
-------------------------------------
-*/
-.bg-black {
-    background-color: var(--wje-color-black) !important;
-    color: var(--wje-color-contrast-0);
-}
-.bg-white {
-    background-color: var(--wje-color-contrast-0) !important;
-    color: var(--wje-color-contrast-8);
-}
-.bg-transparent {
-    background-color: transparent !important;
-}
-
-/* Text Colors */
-.link {
-    opacity: 0.7;
-    &:hover {
-        opacity: 1;
-    }
-}
-
-/* Text Aligngments
-------------------------------------
-*/
-
-.text-right {
-    text-align: right !important;
-}
-.text-left {
-    text-align: left !important;
-}
-.text-center {
-    text-align: center !important;
-}
-
-/* Strokes
-------------------------------------
-*/
-
-.stroke-primary {
-    stroke: var(--wje-color-primary) !important;
-}
-.stroke-complete {
-    stroke: var(--wje-color-complete) !important;
-}
-.stroke-success {
-    stroke: var(--wje-color-success) !important;
-}
-.stroke-info {
-    stroke: var(--wje-color-info) !important;
-}
-.stroke-warning {
-    stroke: var(--wje-color-warning) !important;
-}
-.stroke-danger {
-    stroke: var(--wje-color-danger) !important;
-}
-
-/* Font Sizes
-------------------------------------
-tracking =a+b×e(c × z)
-
-a, b and c are constants
-a = -0.0223
-b = 0.185
-c = -0.1745
-z = font size
-
-*/
-.fs-x-small {
-    font-size: var(--wje-font-size-x-small) !important;
-    letter-spacing: 0.0180093em;
-    line-height: 15px;
-}
-.fs-small {
-    font-size: var(--wje-font-size-small) !important;
-    letter-spacing: 0.00849077em;
-    line-height: 18px;
-}
-.fs {
-    font-size: var(--wje-font-size) !important;
-    letter-spacing: 0.00177646em;
-    line-height: 22px;
-}
-
-.fs-medium {
-    font-size: var(--wje-font-size-medium) !important;
-    letter-spacing: -0.00295978em;
-    line-height: 24px;
-}
-
-.fs-large {
-    font-size: var(--wje-font-size-large) !important;
-    letter-spacing: normal;
-    line-height: normal;
-}
-
-.fs-x-large {
-    font-size: var(--wje-font-size-x-large) !important;
-    letter-spacing: normal;
-    line-height: normal;
-}
-
-.fs-2x-large {
-    font-size: var(--wje-font-size-2x-large) !important;
-    letter-spacing: normal;
-    line-height: normal;
-}
-
-.fs-3x-large {
-    font-size: var(--wje-font-size-3x-large) !important;
-    letter-spacing: normal;
-    line-height: normal;
-}
-
-.fs-4x-large {
-    font-size: var(--wje-font-size-4x-large) !important;
-    letter-spacing: normal;
-    line-height: normal;
-}
-
-/* Line-heights
-------------------------------------
-*/
-.lh-normal {
-    line-height: normal;
-}
-.lh-10 {
-    line-height: 10px;
-}
-.lh-11 {
-    line-height: 11px;
-}
-.lh-12 {
-    line-height: 12px;
-}
-.lh-13 {
-    line-height: 13px;
-}
-.lh-14 {
-    line-height: 14px;
-}
-.lh-15 {
-    line-height: 15px;
-}
-.lh-16 {
-    line-height: 16px;
-}
-
-/* Font Faces
-------------------------------------
-*/
-
-.font-arial {
-    font-family: Arial, sans-serif !important;
-}
-.font-montserrat {
-    font-family: var(--wje-font-family-secondary) !important;
-}
-.font-heading {
-    font-family: var(--wje-font-family-secondary);
-}
-.font-secondary {
-    font-family: var(--wje-font-family-secondary);
-}
-
-/* Wells
-------------------------------------
-*/
-.well {
-    background-color: var(--wje-color-contrast-3);
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    -webkit-box-shadow: none !important;
-    -moz-box-shadow: none !important;
-    box-shadow: none !important;
-    border: none;
-    background-image: none;
-    &.well-large {
-        padding: 24px;
-        width: auto;
-    }
-    &.well-small {
-        padding: 13px;
-        width: auto;
-    }
-    &.green {
-        background-color: var(--wje-color-complete);
-        color: var(--wje-color-contrast-0);
-        border: none;
-    }
-}
-.overflow-ellipsis {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-/* Responsive Handlers : Typo
-------------------------------------
-*/
-
-@media (max-width: 1024px) {
-    body,
-    p {
-        font-size: var(--wje-font-size-small);
-        line-height: 20px;
-    }
-
-    h1 {
-        font-size: var(--wje-font-size-2x-large);
-        line-height: 44px;
-        letter-spacing: -0.08px;
-    }
-    h2 {
-        font-size: var(--wje-font-size-x-large);
-        line-height: 40px;
-    }
-    h3 {
-        font-size: var(--wje-font-size-large);
-        line-height: 35.88px;
-    }
-    h4 {
-        font-size: var(--wje-font-size-large);
-        line-height: 33.88px;
-    }
-    h5 {
-        font-size: var(--wje-font-size-medium);
-        line-height: 25.88px;
-    }
-    small,
-    .small {
-        font-size: 89%;
-        line-height: 17px;
-    }
-}
-
-.alert {
-    & > p,
-    & > ul {
-        margin-bottom: 0;
-    }
-}
-.table {
-    & > tbody {
-        & > tr {
-            & > td,
-            & > th {
-                line-height: 1.42857143;
-            }
-        }
-    }
-    & > tfoot {
-        & > tr {
-            & > td,
-            & > th {
-                line-height: 1.42857143;
-            }
-        }
-    }
-    & > thead {
-        & > tr {
-            & > td,
-            & > th {
-                line-height: 1.42857143;
-            }
-        }
-    }
-}
-
-/* For Windows : Fixes
-------------------------------------
-*/
-
-.line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.line-clamp-3 {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.line-clamp-5 {
-    display: -webkit-box;
-    -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.text-separator {
-    display: block;
-    text-align: center;
-    margin: 1.5rem 0;
-    width: 100%;
-    background: linear-gradient(
-        to top,
-        transparent 0%,
-        transparent calc(50% - 1px),
-        var(--wje-border-color) calc(50% - 1px),
-        var(--wje-border-color) calc(50% + 1px),
-        transparent calc(50% + 1px),
-        transparent 100%
-    );
-}
-.text-separator::before {
-    background: #fff;
-    content: attr(data-text);
-    padding: 0 1rem;
-    text-transform: uppercase;
-}
-
-.wje-toast-stack {
-    position: fixed;
-    top: 0;
-    margin: 0 0.5rem;
-    width: 300px;
-    max-width: 100%;
-    max-height: 100%;
-    overflow: auto;
-    z-index: 9999;
-}