@posiwise/shared-components 0.0.10 → 0.0.12

package/assets/scss/custom-bootstrap/_card.scss

@@ -0,0 +1,319 @@
+// https://www.google.com/design/spec/components/cards.html#cards-content-blocks
+.card {
+    @extend %std-font;
+
+    @include card-shadow;
+
+    border: 0;
+    border-radius: $border-radius-base;
+    margin: 8px 0;
+
+    // any h* will signal the larger size should render as 24sp
+    @include headings {
+        &.card-title {
+            font-size: 1.25rem;
+            font-weight: 500;
+            letter-spacing: 0.05rem;
+            margin-bottom: 0.25rem;
+        }
+    }
+
+    &[class*='gradient-'] {
+        .card-header,
+        .card-footer {
+            background-color: initial;
+        }
+    }
+
+    .card-header {
+        background-color: transparent;
+        border-bottom: 0;
+        padding: 1.5rem;
+
+        h5 {
+            color: $branding-color-1;
+            font-weight: 500;
+        }
+    }
+
+    .card-subtitle {
+        margin-bottom: 10px;
+        margin-top: 10px;
+    }
+
+    .card-body {
+        height: auto;
+        padding: 0;
+    }
+
+    .card-block {
+        padding: 0.5rem 1.5rem 1.5rem;
+
+        @media only screen and (max-width: 768px) {
+            padding: 5px;
+        }
+    }
+
+    .card-bordered {
+        border: 1px solid rgb(0 0 0 / 6%);
+    }
+
+    &.card-transparent {
+        background-color: transparent !important;
+    }
+
+    .card {
+        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 12%), 0 2px 4px 0 rgb(0 0 0 / 8%);
+    }
+
+    .card-img {
+        position: relative;
+
+        .card-title {
+            bottom: 0;
+            color: rgb(255 255 255);
+            left: 0;
+            max-width: 100%;
+            padding: 24px;
+            position: absolute;
+        }
+
+        &.overlap {
+            margin-top: -40px;
+        }
+    }
+
+    .btn-floating {
+        background-color: map-get($primary, base);
+        border-radius: 50%;
+        box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%),
+            0 3px 1px -2px rgb(0 0 0 / 20%);
+        color: rgb(255 255 255);
+        cursor: pointer;
+        display: inline-block;
+        font-size: 1rem;
+        height: 40px;
+        line-height: 40px;
+        overflow: hidden;
+        padding: 0;
+        position: relative;
+        transition: 0.3s;
+        vertical-align: middle;
+        width: 40px;
+        z-index: 1;
+
+        &.btn {
+            margin: 0;
+        }
+
+        i {
+            color: rgb(255 255 255);
+            display: inline-block;
+            font-size: 2rem;
+            line-height: 40px;
+            text-align: center;
+            width: inherit;
+        }
+
+        &.btn-large {
+            height: 56px;
+            width: 56px;
+
+            &.halfway-fab {
+                bottom: -28px;
+            }
+
+            i {
+                line-height: 56px;
+            }
+        }
+
+        &.halfway-fab {
+            bottom: -20px;
+            position: absolute;
+            right: 24px;
+        }
+    }
+
+    .card-reveal {
+        background-color: rgb(255 255 255);
+        display: none;
+        height: 100%;
+        left: 0;
+        overflow-y: auto;
+        padding: 24px;
+        position: absolute;
+        top: 100%;
+        transition: height 1s ease-in-out;
+        width: 100%;
+        z-index: 3;
+
+        .card-title {
+            cursor: pointer;
+        }
+    }
+
+    &.horizontal {
+        .card-body {
+            display: flex;
+        }
+
+        .card-img {
+            max-width: 50%;
+
+            img {
+                border-radius: 2px 0 0 2px;
+                max-width: 100%;
+                width: auto;
+            }
+        }
+    }
+
+    .card-stacked {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .card-footer {
+        // assume footer is the set of actions?
+        background-color: rgb(255 255 255);
+        overflow: hidden;
+        padding: 1rem 1.5rem;
+
+        .fa {
+            font-size: 22px;
+            padding-left: 10px;
+        }
+    }
+
+    &.card-inverse {
+        .card-blockquote .blockquote-footer,
+        .card-link,
+        .card-subtitle,
+        .card-text,
+        .card-title,
+        .card-footer,
+        a,
+        a:hover,
+        label,
+        span,
+        .mb-3:hover,
+        div,
+        input {
+            color: rgb(255 255 255);
+        }
+
+        .mb-3.is-focused {
+            .checkbox label,
+            label.checkbox-inline,
+            .radio label,
+            label.radio-inline {
+                color: rgb(255 255 255);
+            }
+        }
+
+        hr {
+            border-color: rgb(255 255 255);
+        }
+
+        .checkbox {
+            label {
+                color: rgb(255 255 255);
+
+                .checkbox-decorator {
+                    .check {
+                        border-color: rgb(255 255 255 / 54%);
+                    }
+                }
+            }
+        }
+
+        input {
+            /* &::input-placeholder,*/
+            &::placeholder,
+           /* &:input-placeholder, */
+            &::placeholder {
+                color: rgb(255 255 255);
+            }
+        }
+    }
+}
+
+.card {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(218 220 224) !important;
+    border-radius: 8px;
+    box-sizing: border-box;
+    height: 100%;
+    min-height: auto;
+    overflow: hidden;
+    padding-bottom: 60px;
+    position: relative;
+    width: 100%;
+
+    .card-content {
+        -webkit-box-orient: vertical;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+    }
+
+    .card-title {
+        border-bottom: 1px solid rgb(218 220 224);
+        padding: 24px 24px 16px;
+
+        h3 {
+            display: inline-block;
+            margin: 0 !important;
+        }
+    }
+
+    .card-header {
+        padding: 24px 24px 16px;
+
+        .img-wrapper {
+            img {
+                max-height: 150px;
+                max-width: 200px;
+                min-height: 150px;
+            }
+        }
+    }
+
+    .card-footer {
+        border-top: 1px solid rgb(218 220 224);
+        bottom: 0;
+        padding: 14px 0;
+        position: absolute;
+        width: 100%;
+
+        .footer-link {
+            padding: 17px 24px 18px;
+        }
+    }
+}
+
+@media (max-width: 479px) {
+    .card-header {
+        .img-wrapper {
+            img {
+                display: none;
+            }
+        }
+    }
+}
+
+.shadow {
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+}
+
+.shadow-md {
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 12%), 0 2px 4px 0 rgb(0 0 0 / 8%);
+}
+
+.shadow-lg {
+    box-shadow: 0 15px 30px 0 rgb(0 0 0 / 11%), 0 5px 15px 0 rgb(0 0 0 / 8%);
+}

