@kusena/wui-single 18.0.1

package/scss/screen/formfields.scss

@@ -0,0 +1,288 @@
+@import '../variables/colors.scss';
+
+wui-form-field {
+    position: relative;
+    display: block;
+    width: 100%;
+    margin-bottom: 1.75rem;
+
+    .wui-form-field {
+
+        &-flex {
+            display: flex;
+            align-items: center;
+            z-index: 0;
+            width: 100%;
+            position: relative;
+            height: 3.5rem;
+
+            &:before {
+                content: "";
+                display: block;
+                height: 1px;
+                width: 100%;
+                position: absolute;
+                bottom: 0; left: 0;
+                background-color: #CCC;
+                z-index: 0;
+            }
+
+            &:after {
+                content: "";
+                display: block;
+                height: 2px;
+                background-color: $theme-primary;
+                width: 0;
+                left: 50%;
+                opacity: 0;
+                position: absolute;
+                bottom: 0;
+                transition: all .15s ease-in-out;
+            }
+        }
+
+        &-infix {
+            flex: 1 1 auto;
+            position: relative;
+            display: flex;
+            align-items: center;
+            height: 100%;
+            opacity: 1;
+        }
+
+        &-input {
+            &-prefix, &-suffix {
+                flex: 0 1 auto;
+                display: inline-flex;
+                align-items: center;
+            }
+        }
+
+        &-input-prefix, &-prefix {
+            padding-right: 1rem;
+        }
+
+        &-input-suffix, &-suffix {
+            padding-left: 1rem;
+        }
+
+        &-hint {
+            margin-top: .5rem;
+            font-size: .75rem;
+            line-height: 1rem;
+        }
+    }
+
+    input, textarea, select {
+        -webkit-appearance: none;
+        height: 100%;
+        width: 100%;
+        border: none;
+        position: relative;
+        z-index: 1;
+        background-color: transparent;
+        font-family: inherit;
+        appearance: none;
+        box-sizing: border-box;
+        padding: 0;
+
+        &:-webkit-autofill{
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: #ffffff;
+        }
+
+        &::placeholder {
+            font-family: inherit;
+        }
+    }
+
+    textarea {
+        height: auto;
+        padding: 1.5rem 0 2px;
+        width: 100%;
+    }
+
+    select {
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path fill="rgba(0,0,0,.67)" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>');
+        background-size: 1.5rem 1.5rem;
+        background-repeat: no-repeat;
+        background-position: calc(100% - .5rem) 50%;
+    }
+
+    input[type="date"], input[type="datetime-local"] {
+        -webkit-appearance: none;
+        appearance: none;
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path fill="rgba(0,0,0,.67)" d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8M12,13H17V18H12V13Z" /></svg>');
+        background-size: 1.5rem 1.5rem;
+        background-repeat: no-repeat;
+        background-position: calc(100% - .5rem) 50%;
+
+        &::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator {
+            background: transparent;
+            bottom: 0; left: 0; right: 0; top: 0;
+            color: transparent;
+            cursor: pointer;
+            height: auto;
+            position: absolute;
+            width: auto;
+        }
+    }
+
+    label {
+        position: absolute;
+        left: 0; top: 50%;
+        transform: translateY(-50%);
+        transition: all .15s ease-in-out;
+    }
+
+    &:has(label) {
+        .wui-form-field-infix > *:not(label) {
+            opacity: 0;
+        }
+
+        &:has(input:focus), &:has(select:focus), &.has-content {
+            .wui-form-field-infix > *:not(label) {
+                opacity: 1;
+            }
+
+            label {
+                top: 0;
+                font-size: .75rem;
+            }
+        }
+    }
+
+    &:has(input:focus), &:has(select:focus) {
+        .wui-form-field-flex {
+            &:after {
+                width: 100%;
+                left: 0;
+                opacity: 1;
+            }
+        }
+    }
+
+    &.has-error {
+        label {
+            color: #E82C2C;
+        }
+
+        .wui-form-field {
+
+            &-flex {
+                &:before, &:after {
+                    background-color: #E82C2C;
+                }
+
+                input, select, textarea {
+                    color: #E82C2C;
+                }
+            }
+
+            &-hint {
+                color: #E82C2C;
+            }
+        }
+    }
+
+    &.wui-form-field {
+        &-boxed {
+            .wui-form-field {
+                &-flex {
+                    border: 1px solid #CCC;
+                    border-radius: .375rem;
+                    padding: 0 .5rem;
+                    height: 3.5rem;
+
+                    &:before {
+                        display: none;
+                    }
+
+                    &:after {
+                        display: none;
+                    }
+                }
+
+                &-prefix, &-suffix {
+                    padding-left: .5rem;
+                    padding-right: .5rem;
+                }
+
+                &-input {
+                    &-prefix, &-suffix {
+                        padding-left: .5rem;
+                        padding-right: .5rem;
+                    }   
+                }
+
+                &-hint {
+                    padding: 0 .5rem;
+                }
+            }
+
+            label {
+                background-color: #FFF;
+                padding: 0 0.5rem;
+            }
+
+            &:not(.has-error) {
+                &:has(input:focus), &:has(select:focus) {
+                    .wui-form-field-flex  {
+                        border-color: $theme-primary;
+                    }
+    
+                    label {
+                        color: $theme-primary;
+                    }
+                }
+            }
+
+            input, select, textarea  {
+                padding: 0 .5rem;
+            }
+
+            &.has-error {
+                .wui-form-field-flex {
+                    border-color: #E82C2C;
+                }
+            }
+        }
+
+        &-narrow {
+            margin-bottom: 1.25rem;
+
+            .wui-form-field{
+                &-flex {
+                    height: 2.5rem;
+                    // padding: 0 .25rem;
+                }
+
+                &-input-prefix, &-prefix {
+                    padding-left: .25rem;
+                    padding-right: .5rem;
+                }
+
+                &-input-suffix, &-suffix {
+                    padding-right: .25rem;
+                    padding-left: .5rem;
+                }
+            }
+
+            &.wui-form-field-boxed {
+                .wui-form-field {
+                    &-suffix, &-prefix, &-input-prefix, &-input-suffix {
+                        padding: 0 .25rem;
+                    }
+                }
+            }
+
+            // label, input, select {
+            //     padding: 0 .25rem;
+            // }
+
+            input[type="date"], input[type="datetime-local"], select {
+                background-position: calc(100% - .25rem) 50%;
+            }
+        }
+    }
+}

