@kusena/wui-single 18.0.1

package/scss/screen/toogle.scss

@@ -0,0 +1,79 @@
+.wui-toggle {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 2.25rem;
+    margin-bottom: 1.25rem;
+}
+
+wui-toggle {
+    display: inline-flex;
+    align-items: center;
+    height: 2.5rem;
+    margin-bottom: 1.25rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+
+    &:focus, &:hover {
+        .wui-toggle-switch {
+            outline-width: .5rem;
+        }
+    }
+
+    &.wui-toggle-checked {
+        .wui-toggle-switch {
+            left: 100%;
+            background-color: var(--wui-color-primary);
+            box-shadow: 0 0.125rem 0.125rem 0.075rem rgba(25, 118, 210, 0.25);
+
+            &-outer {
+                background-color: rgba(25, 118, 210, 0.2);
+            }
+        }
+    }
+
+    .wui-toggle {
+        &-switch {
+            width: 1.5rem;
+            height: 1.5rem;
+            border-radius: 0.75rem;
+            transition: outline linear .1s, left linear .2s;
+            outline: 0 solid rgba(25, 118, 210, 0.2);
+            position: absolute;
+            left: 0;
+            transform: translate(-50%, -50%);
+            background-color: white;
+            box-shadow: 0 0.125rem 0.125rem 0.075rem rgba(0, 0, 0, 0.25);
+        }
+
+        &-switch-outer {
+            width: 2.5rem;
+            height: 1.5rem;
+            border-radius: 0.75rem;
+            background-color: #EFEFEF;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &-switch-track {
+            position: relative;
+            height: 0;
+            width: 1rem;
+            overflow: visible;
+        }
+    }
+
+    &[disabled] {
+        .wui-toggle {
+            &-switch {
+                background-color: rgba(var(--wui-color-primary-rgb), 0.5);
+                box-shadow: 0 0.125rem 0.125rem 0.075rem rgba(200, 200, 200, 0.35);
+                outline: none;
+            }
+
+            &-switch-outer  {
+                background-color: #EFEFEF;
+            }
+        }
+    }
+}

package/scss/screen/tooltip.scss

@@ -0,0 +1,16 @@
+.tooltip {
+    position: fixed;
+    z-index: 999999;
+    transform: translateX(-50%);
+    font-size: .75rem;
+    font-weight: normal;
+    padding: .25rem .375rem;
+    background-color: rgba(0,0,0,0.6);
+    color: white;
+    border-radius: .25rem;
+    display: none;
+
+    &.show {
+        display: block;
+    }
+}

package/scss/screen/utils.scss

