wj-elements 0.1.136 → 0.1.137

package/dist/styles.css

@@ -0,0 +1,849 @@
+/*
+[ 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;
+}