package/scss/screen/icon.scss

@@ -0,0 +1,33 @@
+wui-icon.mdi {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+
+    &::before {
+        font-size: 1.5rem;
+        line-height: 1rem;
+    }
+
+    &.wui-icon {
+        &-12 {
+            width: .75rem;
+            height: .75rem;
+            font-size: .75rem;
+        }
+
+        &-14 {
+            width: .875rem;
+            height: .875rem;
+            font-size: .875rem;
+        }
+
+        &-16 {
+            width: 1rem;
+            height: 1rem;
+            font-size: 1rem;
+        }
+    }
+
+}

package/scss/screen/list.scss

@@ -0,0 +1,90 @@
+@import '../../scss/variables/colors.scss';
+
+wui-list {
+    display: block;
+
+    &-tile {
+        display: flex;
+        align-items: center;
+        height: 3rem;
+        padding: 0 1.125rem 0 1.5rem;
+    }
+
+    &.wui-list {
+
+        &-hovered{
+            wui-list-tile {
+                &:not(.wui-list-tile-header):hover {
+                    background-color: rgba(#000, 4%);
+                }
+
+                &.wui-list-tile-no-hover {
+                    &:hover {
+                        background-color: transparent;
+                    }
+                }
+            }
+        }
+
+        &-bordered {
+            wui-list-tile:not(:last-child) {
+                border-bottom: 1px solid $theme-border;
+            }
+        }
+    
+    }
+
+    .wui-list {
+        &-tile {
+            &-header {
+                font-weight: bold;
+                font-size: .875rem;
+
+                &-sticky {
+                    position: sticky;
+                    top: 0;
+                    width: 100%;
+                    z-index: 99;
+                    background-color: white;
+                }
+            }
+
+            &-32 { height: 2rem; }
+            &-56 { height: 3.5rem; }
+            &-64 { height: 4rem; }
+            &-72 { height: 4.5rem; }
+
+            &-content {
+                flex: 1 1 auto;
+            }
+    
+            &-leading {
+                flex: 0 0 auto;
+                min-width: 3.5rem;
+
+                .wui-button {
+                    margin-left: -.375rem;
+                }
+            }
+    
+            &-trailing {
+                flex: 0 0 auto;
+                min-width: 3.25rem;
+                padding-left: 1rem;
+            }
+    
+            &-active {
+                background-color: $theme-list-item-selected-bg;
+                color: $theme-primary;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 768px) {
+    wui-list {
+        &-tile {
+            padding: 0 .625rem 0 1.125rem;
+        }
+    }
+}

package/scss/screen/loading.scss

@@ -0,0 +1,169 @@
+@import '../variables/colors.scss';
+
+wui-loading{
+  display:block;
+
+  &.mode-indeterminate{
+      overflow: hidden;
+      width: 100%;
+      height: .25rem;
+      background-color: #B3E5FC;
+      display:block;
+      position:relative;
+
+      .indeterminate {
+          position:relative;
+          width: 100%;
+          height: 100%;
+      
+          &:before {
+              content: '';
+              position: absolute;
+              height: 100%;
+              background-color: map-get($wui-colors, $theme, "500");
+              animation: indeterminate_first 1.5s infinite ease-out;
+          }
+          
+          &:after {
+              content: '';
+              position: absolute;
+              height: 100%;
+              background-color: map-get($theme, "300");
+              animation: indeterminate_second 1.5s infinite ease-in;
+          }
+      }
+      
+      @keyframes indeterminate_first {
+          0% {
+              left: -100%;
+              width: 100%;
+          }
+          100% {
+              left: 100%;
+              width: 10%;
+          }
+      }
+      
+      @keyframes indeterminate_second {
+          0% {
+              left: -150%;
+              width: 100%;
+          }
+          100% {
+              left: 100%;
+              width: 10%;
+          }
+      }
+  }
+
+  &.mode-linear{
+      overflow: hidden;
+      width: 100%;
+      height: .25rem;
+      background-color: map-get($theme, "50");
+      display:block;
+      position:relative;
+
+      .linear{
+          position:relative;
+          width: 100%;
+          height: 100%;
+
+          .pos{
+              position:absolute;
+              display:block;
+              height:100%;
+              top:0;left:0;
+              background-color: map-get($theme, "500");
+          }
+      }
+  }
+
+  &.mode-circular{
+      .loader {
+          position: relative;
+          margin: 0 auto;
+          overflow:hidden;
+          &:before {
+            content: '';
+            display: block;
+            padding-top: 100%;
+          }
+        }
+        
+        .circle {
+          animation: rotate 2s linear infinite;
+          height: 100%;
+          transform-origin: center center;
+          width: 100%;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          margin: auto;
+        }
+        
+        .path {
+          stroke-dasharray: 1, 200;
+          stroke-dashoffset: 0;
+          stroke: var(--theme-primary, $theme-primary);
+          animation: dash 1.5s ease-in-out infinite;
+          stroke-linecap: round;
+        }
+        
+        @keyframes rotate {
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+        
+        @keyframes dash {
+          0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+          }
+          50% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -35px;
+          }
+          100% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -124px;
+          }
+        }
+  }
+
+}
+
+// wui-loading-dialog {
+//   position: fixed;
+//   top: 0; left: 0;
+//   width: 100%;
+//   height: 100%;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   z-index: -1;
+//   opacity: 0;
+
+//   .wui-loading-dialog-inner {
+//     z-index: -1;
+//   }
+
+//   &.show {
+//     z-index: 10000;
+//     opacity: 1;
+
+//     .wui-loading-dialog-inner {
+//       z-index: 1000;
+//       position: relative;
+      
+//       border-radius: 50%;
+//       display: flex;
+//       justify-content: center;
+//       align-items: center;
+      
+//     }
+//   }
+// }

package/scss/screen/menu.scss

@@ -0,0 +1,120 @@
+@keyframes menuShow {
+    0% {
+        opacity: 0;
+        transform: translate(.25rem, -.25rem);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+}
+
+.wui-menu {
+    display: block;
+    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+    background-color: white;
+    border-radius: .25rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    min-width: 7rem;
+    max-width: 17.5rem;
+    overflow-y: auto;
+
+    &-item {
+        display: flex;
+        align-items: center;
+        padding: 0 1.5rem;
+        height: 3rem;
+        font-size: .875rem;
+        line-height: 1rem;
+        font-weight: 500;
+        text-decoration: none;
+        color: rgba(0,0,0,.67);
+        border: none;
+        background-color: transparent;
+        width: 100%;
+
+        &:hover, &:active, &:focus {
+            background-color: rgba(0,0,0, .04);
+            cursor: pointer;
+        }
+
+        wui-icon {
+            line-height: 1rem;
+        }
+    }
+
+    &-compact {
+        .wui-menu-item {
+            height: 2.25rem;
+        }
+    }
+}
+
+wui-menu {
+    position: fixed;
+    display: block;
+    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+    background-color: white;
+    border-radius: .25rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    min-width: 7rem;
+    max-width: 17.5rem;
+    opacity: 0;
+    z-index: -1;
+    overflow-y: auto;
+
+    &.show {
+        opacity: 1;
+        z-index: 99999;
+    }
+
+    &-item {
+        display: flex;
+        align-items: center;
+        padding: 0 1.5rem;
+        height: 3rem;
+        font-size: .875rem;
+        line-height: 1rem;
+        font-weight: 500;
+        text-decoration: none;
+        color: rgba(0,0,0,.67);
+
+        &:hover {
+            background-color: rgba(0,0,0, .04);
+            cursor: pointer;
+        }
+
+        wui-icon {
+            line-height: 1rem;
+        }
+    }
+
+    .wui-menu {
+        &-divider {
+            display: block;
+            border-top: 1px solid rgba(0,0,0, .08);
+            margin-top: .5rem;
+            margin-bottom: .5rem;
+        }
+
+        &-item {
+            &-leading {
+                width: 2.75rem;
+                flex: 0 0 auto;
+            }
+    
+            &-content {
+                flex: 1 1 auto;
+            }
+        }
+    }
+
+    &.compact {
+        wui-menu-item {
+            height: 2.25rem;
+        }
+    }
+}