@posiwise/shared-components 0.0.37 → 0.0.39

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

@@ -1,319 +0,0 @@
-// 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

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

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

@@ -1,7 +0,0 @@
-.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

@@ -1,337 +0,0 @@
-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

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

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