package/assets/scss/custom-bootstrap/_carousel.scss

@@ -0,0 +1,6 @@
+.carousel-inner > .carousel-item > img {
+    display: block;
+    height: auto;
+    line-height: 1;
+    max-width: 100%;
+}

package/assets/scss/custom-bootstrap/_form_select.scss

@@ -0,0 +1,7 @@
+.form-select {
+    height: calc(1.5em + 0.75rem + 2px);
+}
+
+.form-select-sm {
+    height: calc(1.5em + 0.75rem + 2px);
+}

package/assets/scss/custom-bootstrap/_forms.scss

@@ -0,0 +1,337 @@
+form {
+    .form-text {
+        display: block;
+        margin-top: 0.25rem;
+    }
+    .mb-3 {
+        margin-bottom: 1rem;
+    }
+    label {
+        color: rgb(128 128 128);
+        font-size: 0.75rem;
+        font-weight: 500;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+    }
+
+    .labelfocus {
+        color: rgb(0 0 0);
+    }
+
+    .form-control {
+        border: 1px solid rgb(166 169 174);
+        border-radius: 2px;
+        color: rgb(128 128 128);
+
+        /* &::input-placeholder {
+            color: darken($body-bg, 20%);
+        } */
+
+        &:placeholder {
+            /* Firefox 18- */
+            color: darken($body-bg, 20%);
+        }
+
+        &::placeholder {
+            /* Firefox 19+ */
+            color: darken($body-bg, 20%);
+        }
+
+        /* &:input-placeholder {
+            color: darken($body-bg, 20%);
+        } */
+
+        &:focus {
+            border-color: rgb(0 0 0);
+        }
+    }
+
+    .form-control-position {
+        display: block;
+        height: 2.5rem;
+        line-height: 2.5rem;
+        position: absolute;
+        right: 0;
+        text-align: center;
+        top: 2px;
+        width: 2.5rem;
+        z-index: 2;
+    }
+
+    .has-icon-left {
+        .form-control-position {
+            left: inherit;
+            right: auto;
+        }
+
+        .form-control {
+            padding-left: 2.95rem;
+            padding-right: 0.85rem;
+        }
+    }
+
+    .has-icon-right {
+        .form-control {
+            padding-right: 2.5rem;
+        }
+    }
+
+    .form-section {
+        border-bottom: 1px solid map-get($brown, base);
+        color: map-get($brown, base);
+        font-size: 1.2rem;
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        line-height: 3rem;
+        margin-bottom: 20px;
+
+        i {
+            font-size: 20px;
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+    }
+
+    .form-actions {
+        border-top: 1px solid darken($body-bg, 10%);
+        margin-top: 20px;
+        padding: 20px 0;
+
+        @include media-breakpoint-down(sm) {
+            .buttons-group {
+                float: left !important;
+                margin-bottom: 10px;
+            }
+        }
+
+        &.filled {
+            background-color: $body-bg;
+        }
+
+        &.center {
+            text-align: center;
+        }
+
+        &.right {
+            text-align: right;
+        }
+
+        &.top {
+            border-bottom: 1px solid darken($body-bg, 10%);
+            border-top: 0;
+            margin-bottom: 20px;
+            margin-top: 0;
+        }
+    }
+
+    &.form-horizontal {
+        .mb-3 {
+            @include media-breakpoint-up(sm) {
+                .label-control {
+                    text-align: right;
+                }
+            }
+        }
+    }
+
+    &.row-separator {
+        .mb-3 {
+            border-bottom: 1px solid darken($body-bg, 3%);
+            margin: 0;
+
+            .label-control {
+                padding-top: 1.5rem;
+            }
+
+            > div {
+                padding: 1.2rem;
+                padding-right: 0;
+            }
+
+            &.last {
+                border-bottom: 0;
+            }
+        }
+    }
+
+    &.form-bordered {
+        .mb-3 {
+            border-bottom: 1px solid darken($body-bg, 3%);
+            margin: 0;
+
+            .label-control {
+                padding-top: 1.5rem;
+            }
+
+            > div {
+                border-left: 1px solid darken($body-bg, 3%);
+                padding: 1.2rem;
+                padding-right: 0;
+            }
+
+            &.last {
+                border-bottom: 0;
+            }
+        }
+    }
+
+    &.striped-rows {
+        .mb-3 {
+            margin: 0;
+
+            .label-control {
+                padding-top: 1.5rem;
+            }
+
+            > div {
+                padding: 1.2rem;
+                padding-right: 0;
+            }
+
+            &:nth-child(even) {
+                background-color: $body-bg;
+            }
+        }
+    }
+
+    &.striped-labels {
+        .mb-3 {
+            margin: 0;
+
+            .label-control {
+                padding-top: 1.5rem;
+            }
+
+            > div {
+                background-color: rgb(255 255 255);
+                padding: 1.2rem;
+                padding-right: 0;
+            }
+
+            &:nth-child(even) {
+                background-color: $body-bg;
+            }
+        }
+    }
+}
+
+.mb-3 {
+    .checkbox label,
+    .radio label {
+        color: rgba(#000, 0.87);
+    }
+}
+
+// Form Control
+.form-control {
+    &:focus {
+        border-color: map-get($primary, base) !important;
+    }
+}
+
+select.form-control {
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
+}
+
+/*
+TODO:M: To check with latest bootstrap version and remove it.
+Bootstrap Enhance */
+
+// Custom checkbox
+.custom-control {
+    display: block;
+
+    &.inline {
+        display: inline;
+    }
+}
+
+.form-check-input input:disabled:checked ~ .custom-control-indicator {
+    opacity: 0.5;
+}
+
+.form-check-input input:disabled ~ .custom-control-indicator {
+    cursor: not-allowed;
+}
+
+.form-check-input > input:focus ~ .custom-control-indicator {
+    padding: 0.51rem;
+}
+
+.form-check-input > input:focus ~ .custom-control-indicator {
+    padding: 0.51rem;
+}
+
+.custom-control-indicator {
+    height: 1.075rem;
+    line-height: 1.05rem;
+    top: 0.085rem;
+    width: 1.1rem;
+
+    + .custom-control-description {
+        margin-left: 1rem;
+    }
+}
+
+.form-control {
+    &:disabled,
+    &[readonly] {
+        background-color: rgb(236 239 241);
+    }
+}
+
+.input-group-addon {
+    background-color: rgb(236 239 241);
+}
+
+.form-control-xl {
+    border-radius: 0.3rem;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    padding: 0.8rem 1rem;
+}
+
+select.form-control-xl:not([size]):not([multiple]) {
+    height: calc(3.25rem + 2px);
+}
+
+.input-group-addon input[type='radio'],
+.input-group-addon input[type='checkbox'] {
+    margin-left: -1rem;
+    margin-top: -4px;
+}
+
+.form-control-xl,
+.input-group-xl > .form-control,
+.input-group-xl > .input-group-addon,
+.input-group-xl > .input-group-btn > .btn {
+    padding: 0.8rem 1rem;
+}
+
+textarea.ng-touched.ng-invalid,
+input.ng-touched.ng-invalid,
+select.ng-touched.ng-invalid {
+    border-color: map-get($danger, base);
+}
+
+.form-control:focus::placeholder {
+    transform: translate(5px);
+    transition: all 0.3s ease;
+}
+
+//.form-control:focus::input-placeholder {
+//    transform: translate(5px);
+//    transition: all 0.3s ease;
+//}
+
+.form-control:focus::placeholder {
+    transform: translate(5px);
+    transition: all 0.3s ease;
+}
+
+.disableFormControl {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+}

package/assets/scss/custom-bootstrap/_links.scss

@@ -0,0 +1,7 @@
+/* Bootstrap 5 tweak: do not underline links unless hovered over */
+a:not([class*='btn']) {
+    text-decoration: none;
+}
+a:not([class*='btn']):hover {
+    text-decoration: none;
+}

package/assets/scss/custom-bootstrap/_modal.scss

@@ -0,0 +1,16 @@
+// Modals
+// https://www.google.com/design/spec/components/dialogs.html#dialogs-specs
+
+.modal-content {
+    border-radius: 8px;
+
+    .modal-footer {
+        .btn {
+            margin: 0;
+        }
+
+        .btn + .btn {
+            margin-left: 8px;
+        }
+    }
+}