@kusena/wui-single 18.0.1

package/scss/screen/pagination.scss

@@ -0,0 +1,46 @@
+wui-pagination {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    padding-top: 1.5rem;
+
+    .label {
+        flex: 1 1 auto;
+        font-size: .875rem;
+    }
+
+    .nav {
+        flex: 0 0 auto;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        align-items: center;
+        display: flex;
+
+        li {
+            margin: 0;
+            padding: 0;
+
+            button {
+                width: 1.75rem;
+                height: 1.75rem;
+
+                svg {
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    opacity: .67;
+                }
+            }            
+        }
+    }
+
+}
+
+@media screen and (min-width: 767px) {
+    wui-pagination {
+        padding-left: 1.5rem;
+        padding-top: 1.5rem;
+        padding-right: 1rem;
+        border-top: 1px solid var(--theme-border);
+    }
+}

package/scss/screen/ripple.scss

@@ -0,0 +1,18 @@
+.wuiRipple__obj {
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 0;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+
+    &.wuiRipple__light {
+        background-color: rgba(255,255,255,0.8);
+    }
+
+    &.wuiRipple__dark {
+        background-color: rgba(0,0,0,0.8);
+    }
+}

package/scss/screen/scrollbar.scss

@@ -0,0 +1,108 @@
+.ps {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  -ms-overflow-style: none;
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+
+.ps__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear, height .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear, height .2s linear;
+  height: 6px;
+  bottom: 0px;
+  position: absolute;
+}
+
+.ps__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear, width .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear, width .2s linear;
+  width: 6px;
+  right: 0;
+  position: absolute;
+}
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y {
+  display: block;
+  background-color: #EFEFEF;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+  opacity: 0.8;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+  background-color: #eee;
+  opacity: 1;
+}
+
+.ps .ps__rail-y:hover {
+  border-left: 1px solid #ededed;
+  width: 15px;
+}
+
+.ps__thumb-x {
+  background-color: #999;
+  transition: background-color .2s linear, height .2s ease-in-out;
+  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
+  height: 4px;
+  bottom: 1px;
+  box-sizing: border-box;
+  position: absolute;
+  border-radius: 2px;
+}
+
+.ps__thumb-y {
+  background-color: #999;
+  transition: background-color .2s linear, width .2s ease-in-out;
+  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
+  width: 4px;
+  right: 1px;
+  position: absolute;
+  border-radius: 2px;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+  background-color: #555;
+  height: 11px;
+  bottom: 2px;
+  border-radius: 6px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+  background-color: #999;
+  width: 11px;
+  right: 2px;
+  border-radius: 6px;
+}
+
+@supports (-ms-overflow-style: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}

package/scss/screen/searchbox.scss

@@ -0,0 +1,40 @@
+.wui-search-box {
+    position: relative;
+
+    span.mdi {
+        position: absolute;
+        top: .125rem;
+    }
+
+    span.mdi-magnify {
+        left: .5rem;
+    }
+
+    span.mdi-close {
+        right: .5rem;
+    }
+
+    input {
+        height: 2.25rem;
+        border: none;
+        padding-left: 3rem;
+        padding-right: 3rem;
+        background-color: #EFEFEF;
+        font-size: 1rem;
+        font-family: 'Roboto', sans-serif;
+        border-radius: .25rem;
+
+        &:focus {
+            background-color: #F2F2F2;
+            border: 2px solid var(--theme-primary);
+            padding-left: calc(3rem - 2px);
+            padding-right: calc(3rem - 2px);
+        }
+    }
+
+    &:focus-within {
+        span.mdi-magnify {
+            color: var(--theme-primary);
+        }
+    }
+}

package/scss/screen/selection.scss