@@ -0,0 +1,140 @@
+h1, h2, h3, h4, h5, h6 {
+    display:block;
+    line-height: 1.5;
+}
+
+h1{ 
+    font-size: 2.5rem;
+    font-weight: normal;
+}
+
+h2{ 
+    font-size: 2rem;
+}
+
+h3{
+    font-size: 1.75rem;
+}
+
+h4{
+    font-size: 1.5rem;
+}
+
+h5{
+    font-size: 1.25rem;
+}
+
+h6{
+    font-size: 1rem;
+}
+
+.title {
+    font-size: 1rem;
+}
+
+.sub-title {
+    font-size: .875rem;
+    color: $theme-light-text;
+}
+
+@mixin font-weight($breakpoint: null) {
+    .font-weight {
+        &#{if($breakpoint != null, "-" + $breakpoint, "")} {
+            &-100 { font-weight: 100; }
+            &-200 { font-weight: 200; }
+            &-300 { font-weight: 300; }
+            &-400, &-normal { font-weight: 400; }
+            &-500 { font-weight: 500; }
+            &-600 { font-weight: 600; }
+            &-700, &-bold { font-weight: 700; }
+        }
+    }
+}
+
+@include font-weight;
+@media screen and (max-width: 575px) { @include font-weight("sm"); }
+@media screen and (min-width: 576px) { @include font-weight("md"); }
+@media screen and (min-width: 992px) { @include font-weight("lg"); }
+@media screen and (min-width: 1200px) { @include font-weight("xl"); }
+
+@mixin font-sizes($breakpoint: null) {
+    .font {
+        &#{if($breakpoint != null, "-" + $breakpoint, "")} {
+            &-12 { font-size: .75rem; }
+            &-14 { font-size: .875rem; }
+            &-16 { font-size: 1rem; }
+            &-18 { font-size: 1.125rem; }        
+            &-20 { font-size: 1.25rem; }
+            &-24 { font-size: 1.5rem; }
+            &-28 { font-size: 1.75rem; }
+            &-32 { font-size: 2rem; }
+            &-48 { font-size: 3rem; }
+            &-64 { font-size: 4rem; }
+        }
+    }
+}
+
+@include font-sizes;
+@media screen and (max-width: 575px){ @include font-sizes("sm"); }
+@media screen and (min-width: 576px) { @include font-sizes("md"); }
+@media screen and (min-width: 992px) { @include font-sizes("lg"); }
+@media screen and (min-width: 1200px) { @include font-sizes("xl"); }
+
+@mixin max-width($breakpoint: null) {
+    .mw {
+        &#{if($breakpoint != null, "-" + $breakpoint, "")} {
+            &-400 { max-width: 400px; }
+            &-500 { max-width: 500px; }
+            &-600 { max-width: 600px; }
+            &-700 { max-width: 700px; }
+            &-800 { max-width: 800px; }
+        }
+    }
+}
+
+@include max-width;
+@media screen and (max-width: 575px){ @include max-width("sm"); }
+@media screen and (min-width: 576px) { @include max-width("md"); }
+@media screen and (min-width: 992px) { @include max-width("lg"); }
+@media screen and (min-width: 1200px) { @include max-width("xl"); }
+
+
+.wui-label {
+    font-size: .75rem;
+    padding: .25rem;
+    border: 1px solid $theme-text;
+    border-radius: .25rem;
+    display: inline-block;
+
+    &-success {
+        color: #28a745;
+        border-color: #28a745;
+    }
+
+    &-danger {
+        color: #dc3545;
+        border-color: #dc3545;
+    }
+}
+
+.wui-box {
+    background-color: white;
+    padding: 1rem;
+    border-radius: .5rem;
+    width: 100%;
+    height: 500px;
+}
+
+.wui-edge-fix {
+    width: calc(100% + 3rem);
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+}
+
+@media screen and (max-width: 768px) {
+    .wui-edge-fix {
+        width: calc(100% + 2rem);
+        margin-left: -1rem;
+        margin-right: -1rem;
+    }   
+}

package/scss/variables/colors.scss

