@finqu/cool 1.3.0 → 2.0.2

package/scss/_pagination.scss

@@ -0,0 +1,82 @@
+@use "variables" as *;
+/* Pagination ========================================================================== */
+
+@mixin cool-pagination {
+    .pagination {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        justify-content: center;
+        overflow: hidden;
+        font-family: var(--cool-pagination-font-family);
+        font-weight: var(--cool-pagination-font-weight);
+        gap: var(--cool-spacing-1);
+
+        .page-item {
+            position: relative;
+            outline: 0;
+            margin: 0;
+
+            &:after {
+                content: " ";
+                width: 100%;
+                height: 2px;
+                bottom: 0;
+                background-color: transparent;
+            }
+
+            &.active {
+                .page-link {
+                    z-index: 2;
+                    color: var(--cool-pagination-active-color);
+                }
+
+                &:after {
+                    background-color: var(--cool-pagination-active-color);
+                    display: block;
+                }
+            }
+
+            &.disabled {
+                cursor: not-allowed;
+
+                .page-link {
+                    color: var(--cool-pagination-disabled-color);
+                    pointer-events: none;
+                }
+            }
+
+            &:not(.active):not(.disabled) {
+                .page-link {
+                    &:focus,
+                    &:hover {
+                        color: var(--cool-pagination-hover-color);
+                        text-decoration: none;
+                    }
+                }
+
+                &:hover:after {
+                    background-color: var(--cool-pagination-color);
+                    display: block;
+                }
+            }
+
+            .page-link {
+                position: relative;
+                display: block;
+                padding: var(--cool-pagination-padding-y) var(--cool-pagination-padding-x);
+                color: var(--cool-pagination-color);
+            }
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-pagination;
+    }
+} @else {
+    @include cool-pagination;
+}

package/scss/_popover.scss

@@ -0,0 +1,61 @@
+@use "variables" as *;
+/* Popover ========================================================================== */
+
+@mixin cool-popover {
+    .popover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: var(--cool-zindex-popover);
+        display: block;
+        max-width: var(--cool-popover-max-width);
+        font-size: var(--cool-popover-font-size);
+        word-wrap: break-word;
+        background-color: var(--cool-popover-bg);
+        background-clip: padding-box;
+        border: var(--cool-popover-border-width) solid var(--cool-popover-border-color);
+        border-radius: var(--cool-popover-border-radius);
+        box-shadow: var(--cool-popover-box-shadow);
+        font-family: var(--cool-font-family-base);
+        font-style: normal;
+        font-weight: var(--cool-font-weight-base);
+        line-height: var(--cool-line-height-base);
+        text-align: start;
+        text-decoration: none;
+        text-shadow: none;
+        text-transform: none;
+        letter-spacing: normal;
+        word-break: normal;
+        word-spacing: normal;
+        white-space: normal;
+        line-break: auto;
+    }
+
+    .popover-header {
+        padding: var(--cool-popover-header-padding-y) var(--cool-popover-header-padding-x);
+        margin-top: 0;
+        margin-bottom: 0;
+        font-size: var(--cool-font-size-base);
+        color: var(--cool-popover-header-color);
+        background-color: var(--cool-popover-header-bg);
+        border-top-left-radius: calc(var(--cool-border-radius) - var(--cool-popover-border-width));
+        border-top-right-radius: calc(var(--cool-border-radius) - var(--cool-popover-border-width));
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    .popover-body {
+        padding: var(--cool-popover-body-padding-y) var(--cool-popover-body-padding-x);
+        color: var(--cool-popover-body-color);
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-popover;
+    }
+} @else {
+    @include cool-popover;
+}

package/scss/_reboot.scss

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