@@ -0,0 +1,190 @@
+.wui-checkbox, .wui-radio {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    height: 1.5rem;
+    width: 100%;
+
+    &-mark {
+        order: 0;
+        position: relative;
+        justify-self: self-start;
+
+        &:before {
+            font-family: 'Material Design Icons';
+            content: "\F0131";
+            display: block;
+            font-size: 1.5rem;
+            width: 1.5rem;
+            height: 1.5rem;
+            color: var(--theme-checkbox, $theme-checkbox);
+        }
+
+        &:after {
+            content: "";
+            position: absolute;
+            width: 0rem;
+            height: 0rem;
+            left: 50%; top: 50%;
+            transition: all ease-in-out .2s;
+        }
+    }
+
+    &-label {
+        padding-left: 1rem;
+    }
+
+    input[type=checkbox], input[type=radio] {
+        opacity: 0;
+        position: absolute;
+        top: 0; left: 0;
+        z-index: 3;
+    }
+
+    &:hover, &:focus-within {
+        .wui-checkbox-mark, .wui-radio-mark {
+            &:after {
+                display: block;
+                width: 2.5rem;
+                height: 2.5rem;
+                background-color: rgba($theme-primary, .5);
+                opacity: .37;
+                left: -.5rem;
+                top: -.5rem;
+                border-radius: 1.25rem;
+            }
+        }
+    }
+
+    input[type=checkbox]:checked {
+        ~ .wui-checkbox-mark {
+            &:before {
+                content: "\F0132";
+                color: var(--theme-primary, $theme-primary);
+            }
+        }
+    }
+}
+
+.wui-radio {
+    &-mark {
+        &:before {
+            content: "\F043D";
+        }
+    }
+
+    input[type=radio]:checked {
+        ~ .wui-radio-mark {
+            &:before {
+                content: "\F043E";
+                color: var(--theme-primary, $theme-primary);
+            }
+        }
+    }
+}
+
+.wui-toggle {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+    display: flex;
+    position: relative;
+
+    input[type=checkbox] {
+        opacity: 0;
+        position: absolute;
+        top: 1.25rem; left: 0;
+        z-index: 3;
+        width: 2.25rem;
+        height: 1rem;
+    }
+
+    &-mark {
+        display: block;
+        width: 2.25rem;
+        height: 1rem;
+        border-radius: .5rem;
+        background-color: var(--theme-toggle-track-bg, $theme-toggle-track-bg);
+        position: relative;
+
+        &:before {
+            display: block;
+            content: "";
+            width: 1.25rem;
+            height: 1.25rem;
+            top: -.125rem;
+            left: 0;
+            transition: left ease-in-out .2s;
+            position: absolute;
+            border-radius: .75rem;
+            background-color: #FFF;
+            box-shadow: 0 .125rem .125rem .075rem rgba(0,0,0,.25);
+            z-index: 2;
+        }
+
+        &:after {
+            display:block;
+            content: "";
+            width: 2.5rem;
+            height: 2.5rem;
+            position: absolute;
+            width: 0rem;
+            height: 0rem;
+            left: .625rem; top: .5rem;
+            transition: all ease-in-out .2s;
+            border-radius: 50%;
+        }
+    }
+
+    input[type=checkbox]:checked {
+        ~ .wui-toggle-mark {
+            background-color: rgba($theme-primary, .5);
+
+            &:after {
+                left: calc(100% - .625rem);
+            }
+
+            &:before {
+                background-color: $theme-primary;
+                box-shadow: 0 .125rem .125rem .075rem rgba($theme-primary,.25);
+                left: calc(100% - 1.25rem);
+            }
+        }
+    }
+
+    &:hover, &:focus-within {
+        .wui-toggle-mark {
+            &:after {
+                display:block;
+                content: "";
+                width: 2.5rem;
+                height: 2.5rem;
+                background-color: rgba($theme-primary, .5);
+                opacity: .37;
+                z-index: 1;
+                position: absolute;
+                top: -.75rem;
+            }
+        }
+
+        input[type=checkbox] {
+            ~ .wui-toggle-mark {
+                &:after {
+                    left: -.625rem;
+                }
+            }
+        }
+
+        input[type=checkbox]:checked {
+            ~ .wui-toggle-mark {
+                &:after {
+                    left: calc(100% - 1.875rem);
+                }
+            }
+        }
+    }
+
+    &-label {
+        padding-left: 1rem;
+    }
+
+}

package/scss/screen/snackbar.scss

@@ -0,0 +1,25 @@
+wui-snackbar{
+    width: auto;
+    border-radius: .25rem;
+    display: block;
+    flex: 0 0 auto;
+    background-color:#000;
+    color: white !important;
+    overflow: hidden;
+    padding: .75rem 1.5rem;
+    transition: bottom ease 0.2s, opacity ease .2s;
+    position: fixed;
+    opacity: 0;
+    bottom: 0;
+    left: 1.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    z-index: -1;
+
+    &.show {
+        z-index: 9999;
+        opacity: 1;
+        bottom: 1.5rem;
+    }
+}

package/scss/screen/sortable.scss

@@ -0,0 +1,10 @@
+.wui-sortable {
+    position: relative;
+
+    &-item {
+        &-dragging {
+            z-index: 9999;
+            position: absolute;
+        }
+    }
+}

package/scss/screen/table.scss