@@ -0,0 +1,180 @@
+$wui-colors: (
+    "blue": (
+        "50": #e3f2fd,
+        "100": #bbdefb,
+        "200": #90caf9,
+        "300": #64b5f6,
+        "400": #42a5f5,
+        "500": #2196f3,
+        "600": #1e88e5,
+        "700": #1976d2,
+        "800": #1565c0,
+        "900": #0d47a1,
+    ),
+    "blueGrey": (
+        "50": #eceff1,
+        "100": #cfd8dc,
+        "200": #b0bec5,
+        "300": #90a4ae,
+        "400": #78909c,
+        "500": #607d8b,
+        "600": #546e7a,
+        "700": #455a64,
+        "800": #37474f,
+        "900": #263238,
+    ),
+    "green": (
+        "50": #e8f5e9,
+        "100": #c8e6c9,
+        "200": #a5d6a7,
+        "300": #81c784,
+        "400": #66bb6a,
+        "500": #4caf50,
+        "600": #43a047,
+        "700": #388e3c,
+        "800": #2e7d32,
+        "900": #1b5e20,
+    ),
+    "red": (
+        "50": #ffebee,
+        "100": #ffcdd2,
+        "200": #ef9a9a,
+        "300": #e57373,
+        "400": #ef5350,
+        "500": #f44336,
+        "600": #e53935,
+        "700": #d32f2f,
+        "800": #c62828,
+        "900": #b71c1c,
+    ),
+    "orange": (
+        "50": #fff3e0,
+        "100": #ffe0b2,
+        "200": #ffcc80,
+        "300": #ffb74d,
+        "400": #ffa726,
+        "500": #ff9800,
+        "600": #fb8c00,
+        "700": #f57c00,
+        "800": #ef6c00,
+        "900": #e65100,
+    )
+) !default;
+
+@if variable-exists(wui-additional-colors) {
+    $wui-colors: map-merge($wui-colors, $wui-additional-colors);
+}
+
+:root {
+    @each $name, $variants in $wui-colors {
+        @each $variant, $color in $variants {
+            --wui-color-#{$name}-#{$variant}: #{$color};       
+        }
+    }    
+}
+
+@each $name, $variants in $wui-colors {
+    @each $variant, $color in $variants {
+        .text-#{$name}-#{$variant} {
+            color: #{$color};
+        }
+
+        .bg-#{$name}-#{$variant} {
+            background-color: #{$color};
+        }
+
+        .border-#{$name}-#{$variant} {
+            border-color: #{$color}
+        }
+    }
+}
+
+$theme: (
+    "50" : #E3F2FD,
+    "100" : #BBDEFB,
+    "200" : #90CAF9,
+    "300" : #64B5F6,
+    "400" : #42A5F5,
+    "500" : #2196F3,
+    "600" : #1E88E5,
+    "700" : #1976D2,
+    "800" : #1565C0,
+    "900" : #0D47A1,
+    "secondary" : #222
+);
+
+$theme-text: rgba(0, 0, 0, 0.87) !default;
+$theme-primary: map-get($theme, "700") !default;
+$theme-secondary: #212121 !default;
+$theme-danger: #B00020 !default;
+$theme-light: rgba(125,125,125, .12) !default;
+$theme-backdrop: rgba(0,0,0,0.5) !default;
+
+$theme-button-hover-bg: darken($theme-light, 50%);
+$theme-button-focus-bg: darken($theme-button-hover-bg, 100%);
+
+$theme-light-bg: #FFF;
+$theme-light-text: rgba(0, 0, 0, 0.67);
+
+$theme-dark-bg: rgba(0, 0, 0, 0.87);
+$theme-dark-text: rgba(255,255,255,0.67);
+
+$theme-dark-button-text: rgba(255,255,255,0.67);
+$theme-dark-button-bg: transparent;
+
+$theme-dark-button-hover-text: #FFF;
+$theme-dark-button-hover-bg: rgba(255,255,255,.16);
+
+$theme-button-text: $theme-text;
+$theme-button-bg: $theme-light;
+$theme-button-hover-text: darken($theme-text, 5%);
+$theme-button-focus-text: darken($theme-text, 5%);
+$theme-button-smooth-text: $theme-text;
+$theme-button-smooth-hover-bg: lighten($theme-light, 3%);
+$theme-button-smooth-focus-bg: lighten($theme-light, 5%);
+
+$theme-button-primary-text: #FFF;
+$theme-button-primary-bg: $theme-primary;
+$theme-button-primary-hover-text: #FFF;
+$theme-button-primary-hover-bg: lighten($theme-primary, 5%);
+$theme-button-primary-focus-text: #FFF;
+$theme-button-primary-focus-bg: lighten($theme-primary, 10%);
+$theme-button-primary-smooth-text: $theme-primary;
+$theme-button-primary-smooth-hover-bg: rgba($theme-primary, 10%);
+$theme-button-primary-smooth-focus-bg: rgba($theme-primary, 20%);
+
+$theme-button-secondary-text: #FFF;
+$theme-button-secondary-bg: $theme-secondary;
+$theme-button-secondary-hover-text: #FFF;
+$theme-button-secondary-hover-bg: lighten($theme-secondary, 5%);
+$theme-button-secondary-focus-text: #FFF;
+$theme-button-secondary-focus-bg: lighten($theme-secondary, 10%);
+$theme-button-secondary-smooth-text: $theme-secondary;
+$theme-button-secondary-smooth-hover-bg: rgba($theme-secondary, 10%);
+$theme-button-secondary-smooth-focus-bg: rgba($theme-secondary, 20%);
+
+$theme-button-danger-text: #FFF;
+$theme-button-danger-bg: $theme-danger;
+$theme-button-danger-hover-text: #FFF;
+$theme-button-danger-hover-bg: lighten($theme-danger, 5%);
+$theme-button-danger-focus-text: #FFF;
+$theme-button-danger-focus-bg: lighten($theme-danger, 10%);
+$theme-button-danger-smooth-text: $theme-danger;
+$theme-button-danger-smooth-hover-bg: rgba($theme-danger, 10%);
+$theme-button-danger-smooth-focus-bg: rgba($theme-danger, 20%);
+
+$theme-list-item-selected-bg: rgba($theme-primary, 15%);
+$theme-list-item-selected-text: $theme-primary;
+
+$theme-avatar-bg: rgba(#000, 12%);
+$theme-checkbox: rgba(#000, 38%);
+$theme-toggle-track-bg: rgba(#000, 12%);
+
+$theme-border: rgba(0, 0, 0, 0.08);
+$theme-text: rgba(0, 0, 0, 0.67);
+$theme-black: (
+    "87": rgba(0, 0, 0, 0.87),
+    "77": rgba(0, 0, 0, 0.77),
+    "67": rgba(0, 0, 0, 0.67),
+    "54": rgba(0, 0, 0, 0.54)
+)

package/scss/wui.scss

@@ -0,0 +1,2 @@
+@import '@angular/cdk/overlay-prebuilt.css';
+@import "screen/core.scss";