@enso-ui/ui 6.2.7 → 7.0.1

package/src/bulma/layouts/Default.vue

@@ -1,6 +1,5 @@
 <template>
-    <div class="app-main"
-        :class="{ 'lights-off': lightsOff }">
+    <div class="app-main">
         <core-default v-slot="{
             appState, bookmarks, sidebar, settings, rtl, header, footer,
             }">
@@ -29,7 +28,7 @@
                   <main-router v-if="appState"/>
               </div>
             </section>
-            <scroll-to-top type="is-medium is-primary is-raised"/>
+            <scroll-to-top type="is-medium is-primary"/>
             <slide :enter="rtl ? 'left' : 'right'"
                 :leave="rtl ? 'left' : 'right'">
                 <settings v-if="settings.isVisible"/>
@@ -44,7 +43,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import { Slide } from '@enso-ui/transitions';
 import ScrollToTop from '@enso-ui/scroll-to-top/bulma';
 import Bookmarks from '@enso-ui/bookmarks/src/bulma/components/Bookmarks.vue';
@@ -71,32 +69,20 @@ export default {
         Bookmarks,
         PageHeader,
     },
-
-    computed: {
-        ...mapState('layout', ['lightsOff']),
-    },
 };
 </script>
 
 <style lang="scss">
-    @import '@enso-ui/themes/bulma/variables';
-
     .app-main {
         display: flex;
         min-height: 100vh;
         flex-direction: column;
-        opacity: 1;
-        transition: all .15s ease;
-
-        &.lights-off {
-            opacity: 0;
-        }
     }
 
     .main-content {
         flex: 1;
         z-index: 1;
-        margin-top: $navbar-height;
+        margin-top: var(--bulma-navbar-height);
         transition: margin .5s;
 
         &.with-bookmarks {
@@ -105,20 +91,20 @@ export default {
 
         &.is-collapsed {
             [dir='ltr'] & {
-                margin-left: $sidebar-collapsed-width;
+                margin-left: var(--enso-sidebar-collapsed-width);
             }
             [dir='rtl'] & {
-                margin-right: $sidebar-collapsed-width;
+                margin-right: var(--enso-sidebar-collapsed-width);
             }
         }
 
         &.is-expanded {
             [dir='ltr'] & {
-                margin-left: $sidebar-width;
+                margin-left: var(--enso-sidebar-width);
             }
             [dir='rtl'] & {
-                margin-right: $sidebar-width;
-                }
+                margin-right: var(--enso-sidebar-width);
+            }
         }
     }
 

package/src/bulma/pages/MaintenanceMode.vue

@@ -2,7 +2,7 @@
     <div class="container p-4 has-text-centered">
         <span class="icon is-large">
             <fa class="has-text-info"
-                icon="tools"
+                :icon="faScrewdriverWrench"
                 size="2x"/>
         </span>
         <p class="subtitle is-3 mx-6">
@@ -13,20 +13,18 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faTools } from '@fortawesome/free-solid-svg-icons';
-
-library.add(faTools);
+import { faScrewdriverWrench } from '@fortawesome/free-solid-svg-icons';
 
 export default {
     name: 'NotFound',
 
     components: { Fa },
 
-    inject: ['i18n'],
-
     data: () => ({
+        faScrewdriverWrench,
         message: 'The application is briefly unavailable for scheduled maintenance. Please check back in a few minutes',
     }),
+
+    inject: ['i18n'],
 };
 </script>

package/src/bulma/pages/NotFound.vue

@@ -2,7 +2,7 @@
     <div class="container p-4 has-text-centered">
         <span class="icon is-large">
             <fa class="has-text-warning"
-                icon="exclamation-triangle"
+                :icon="faTriangleExclamation"
                 size="2x"/>
         </span>
         <p class="subtitle is-3">
@@ -13,16 +13,17 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-
-library.add(faExclamationTriangle);
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export default {
     name: 'NotFound',
 
     components: { Fa },
 
+    data: () => ({
+        faTriangleExclamation,
+    }),
+
     inject: ['i18n'],
 };
 </script>

package/src/bulma/pages/Unauthorized.vue

@@ -2,7 +2,7 @@
     <div class="container p-4 has-text-centered">
         <span class="icon is-large">
             <fa class="has-text-danger"
-                icon="ban"
+                :icon="faBan"
                 size="2x"/>
         </span>
         <p class="subtitle is-3">
@@ -13,16 +13,17 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import { faBan } from '@fortawesome/free-solid-svg-icons';
 
-library.add(faBan);
-
 export default {
     name: 'Unauthorized',
 
     components: { Fa },
 
+    data: () => ({
+        faBan,
+    }),
+
     inject: ['i18n'],
 };
 </script>

