@finqu/cool 1.2.29 → 2.0.2

package/scss/_reboot.scss

@@ -1,284 +1,306 @@
-// Reboot
-// ---------------------------------------------------------------------------------------------------------------
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-html {
-    font-family: sans-serif;
-    line-height: 1.15;
-    -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
-    -ms-overflow-style: scrollbar;
-    -webkit-tap-highlight-color: rgba(#000000, 0);
-    -webkit-font-smoothing: antialiased;
-}
-
-body {
-    margin: 0;
-    font-family: $font-family-base;
-    font-size: $font-size-base;
-    font-weight: $font-weight-base;
-    line-height: $line-height-base;
-    color: $body-color;
-    text-align: left;
-    background-color: $body-bg;
-}
-
-article,
-aside,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section {
-    display: block;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-    margin: 0;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-}
-
-hr {
-    box-sizing: content-box;
-    height: 0;
-    overflow: visible;
-}
-
-button {
-    border-radius: 0;
-}
-
-button,
-input {
-    overflow: visible;
-}
-
-button,
-select {
-    text-transform: none;
-}
-
-select {
-    word-wrap: normal;
-}
-
-img {
-    vertical-align: middle;
-    border-style: none;
-}
-
-svg {
-    overflow: hidden;
-    vertical-align: middle;
-}
-
-progress {
-    vertical-align: baseline;
-}
-
-abbr[title],
-abbr[data-original-title] {
-    text-decoration: underline;
-    text-decoration: underline dotted;
-    cursor: help;
-    border-bottom: 0;
-}
-
-address {
-    margin-bottom: 16px;
-    font-style: normal;
-    line-height: inherit;
-}
-
-ol,
-ul,
-dl {
-    margin-top: 0;
-    margin-bottom: 16px;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-    margin-bottom: 0;
-}
-
-dt {
-  font-weight: 400;
-}
-
-dd {
-  margin-bottom: 8px;
-  margin-left: 0;
-}
-
-blockquote {
-  margin: 0 0 16px;
-}
-
-dfn {
-  font-style: italic;
-}
-
-[tabindex="-1"]:focus {
-    outline: 0 !important;
-}
-
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"] {
-    -webkit-appearance: button;
-}
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-    &:not(:disabled):not(.disabled) {
-        cursor: pointer;
-    }
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-}
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-    outline: 1px dotted theme-color('primary');
-}
-
-textarea {
-    overflow: auto;
-    resize: vertical;
-}
-
-[type="checkbox"],
-[type="radio"] {
-    box-sizing: border-box;
-    padding: 0;
-}
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-    height: auto;
-}
-
-[type="search"] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-}
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-}
-
-[type="checkbox"] {
-    margin-right: 5px;
-    vertical-align: top;
-}
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-    -webkit-appearance: listbox;
-}
-
-fieldset,
-.fieldset {
-	background: $body-bg;
-    border: 1px solid $border-color;
-    border-radius: $border-radius;
-    padding: 10px 15px;
-    box-sizing: border-box;
-    margin: 0;
-
-    legend {
-        font-size: 12px;
-        color: theme-color('medium');
-    }
-}
-
-[hidden] {
-    display: none !important;
-}
-
-a {
-    color: $link-color;
-    text-decoration: none;
-    background-color: transparent;
-    -webkit-text-decoration-skip: objects;
-
-    &:hover {
-        color: $link-hover-color;
-    }
-}
-
-a:not([href]):not([tabindex]) {
-    text-decoration: none;
-
-    &:hover,
-    &:focus {
-        color: inherit;
-        text-decoration: none;
-    }
-
-    &:focus {
-        outline: 0;
-    }
-}
-
-p {
-    margin: 0 0 ($line-height-computed / 2);
-}
-
-code {
-    font-family: $font-family-monospace;
-    font-size: 80%;
-    font-weight: $font-weight-bolder;
-    color: theme-color('brand');
-}
-
-strong,
-b {
-    font-weight: $font-weight-bold;
-}
-
-label {
-    display: inline-block;
-    font-size: $label-font-size;
-    margin-bottom: $label-margin-bottom;
-
-    &[for] {
-        cursor: pointer;
-    }
-}
+/* Reboot ========================================================================== */
+@layer reset {
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    html {
+        font-family: sans-serif;
+        line-height: 1.15;
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+        -ms-overflow-style: scrollbar;
+        -webkit-tap-highlight-color: rgba(#000000, 0);
+        -webkit-font-smoothing: antialiased;
+        /** for rem units */
+        font-size: var(--cool-font-size-base);
+    }
+
+    body {
+        margin: 0;
+        margin: 0;
+        font-family: var(--cool-font-family-base);
+        font-size: var(--cool-font-size-base);
+        font-weight: var(--cool-font-weight-base);
+        line-height: var(--cool-line-height-base);
+        color: var(--cool-body-color);
+        text-align: left;
+        background-color: var(--cool-body-bg);
+    }
+
+    article,
+    aside,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    main,
+    nav,
+    section {
+        display: block;
+    }
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+        margin: 0;
+        font-family: inherit;
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    hr {
+        box-sizing: content-box;
+        height: 0;
+        overflow: visible;
+    }
+
+    button {
+        border-radius: 0;
+    }
+
+    button,
+    input {
+        overflow: visible;
+    }
+
+    button,
+    select {
+        text-transform: none;
+    }
+
+    select {
+        word-wrap: normal;
+    }
+
+    img {
+        vertical-align: middle;
+        border-style: none;
+    }
+
+    svg {
+        overflow: hidden;
+        vertical-align: middle;
+    }
+
+    progress {
+        vertical-align: baseline;
+    }
+
+    abbr[title],
+    abbr[data-original-title] {
+        text-decoration: underline;
+        text-decoration: underline dotted;
+        cursor: help;
+        border-bottom: 0;
+    }
+
+    address {
+        margin-bottom: 16px;
+        font-style: normal;
+        line-height: inherit;
+    }
+
+    ol,
+    ul,
+    dl {
+        margin-top: 0;
+        margin-bottom: 16px;
+        padding-inline-start: 1em;
+    }
+
+    ol ol,
+    ul ul,
+    ol ul,
+    ul ol {
+        margin-bottom: 0;
+    }
+
+    dt {
+        font-weight: var(--cool-font-weight-normal);
+    }
+
+    dd {
+        margin-bottom: 8px;
+        margin-left: 0;
+    }
+
+    blockquote {
+        margin: 0 0 16px;
+    }
+
+    dfn {
+        font-style: italic;
+    }
+
+    [tabindex="-1"]:focus {
+        outline: 0 !important;
+    }
+
+    button,
+    html [type="button"],
+    [type="reset"],
+    [type="submit"] {
+        -webkit-appearance: button;
+    }
+
+    button,
+    [type="button"],
+    [type="reset"],
+    [type="submit"] {
+        &:not(:disabled):not(.disabled) {
+            cursor: pointer;
+        }
+    }
+
+    button::-moz-focus-inner,
+    [type="button"]::-moz-focus-inner,
+    [type="reset"]::-moz-focus-inner,
+    [type="submit"]::-moz-focus-inner {
+        border-style: none;
+        padding: 0;
+    }
+
+    button:-moz-focusring,
+    [type="button"]:-moz-focusring,
+    [type="reset"]:-moz-focusring,
+    [type="submit"]:-moz-focusring {
+        outline: 0;
+    }
+
+    textarea {
+        overflow: auto;
+        resize: vertical;
+    }
+
+    [type="checkbox"],
+    [type="radio"] {
+        box-sizing: border-box;
+        padding: 0;
+    }
+
+    [type="number"]::-webkit-inner-spin-button,
+    [type="number"]::-webkit-outer-spin-button {
+        height: auto;
+    }
+
+    [type="search"] {
+        -webkit-appearance: textfield;
+        outline-offset: -2px;
+    }
+
+    [type="search"]::-webkit-search-cancel-button,
+    [type="search"]::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+    ::-webkit-file-upload-button {
+        -webkit-appearance: button;
+        font: inherit;
+    }
+
+    [type="checkbox"] {
+        margin-right: 5px;
+        vertical-align: top;
+    }
+
+    input[type="date"],
+    input[type="time"],
+    input[type="datetime-local"],
+    input[type="month"] {
+        -webkit-appearance: listbox;
+
+        @supports (-webkit-touch-callout: none) {
+            min-width: intrinsic;
+            max-height: intrinsic;
+        }
+
+        &::-webkit-date-and-time-value {
+            font-family: var(--cool-input-font-family);
+            font-size: var(--cool-input-font-size);
+            font-weight: var(--cool-input-font-weight);
+            line-height: var(--cool-input-line-height);
+            padding: var(--cool-input-padding-y) var(--cool-input-padding-x);
+            text-align: left;
+        }
+    }
+
+    fieldset,
+    .fieldset {
+        background: var(--cool-body-bg);
+        border: 1px solid var(--cool-border-color);
+        border-radius: var(--cool-border-radius);
+        padding: 10px 15px;
+        box-sizing: border-box;
+        margin: 0;
+
+        legend {
+            font-size: 12px;
+            color: var(--cool-theme-color-medium);
+        }
+    }
+
+    [hidden] {
+        display: none !important;
+    }
+
+    a {
+        color: var(--cool-link-color);
+        text-decoration: var(--cool-link-text-decoration);
+        background-color: transparent;
+        -webkit-text-decoration-skip: objects;
+
+        &:hover {
+            color: var(--cool-link-hover-color);
+
+            &:not([class]) {
+                text-decoration: var(--cool-link-hover-text-decoration);
+            }
+        }
+    }
+
+    a:not([href]):not([tabindex]) {
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        &:focus {
+            outline: 0;
+        }
+    }
+
+    p {
+        margin: 0 0 calc(var(--cool-line-height-computed));
+    }
+
+    code {
+        font-family: var(--cool-font-family-monospace);
+        font-size: 80%;
+        font-weight: var(--cool-font-weight-bolder);
+        color: var(--cool-theme-color-brand);
+    }
+
+    strong,
+    b {
+        font-weight: var(--cool-font-weight-bolder);
+    }
+
+    label {
+        display: inline-block;
+        font-size: var(--cool-label-font-size);
+        margin-bottom: var(--cool-label-margin-bottom);
+
+        &[for] {
+            cursor: pointer;
+        }
+    }
+}