@kusena/wui-single 18.0.1

package/scss/screen/buttons.scss

@@ -0,0 +1,177 @@
+@import "../variables/colors.scss";
+
+.wui-button {
+    border: none;
+    cursor: pointer;
+    padding-right: 1rem;
+    padding-left: 1rem;
+    height: 2.5rem;
+    line-height: 1;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    border-radius: .5rem;
+    vertical-align: middle;
+    color: #333;
+    background-color: #EFEFEF;
+
+    &:hover {
+        color: #222;
+        background-color: #DEDEDE;
+        text-decoration: none;
+    }
+
+    &:focus {
+        color: #222;
+        background-color: #CDCDCD;
+    }
+
+    &-small {
+        height: 2rem;
+        font-size: .875rem;
+        padding-left: .875rem;
+        padding-right:.875rem;
+        border-radius: .375rem;
+    }
+
+    &-large {
+        height: 3rem;
+        font-size: 1.125rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        border-radius: .625rem;
+
+        wui-icon {
+            margin-right: .75rem;
+        }
+    }
+
+    &-rounded {
+        border-radius: 1.25rem;
+
+        &.wui-button {
+            &-small {
+                border-radius: 1rem;
+            }
+
+            &-large {
+                border-radius: 1.5rem;
+            }
+        }
+    }
+
+    &-block {
+        width: 100%;
+    }
+
+    &-primary {
+        background-color: $theme-primary;
+        color: white !important;
+
+        &:hover {
+            background-color: darken($theme-primary, 5%);
+        }
+
+        &:focus {
+            background-color: darken($theme-primary, 10%);
+        }
+
+        &:active {
+            background-color: darken($theme-primary, 15%);
+        }
+    }
+
+    wui-icon {
+        margin-left: 0;
+        margin-right: .5rem;
+
+        &.trailing {
+            margin-right: 0;
+            margin-left: .5rem;
+        }
+    }
+
+    &-square {
+        padding-left: 0;
+        padding-right: 0;
+        width: 2.25rem;
+
+        wui-icon {
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        &.wui-button {
+            &-rounded {
+                border-radius: 50%;
+                padding-left: 0;
+                padding-right: 0;
+            }
+
+            &-large {
+                padding-left: 0;
+                padding-right: 0;
+                width: 3rem;
+
+                wui-icon {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    &-smooth {
+        background-color: transparent;
+        
+        &:hover {
+            background-color: rgba(0,0,0,0.04);
+        }
+
+        &:focus {
+            background-color: rgba(0,0,0,0.08);
+        }
+
+        &.wui-button-primary {
+            color: $theme-primary;
+
+            &:hover {
+                background-color: rgba($theme-primary, .12);
+            }
+
+            &:focus {
+                background-color: rgba($theme-primary, .20)
+            }
+        }
+    }
+
+    &-icon {
+        width: 2.25rem;
+        height: 2.25rem;
+        border-radius: 50%;
+        padding: 0;
+
+        wui-icon {
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        &.wui-button-large {
+            width: 3rem;
+            height: 3rem;
+        }
+    }
+
+    &-fab {
+        position: fixed;
+        bottom: 1.5rem;
+        right: 1.5rem;
+        z-index: 9;
+    }
+
+    &:disabled {
+        opacity: .5;
+    }
+
+}

package/scss/screen/core.scss

@@ -0,0 +1,103 @@
+@import "../variables/colors.scss";
+@import "../variables/defaults.scss";
+
+* {
+    -webkit-tap-highlight-color: transparent;
+    box-sizing:border-box;
+    outline:none;
+}
+
+html, body{
+    font-family: 'Inter', sans-serif;
+    color: var(--wui-color-blueGrey-800);
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    line-height: 1.5;
+}
+
+body {
+    font-size: .875rem;
+    margin: 0;
+}
+
+a {
+    color: var(--wui-color-blue-700);
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+        color: var(--theme-text-link-hover, darken($theme-primary, 10%));
+        text-decoration: underline;
+    }
+}
+
+wui-app {
+    position: absolute;
+    top: 0; left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    wui-drawer {
+        flex: 0 0 auto;
+    }
+
+    div.wui-app-main {
+        flex: 1 1 auto;
+        position: relative;
+    }
+
+    wui-nav {
+        flex: 1 1 auto;
+        position: relative;
+    }
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: var(--wui-color-blueGrey-900);
+}
+
+@import "loading.scss";
+@import "scrollbar.scss";
+@import "box.scss";
+@import "table.scss";
+@import "ripple.scss";
+@import "utils.scss";
+
+@import "tooltip.scss";
+@import "list.scss";
+@import "pagination.scss";
+@import "breadcrumb.scss";
+@import "searchbox.scss";
+@import "modal.scss";
+
+@import "selection.scss";
+@import "buttons.scss";
+
+@import "normalize.scss";
+@import "backdrop.scss";
+@import "icon.scss";
+@import "avatar.scss";
+@import "appbar.scss";
+@import "drawer.scss";
+@import "page.scss";
+@import "formfields.scss";
+@import "menu.scss";
+@import "loading.scss";
+@import "tabs.scss";
+@import "snackbar.scss";
+@import "sortable.scss";
+
+@import "toogle.scss";

package/scss/screen/drawer.scss

@@ -0,0 +1,273 @@
+@import '../variables/colors.scss';
+
+wui-drawer {
+    height: 100%;
+    position: fixed;
+    z-index: -1;
+    top: 0; left: 0;
+    width: 100%;
+
+    &-item {
+        font-size: .875rem;
+        font-weight: 500;
+        line-height: 1.25rem;
+        padding: .5rem 1.5rem;
+        position: relative;
+        cursor: pointer;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        border-top-right-radius: 1.25rem;
+        border-bottom-right-radius: 1.25rem;
+        max-width: 14.5rem;
+        color: $theme-text;
+    
+        wui-icon {
+            margin-right: 1.5rem;
+        }
+    
+        &.active {
+            background-color: rgba($theme-primary, .12);
+            color: $theme-primary;            
+            font-weight: 500;
+        }
+    
+        &:hover:not(.active) {
+            color: $theme-primary;
+        }
+    }
+
+    .wui-drawer {
+        &-inner {
+            overflow-y: auto;
+            height: 100%;
+            position: relative;
+            padding-top: 1.5rem;
+            padding-bottom: 1.5rem;
+            max-width: 16rem;
+            background-color: white;
+        }
+
+        &-divider {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding-top: 1rem;
+            padding-bottom: .5rem;
+    
+            &-label {
+                padding-left: 1.5rem;
+                font-size: 0.75rem;
+                font-weight: bold;
+                color: rgba(0, 0, 0, 0.54);
+            }
+        }
+
+        &-header {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            padding-bottom: 1.5rem;
+    
+            &-avatar {
+                padding-left: 1.5rem;
+                padding-bottom: .5rem;
+
+                img {
+                    width: 4rem;
+                    height: 4rem;
+                    border-radius: 2rem;
+                }
+            }
+
+            &-title {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                padding-top: 1rem;
+                padding-left: 1.5rem;
+                width: 100%;
+            }
+
+            &-subtitle {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                font-size: 0.875rem;
+                padding: 0 1.5rem;
+                width: 100%;
+            }
+    
+            &-button{
+                display: flex;
+                align-items: center;
+                color: $theme-text;
+                padding: .75rem 1rem .75rem 1.5rem;
+                overflow: hidden;
+                width: 100%;    
+    
+                &:hover {
+                    text-decoration: none;
+                    background-color: rgba(0,0,0,0.02);
+                }
+    
+                &-caption {
+                    flex: 1 1 auto;
+                }
+    
+                
+    
+                wui-icon {
+                    flex: 0 0 auto;
+                }
+            }
+        }
+    }
+
+    &.show {
+        z-index: 99;
+
+        .wui-drawer {
+            &-backdrop {
+                z-index: 0;
+                background-color: rgba(0,0,0,0.5);
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%; 
+                height: 100%;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 768px){
+    wui-drawer {
+        position: relative;
+        max-width: 6rem;
+        z-index: 0;
+
+        &-item {
+            max-width: 5rem;
+
+            .content {
+                display: none;
+            }
+        }
+
+        .wui-drawer {
+            &-header {
+                &-avatar {
+                    padding-left: 1rem;
+
+                    img {
+                        width: 3rem;
+                        height: 3rem;
+                    }
+                }
+
+                &-title, &-subtitle {
+                    display: none;
+                }
+            }
+
+            &-inner {
+                max-width: none;
+            }
+
+            &-backdrop {
+                display: none;
+            }
+
+            &-divider {
+                &-label {
+                    display: none;
+                }
+            }
+        }
+
+        &.show {
+            max-width: 16rem;
+            z-index: 0;
+
+            wui-drawer{
+                &-item {
+                    max-width: 14.5rem;
+
+                    .content {
+                        display: block;
+                    }
+                }
+            }
+
+            .wui-drawer {
+                &-header {
+                    &-avatar {
+                        padding-left: 1.5rem;
+
+                        img {
+                            width: 4rem;
+                            height: 4rem;
+                        }
+                    }
+
+                    &-title, &-subtitle {
+                        display: block;
+                    }
+                }
+
+                &-divider {
+                    &-label {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        &:hover:not(.show) {
+            overflow-x: visible;
+            z-index: 99;
+
+            wui-drawer{
+                &-item {
+                    max-width: 14.5rem;
+                    .content {
+                        display: block;
+                    }
+                }
+            }
+
+            .wui-drawer {
+                &-header {
+                    &-avatar {
+                        padding-left: 1.5rem;
+
+                        img {
+                            width: 4rem;
+                            height: 4rem;
+                        }
+                    }
+
+                    &-title, &-subtitle {
+                        display: block;
+                    }
+                }
+
+                &-inner {
+                    width: 16rem;
+                    position: absolute;
+                    top: 0; left: 0;
+                    z-index: 999;
+                    background-color: white;
+                    box-shadow: 0 0 .5rem 0.25rem rgba(0,0,0,0.1);
+                }
+
+                &-divider {
+                    &-label {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+}