@open-dcp/vue-styles 0.0.0-stage → 0.2.1

package/src/components/_modal.scss

@@ -0,0 +1,107 @@
+@use '@open-dcp/styles/src/abstracts/variables' as *;
+
+.dcp-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.32); // Modal backdrop
+    z-index: 1050;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity $transition-fast, visibility $transition-fast;
+
+    &.dcp-modal--active {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .dcp-modal__dialog {
+        background-color: #fff;
+        border-radius: $modal-border-radius;
+        width: 100%;
+        margin: $spacer;
+        padding: $spacer;
+        box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
+        transform: translateY(-50%);
+        animation: slide-in 0.2s ease forwards;
+        max-width: 500px;
+        position: relative;
+    }
+
+    // Small size
+    &.dcp-modal--small .dcp-modal__dialog {
+        max-width: 300px;
+    }
+
+    // Large size
+    &.dcp-modal--large .dcp-modal__dialog {
+        max-width: 800px;
+    }
+
+    // Extra-large size
+    &.dcp-modal--xlarge .dcp-modal__dialog {
+        max-width: 1200px;
+    }
+
+    .dcp-modal__header {
+        margin: 0 0 $spacer-half 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .dcp-modal__footer {
+        margin: $spacer-half 0 0 0;
+    }
+
+    .dcp-modal__title {
+        font-size: $font-size-base * 1.25;
+        font-weight: bold;
+        margin: 0;
+    }
+
+    .dcp-modal__content {
+        margin: $spacer-half 0;
+        line-height: $line-height-base;
+    }
+
+    .dcp-modal__close {
+        position: absolute;
+        top: $spacer;
+        right: $spacer;
+        background: none;
+        border: none;
+        font-size: $font-size-base * 1.5;
+        cursor: pointer;
+        color: $secondary-color;
+        padding: 0;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        transition: background-color 0.2s ease;
+        flex-shrink: 0;
+
+        &:hover {
+            color: var(--dcp-branding-primary-color, #{$primary-color});
+            background-color: rgba(0, 0, 0, 0.04);
+        }
+    }
+}
+
+// Animations
+@keyframes slide-in {
+    from {
+        transform: translateY(-100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}

package/src/components/_page.scss

@@ -0,0 +1,119 @@
+@use '@open-dcp/styles/src/abstracts/variables' as *;
+
+.paper-content {
+    background: $white;
+    border-radius: 5px;
+    margin-right: 0;
+    margin-left: 0;
+
+    &_title {
+        color: $button-disabled-color;
+        font-size: $font-size-base * 1.25;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.93px;
+    }
+
+    &--ng-content:empty {
+        display: none;
+    }
+}
+
+
+.dc-content {
+
+    --header-height: 80px;
+    --side-menu-min-width: 80px;
+
+    --main-padding: 100px;
+
+
+    &.page-editor {
+        --bottom-bar-height: 60px;
+
+        &--with-bottom-bar {
+            padding-bottom: calc(var(--bottom-bar-height) + 3rem) !important;
+        }
+
+        .page-editor_bottom-bar {
+            position: fixed !important;
+            bottom: 0;
+            left: 0;
+            width: 100% !important;
+            height: var(--bottom-bar-height) !important;
+            background: #fff !important;
+            z-index: 2;
+        }
+
+        .page-editor_button {
+            &-back {
+                color: color-mix(in srgb, var(--dcp-branding-primary-color, #{$branding-primary-color}) 55%, white) !important;
+            }
+        }
+    }
+
+    position: relative;
+    height: calc(100vh - var(--header-height));
+    width: calc(100vw - var(--side-menu-min-width));
+    overflow-y: auto;
+    padding-left: calc(var(--main-padding) + 3rem);
+    padding-right: calc(var(--main-padding) + 3rem);
+    padding-bottom: $spacer * 3;
+    padding-top: $spacer * 1.5;
+
+    &--loading {
+        overflow-y: hidden;
+
+        &:after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            content: '';
+            cursor: wait;
+            z-index: 20000;
+        }
+    }
+
+    &_header {
+        padding-bottom: $spacer * 1.5;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    &_title {
+        margin-bottom: 0;
+        font-size: $font-size-base * 1.5;
+        font-weight: 300;
+        color: $text-color-dark;
+    }
+
+    &_footer {
+        padding-left: calc(var(--main-padding) + 3rem) !important;
+        padding-right: calc(var(--main-padding) + 3rem) !important;
+    }
+}
+
+.page-create-menu {
+    display: flex;
+    flex-direction: row;
+    &_buttons {
+        display: flex;
+        flex-direction: row;
+        margin-right: 10px;
+        gap: 10px;
+    }
+    &_button {
+        &-show-extra {
+            padding: 0;
+            width: 36px;
+            min-width: 36px;
+            height: 36px;
+            font-size: 14px;
+            line-height: 36px;
+            font-weight: bold;
+        }
+    }
+}

package/src/components/_slide-toggle.scss

@@ -0,0 +1,22 @@
+@use '@open-dcp/styles/src/abstracts/variables' as *;
+
+.v-switch {
+    .v-selection-control__input::before {
+        display: none;
+    }
+    .v-ripple__container {
+        opacity: .1;
+    }
+    .v-switch__thumb {
+        background: $gxp-red;
+    }
+    input[checked] ~ .v-switch__thumb {
+        background: $gxp-green;
+    }
+    .v-switch__track {
+        background: rgba($gxp-red, .5);
+    }
+    .v-switch__track:has( + .v-selection-control__input input[checked]) {
+        background: rgba($gxp-green, .5);
+    }
+}

package/src/components/_table.scss

@@ -0,0 +1,53 @@
+// Import variables
+@use '@open-dcp/styles/src/abstracts/variables' as *;
+@use 'sass:color';
+
+// Table Container
+.dcp-table-container {
+    height: 400px;
+    overflow-y: auto;
+
+    table {
+        width: 100%;
+        table-layout: fixed;
+        margin: 0;
+        max-width: none;
+        border-width: 0;
+        border-color: inherit;
+        border-collapse: separate;
+        border-spacing: 0;
+        empty-cells: show;
+        outline: 0;
+
+        td,
+        th {
+            padding: 8px;
+            text-align: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        th {
+            font-weight: bold;
+            border-bottom: 1px solid color-mix(in srgb, var(--dcp-branding-primary-color, #{$branding-primary-color}) 55%, white);
+
+            i {
+                color: $text-color-light;
+            }
+        }
+
+        td {
+            border-bottom: 1px solid color-mix(in srgb, var(--dcp-branding-primary-color, #{$branding-primary-color}) 55%, white);
+        }
+
+        tr.firstRow > td,
+        tr.lastRow > td {
+            padding: 0;
+        }
+
+        tr.lastRow > td {
+            border: 0;
+        }
+    }
+}

package/src/components/_textarea.scss

@@ -0,0 +1,81 @@
+@use '@open-dcp/styles/src/abstracts/variables' as *;
+
+.dcp-textarea {
+    position: relative;
+
+    // Textarea field
+    textarea {
+        width: 100%;
+        padding: 10px 12px 5px 0;
+        font-size: $font-size-base;
+        border: none; // Remove border
+        border-radius: 0;
+        outline: none;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: var(--dcp-branding-primary-color, #{$branding-primary-color});
+        transition: box-shadow 0.2s ease, background-color 0.2s ease;
+        resize: vertical; // Allow vertical resizing of the textarea
+
+        &:focus,
+        &:active {
+            background-color: $white; // White background on focus/active
+            box-shadow: none; // Highlight with a subtle focus ring
+        }
+
+        &:focus+label,
+        &:not(:placeholder-shown)+label {
+            transform: translateY(-20px);
+            font-size: $font-size-sm;
+        }
+
+        &:disabled {
+            background-color: $disabled-color; // Light gray for disabled
+            cursor: not-allowed;
+            box-shadow: none; // Remove focus ring
+        }
+
+        &.error {
+            border-bottom-color: $danger-color;
+        }
+    }
+
+    // Label
+    label {
+        position: absolute;
+        top: $spacer-half;
+        left: 0;
+        font-size: $font-size-base;
+        color: var(--dcp-branding-primary-color, #{$branding-primary-color});
+        pointer-events: none;
+        transition: transform 0.2s ease, font-size 0.2s ease, color 0.2s ease;
+        text-transform: uppercase;
+
+        &.disabled {
+            color: $text-color-disabled; // Dimmed color for disabled state
+        }
+
+        &.error {
+            color: $danger-color;
+        }
+    }
+
+    // Error message
+    .dcp-textarea__error-message {
+        font-size: $font-size-sm;
+        color: $danger-color;
+        margin-top: $spacer-half;
+    }
+
+    // Disabled state
+    &.disabled {
+        textarea {
+            background-color: $disabled-color;
+            cursor: not-allowed;
+        }
+
+        label {
+            color: $text-color-disabled;
+        }
+    }
+}

package/src/components/_three-dots-menu.scss

@@ -0,0 +1,25 @@
+.three-dots {
+    &_button {
+        width: 30px !important;
+        height: 30px !important;
+        background: transparent !important;
+        color: black !important;
+    }
+
+    &_list {
+        letter-spacing: normal;
+        text-transform: none;
+        padding: 0;
+        min-width: 100px;
+
+        .v-list-item__overlay {
+            display: none;
+        }
+
+        .v-divider {
+            margin: 0;
+            border-top: 1px solid rgba(0, 0, 0, 0.12);
+            opacity: 1;
+        }
+    }
+}

package/src/components/button.scss

@@ -0,0 +1 @@
+@forward './_button';

package/src/components/dropdown.scss

@@ -0,0 +1 @@
+@forward './_dropdown';

package/src/components/form-array.scss

@@ -0,0 +1,2 @@
+@forward './_form-array';
+

package/src/components/form-generator.scss

@@ -0,0 +1,5 @@
+// Form Generator composite: combines all form-related styles
+@forward './_input';
+@forward './_form-group';
+@forward './_form-array';
+

package/src/components/form-group.scss

@@ -0,0 +1,2 @@
+@forward './_form-group';
+

package/src/components/gxp-status.scss

@@ -0,0 +1 @@
+@forward './_gxp-status';

package/src/components/input.scss

@@ -0,0 +1 @@
+@forward './_input';

package/src/index.scss

@@ -0,0 +1,17 @@
+@forward './components/_button';
+@forward './components/_card';
+@forward './components/_dropdown';
+@forward './components/_modal';
+@forward './components/_input';
+@forward './components/_autocomplete';
+@forward './components/_textarea';
+@forward './components/_slide-toggle';
+@forward './components/_chip';
+@forward './components/_three-dots-menu';
+@forward './components/_table';
+@forward './components/_gxp-status';
+@forward './components/_page';
+@forward './components/_form-group';
+@forward './components/_form-array';
+@forward './components/form-generator';
+