@finqu/cool 1.0.0

package/scss/_button-group.scss

@@ -0,0 +1,124 @@
+// Button group
+// ---------------------------------------------------------------------------------------------------------------
+
+.btn-group,
+.btn-group-vertical {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+
+    > .btn {
+        position: relative;
+        flex: 1 1 auto;
+        margin: 0;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+          z-index: 1;
+        }
+    }
+}
+
+.btn-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > .btn {
+        margin: 0;
+    }
+
+    .input-group {
+        width: auto;
+    }
+}
+
+.btn-group {
+    > .btn:not(:last-child):not(.dropdown-toggle),
+    > .btn-group:not(:last-child) > .btn {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    > .btn:not(:first-child),
+    > .btn-group:not(:first-child) > .btn {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+
+// Sizing
+.btn-group-sm > .btn { @extend .btn-sm; }
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+
+// Split button dropdowns
+.dropdown-toggle-split {
+    padding-right: $btn-padding-x * .75;
+    padding-left: $btn-padding-x * .75;
+
+    &::after,
+    .dropup &::after,
+    .dropright &::after {
+        margin-left: 0;
+    }
+
+    .dropleft &::before {
+        margin-right: 0;
+    }
+}
+
+.btn-sm + .dropdown-toggle-split {
+    padding-right: $btn-padding-x-sm * .75;
+    padding-left: $btn-padding-x-sm * .75;
+}
+
+.btn-lg + .dropdown-toggle-split {
+    padding-right: $btn-padding-x-lg * .75;
+    padding-left: $btn-padding-x-lg * .75;
+}
+
+
+// Vertical button groups
+.btn-group-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    > .btn,
+    > .btn-group {
+        width: 100%;
+    }
+
+    // Reset rounded corners
+    > .btn:not(:last-child):not(.dropdown-toggle),
+    > .btn-group:not(:last-child) > .btn {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    > .btn:not(:first-child),
+    > .btn-group:not(:first-child) > .btn {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+}
+
+
+// Checkbox and radio options
+.btn-group-toggle {
+    > .btn,
+    > .btn-group > .btn {
+        margin-bottom: 0;
+
+        input[type="radio"],
+        input[type="checkbox"] {
+            position: absolute;
+            clip: rect(0, 0, 0, 0);
+            pointer-events: none;
+        }
+    }
+}

package/scss/_buttons.scss

@@ -0,0 +1,206 @@
+// Buttons
+// ---------------------------------------------------------------------------------------------------------------
+
+html.dom-ready .btn {
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+.btn {
+    display: inline-block;
+    font-family: $btn-font-family;
+    font-weight: $btn-font-weight;
+    line-height: $btn-line-height;
+    color: $body-color;
+    position: relative;
+    border: $btn-border-width solid transparent;
+    background-color: transparent;
+    cursor: pointer;
+    margin: 2px;
+    text-align: center;
+    text-decoration: none;
+    touch-action: manipulation;
+    user-select: none;
+    vertical-align: middle;
+    white-space: nowrap;
+    box-sizing: border-box;
+    outline: 0;
+    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+
+    .icon {
+        pointer-events: none;
+        vertical-align: middle;
+    }
+
+    > .icon + * {
+        margin-left: $icon-spacer;
+    }
+
+    .image,
+    span {
+        vertical-align: middle;
+        pointer-events: none;
+    }
+}
+
+.btn-primary {
+    @include button-variant(theme-color('primary'));
+}
+
+.btn-secondary {
+    @include button-variant(color('grey-lightest'), lighten(color('blue-grey'), 60%), color('blue-grey'), color('grey-lighter'), lighten(color('blue-grey'), 55%), $body-color);
+}
+
+.btn-outline-primary {
+    @include button-outline-variant(theme-color('primary'), theme-color('primary'), theme-color('primary'), color('white'));
+}
+
+.btn-outline-secondary {
+    @include button-outline-variant(lighten(color('blue-grey'), 60%), $body-color, color('grey-lightest'), $body-color);
+}
+
+
+// Button icon
+.btn-icon {
+    width: $btn-icon-height;
+    height: $btn-icon-height;
+    color: $icon-color;
+    text-align: center;
+    padding-left: 0;
+    padding-right: 0;
+    line-height: 0;
+
+    &.btn-sm {
+        width: $btn-icon-height-sm;
+        height: $btn-icon-height-sm;
+    }
+
+    &.btn-lg {
+        width: $btn-icon-height-lg;
+        height: $btn-icon-height-lg;
+    }
+
+    &:hover {
+        color: color('grey-darkest');
+    }
+
+    &.disabled,
+    &[disabled] {
+        &:hover {
+            color: $icon-color;
+        }
+    }
+
+    &:hover:not(.disabled):not([disabled]):not(.disable-hover) {
+        background-color: transparent;
+
+        &:before {
+            transform: scale3d(1,1,1);
+            opacity: 1;
+        }
+    }
+
+    &:not(.disabled):not([disabled]):not(.disable-hover) {
+        background-color: transparent;
+        transition: all 0.5s ease;
+
+        &:before {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            content: '';
+            transform: scale3d(0,0,0);
+            transition: all;
+            transition-duration: 250ms;
+            background-color: rgba(0,0,0,.1);
+            border-radius: 50%;
+            z-index: 0;
+            opacity: 0;
+        }
+    }
+
+    > .icon {
+        vertical-align: middle;
+        pointer-events: none;
+    }
+
+    .image,
+    span {
+        pointer-events: none;
+    }
+}
+
+
+// Button link
+.btn-link {
+    display: inline;
+    font-family: $font-family-sans-serif;
+    font-weight: inherit;
+    font-size: inherit;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    color: $link-color;
+    text-align: left;
+    line-height: inherit;
+    border: 0;
+    cursor: pointer;
+    outline: 0;
+
+    &:hover,
+    &.hover,
+    &:focus
+    &.focus {
+        color: $link-hover-color;
+        background: transparent;
+    }
+}
+
+
+// Button text
+.btn-text {
+    display: inline;
+    font-family: $font-family-sans-serif;
+    font-weight: inherit;
+    font-size: inherit;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    color: $body-color;
+    text-align: left;
+    border: 0;
+    cursor: pointer;
+    outline: 0;
+}
+
+
+// Button block
+.btn-block {
+    width: 100%;
+    margin-top: 0;
+
+    + .btn-block {
+        margin-top: $btn-block-spacing-y;
+    }
+}
+
+
+// Button brand
+.btn-brand {
+    font-weight: 500;
+    span {
+        position: relative;
+        z-index: 1;
+    }
+}
+
+
+// Button sizes
+.btn-sm {
+    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm , $btn-line-height-sm, $btn-border-radius-sm);
+}
+
+.btn-lg {
+    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+}