package/src/bulma/styles/components/form.scss

@@ -0,0 +1,151 @@
+.vue-form {
+    color: var(--bulma-text);
+
+    &.box {
+        position: relative;
+        z-index: 2;
+        overflow: visible;
+    }
+
+    .form-tabs {
+        position: relative;
+        z-index: 1;
+    }
+
+    .tag.error-count {
+        padding: 0.5em;
+        margin-left: 0.3em;
+    }
+
+    .label,
+    .title,
+    .subtitle,
+    strong,
+    .help,
+    .content,
+    .section-divider {
+        color: inherit;
+    }
+
+    .label,
+    .title,
+    .subtitle,
+    strong {
+        color: var(--bulma-text-strong);
+    }
+
+    .label {
+        margin-bottom: 0.3rem;
+    }
+
+    .help,
+    .section-divider {
+        color: var(--bulma-text-light);
+    }
+
+    .help.is-danger {
+        color: var(--bulma-danger);
+    }
+
+    .help.is-warning {
+        color: var(--bulma-warning);
+    }
+
+    .help.is-success {
+        color: var(--bulma-success);
+    }
+
+    :is(.input, .textarea, .money.input),
+    .select select {
+        background-color: var(--bulma-input-background-color) !important;
+        border-color: var(--enso-surface-border) !important;
+        color: var(--bulma-text) !important;
+    }
+
+    :is(.input, .textarea, .money.input):not(.is-danger):not(.is-warning):not(.is-success):hover,
+    .select:not(.is-danger):not(.is-warning):not(.is-success) select:hover {
+        border-color: var(--bulma-border-hover) !important;
+    }
+
+    :is(.input, .textarea, .money.input):not(.is-danger):not(.is-warning):not(.is-success):focus,
+    :is(.input, .textarea, .money.input):not(.is-danger):not(.is-warning):not(.is-success):focus-visible,
+    :is(.input, .textarea, .money.input):not(.is-danger):not(.is-warning):not(.is-success).is-focused,
+    :is(.input, .textarea, .money.input):not(.is-danger):not(.is-warning):not(.is-success).is-active,
+    .select:not(.is-danger):not(.is-warning):not(.is-success) select:focus,
+    .select:not(.is-danger):not(.is-warning):not(.is-success) select:focus-visible,
+    .select:not(.is-danger):not(.is-warning):not(.is-success) select.is-focused,
+    .select:not(.is-danger):not(.is-warning):not(.is-success) select.is-active {
+        border-color: var(--bulma-border-active) !important;
+        box-shadow: none !important;
+    }
+
+    .money.input,
+    .flatpickr-input.input,
+    .dropdown.vue-dropdown .button.input {
+        min-height: var(--bulma-control-height);
+        height: var(--bulma-control-height);
+    }
+
+    :is(.input, .textarea)::placeholder {
+        color: var(--bulma-text-light) !important;
+        opacity: 1;
+    }
+
+    :is(.input, .textarea, .money.input, .flatpickr-input.input).is-danger,
+    .select.is-danger select,
+    .button.input.has-error,
+    .dropdown.vue-dropdown .button.input.has-error,
+    .vue-select .button.input.has-error {
+        border-color: var(--bulma-danger) !important;
+    }
+
+    :is(.input, .textarea, .money.input, .flatpickr-input.input).is-warning,
+    .select.is-warning select,
+    .button.input.has-warning,
+    .dropdown.vue-dropdown .button.input.has-warning,
+    .vue-select .button.input.has-warning {
+        border-color: var(--bulma-warning) !important;
+    }
+
+    :is(.input, .textarea, .money.input, .flatpickr-input.input).is-success,
+    .select.is-success select,
+    .button.input.is-successful,
+    .dropdown.vue-dropdown .button.input.is-successful,
+    .vue-select .button.input.is-successful {
+        border-color: var(--bulma-success) !important;
+    }
+
+    .control.has-icons-left .icon,
+    .control.has-icons-right .icon {
+        color: var(--bulma-text-light);
+    }
+
+    .control.has-icons-right .delete {
+        background-color: var(--bulma-text-light);
+    }
+
+    .control.has-icons-right .icon.reveal-password {
+        pointer-events: all;
+    }
+
+    .title.form-title .icon {
+        vertical-align: text-bottom;
+    }
+
+    .section-divider {
+        width: 100%;
+        padding: 0.75rem;
+    }
+
+    .field .vue-switch {
+        margin-top: 6px;
+        margin-bottom: 6px;
+    }
+
+    .box.is-shadowless {
+        background-color: var(--bulma-card-header-background-color) !important;
+        border: 1px solid var(--enso-surface-border);
+        box-shadow: none;
+        color: var(--bulma-text);
+    }
+}