@@ -0,0 +1,199 @@
+.wui-table {
+    width: 100%;
+    border-collapse: collapse;
+
+    tr {
+        border-bottom: 1px solid #DEDEDE;
+
+        th, td {
+            vertical-align: middle;
+            padding: .5rem 1rem;
+            height: 3.5rem;
+            text-align: left;
+
+            &:first-child {
+                padding-left: 1.5rem;
+            }
+
+            &:last-child {
+                padding-right: 1.5rem;
+            }
+
+            &.action-col {
+                width: 0.0001%;
+            }
+
+            &.sticky-right {
+                position: sticky;
+                right: 0;
+                z-index: 1;
+            }
+
+            &.sticky-left {
+                position: sticky;
+                left: 0;
+                z-index: 1;
+            }
+        }
+
+        &.no-border {
+            border: none;
+        }
+    }
+
+    thead {
+        tr {
+            border-bottom: 1px solid #CDCDCD;
+        }
+    }
+
+    tbody {
+        tr:last-child {
+            border-bottom: none;
+        }
+    }
+
+    tfoot {
+        tr:first-child {
+            border-top: 1px solid #CDCDCD;
+            border-bottom: none;
+        }
+    }
+
+    &-hover {
+        tbody tr {
+            &:hover {
+                background-color: rgba(0,0,0,0.04);
+            }    
+        }
+    }
+
+    &-responsive {
+        width: 100%;
+        overflow-x: auto;
+        overflow-y: no-scroll;
+    }
+}
+
+@media screen and (max-width:768px) {
+    .wui-table {
+        tr {
+            th, td {
+                &:first-child {
+                    padding-left: 1rem;
+                }
+
+                &:first-child {
+                    padding-left: 1rem;
+                }
+            }
+        }
+    }
+}
+// .wui-table-responsive {
+//     width: 100%;
+//     overflow-x: auto;
+//     overflow-y: no-scroll;
+
+//     &.inside-container {
+//         width: calc(100% + 3rem);
+//         margin-left: -1.5rem;
+//         margin-right: -1.5rem;
+//     }
+// }
+
+// @media screen and (max-width: 768px) {
+//     .wui-table-responsive {
+//         &.inside-container {
+//             width: calc(100% + 2rem);
+//             margin-left: -1rem;
+//             margin-right: -1rem;
+//         }
+//     }
+// }
+
+// .wui-table {
+//     @extend .table;
+//     margin-bottom: 0;
+
+//     tr {
+//         border-bottom: 1px solid #DEDEDE;
+
+//         th, td {
+//             border-bottom: none;
+//             padding-left: 1rem;
+//             padding-right: 1rem;
+//             height: 3.25rem;
+
+//             &:first-child {
+//                 padding-left: 1.5rem;
+//             }
+    
+//             &:last-child {
+//                 padding-right: 1.5rem;
+//             }
+    
+//             &.action-col {
+//                 padding-top: 0;
+//                 padding-bottom: 0;
+//                 vertical-align: middle;
+//                 width: 0.1%;
+//                 white-space: nowrap;
+//                 position: sticky;
+//                 right: 0;
+//                 background: linear-gradient(to right, transparent, #fff);
+//             }
+//         }
+
+//         th {
+//             font-weight: bold !important;
+//         }
+        
+//         &:hover {
+//             background-color: rgba(0,0,0,0.04);
+//         }
+
+//         &.no-border {
+//             border-bottom: none;
+//         }
+//     }
+
+//     thead {
+//         z-index: 0;
+//         position: relative;
+
+//         tr {
+//             border-bottom: 1px solid #CDCDCD;
+
+//             th {
+//                 vertical-align: middle;
+//                 border-bottom: none;
+//             }
+//         }
+//     }
+
+//     &.wui-table-hover {
+//         @extend .table-hover;
+//     }
+
+//     > :not(caption) > * > * {
+//         color: inherit;
+//     }
+// }
+
+// @media screen and (max-width: 768px) {
+//     .wui-table  {
+//         tr th, tr td {
+//             padding-left: .75rem;
+//             padding-right: .75rem;
+
+//             &:first-child {
+//                 padding-left: 1rem;
+//             }
+
+//             &:last-child {
+//                 padding-right: 1rem;
+//             }
+//         }
+//     }
+// }

package/scss/screen/tabs.scss

@@ -0,0 +1,71 @@
+@import '../variables/colors.scss';
+
+ul.wui-tab {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    
+    &.page-tab {
+        padding: 0 1.5rem .5rem;
+    }
+
+    li {
+        padding-left: .75rem;
+        padding-right: .75rem;
+        flex: 0 0 auto;
+
+        &:first-child {
+            padding-left: 0;
+        }
+
+        &:last-child {
+            padding-right: 0;
+        }
+
+        a {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: $theme-text;
+            height: 3rem;
+            font-weight: 500;          
+            position: relative;
+            text-decoration: none;
+            font-size: 1rem;
+
+            &:after {
+                content: "";
+                width: 100%;
+                height: 2px;
+                display: block;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 1;
+                background-color: $theme-text;
+                opacity: 0;
+            }
+
+            &:hover {
+                text-decoration: none;
+                color: rgba($theme-text, 1);
+                
+                &:after {
+                    opacity: 1;
+                }
+            }
+        }
+
+        &.active {
+            a {
+                color: $theme-primary;
+
+                &:after {
+                    background-color: $theme-primary;
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}