@zuzjs/ui 0.3.3 → 0.3.5

package/src/scss/props.scss

@@ -1,70 +0,0 @@
-*, *:before, *:after{
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td{margin: 0;padding: 0;}
-table{border-collapse: collapse; border-spacing: 0;}
-fieldset, img {border: 0}
-address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal}
-ol, ul, li{list-style: none;}
-caption, th{text-align: left;}
-h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: normal;}
-div, img, button, input, textarea, select{outline: none}
-strong{font-weight: bold}
-em{font-style: italic;}
-a img{border: none;}
-
-*, .f{ font-family: var(--primary-font); }
-.fb{ font-family: var(--primary-font-bold); }
-
-button{cursor: pointer;}
-.fixed{ position: fixed; }
-.block{display: block;}
-.iblock{display: inline-block;}
-.tdn{ text-decoration: none; }
-.tdh:hover{ text-decoration: underline; }
-.cprimary, .color{ color: var(--primary-color); }
-.primary{ background-color: var(--primary-color); }
-.tdnh, .tdn{ text-decoration: none; }
-.tdnh:hover{ text-decoration: underline; }
-.flex{
-    display: flex;
-    &.ass{align-self: flex-start;}
-    &.asc{align-self: center;}
-    &.ase{align-self: flex-end;}
-    &.ais{align-items: flex-start;}
-    &.aic{align-items: center;}
-    &.aie{align-items: flex-end;}
-    &.jcs{justify-content: flex-start;}
-    &.jcc{justify-content: center;}
-    &.jce{justify-content: flex-end;}
-}
-/*
-    COLORS
-    It will generate .cfff { color: #fff; } from 'fff'
-*/
-$colors: 'fff','111','222','333','444','555','666','777','888','999';
-@each $n in $colors{
-    .c#{$n} { color: unquote("#"+#{$n}); }
-}
-
-/*
-    FONT SIZES
-    It will generate .s10 { font-size: 12px; } from '12'
-*/
-@for $i from 10 through 72 {
-    @if $i % 2 == 0 {
-        .s#{$i} { font-size: #{$i}px; }
-    }
-}
-
-/*
-    BoldSize
-    It will generate .b400 { font-weight: 400; } from '400'
-*/
-$bsizes: 100,200,300,400,500,600,700,800,900;
-.bold{ font-weight: bold; }
-@each $n in $bsizes{
-    .b#{$n} { font-weight: #{$n}; }
-}

package/src/scss/style.scss

@@ -1,133 +0,0 @@
-@import './constants.scss';
-@import './mixins.scss';
-@import './props.scss';
-
-@-webkit-keyframes rotating /* Safari and Chrome */ {
-    from {
-      -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    to {
-      -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-}
-@keyframes rotating {
-    from {
-        -ms-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -webkit-transform: rotate(0deg);
-        -o-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    to {
-        -ms-transform: rotate(360deg);
-        -moz-transform: rotate(360deg);
-        -webkit-transform: rotate(360deg);
-        -o-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-.rotating {
-    -webkit-animation: rotating 2s linear infinite;
-    -moz-animation: rotating 2s linear infinite;
-    -ms-animation: rotating 2s linear infinite;
-    -o-animation: rotating 2s linear infinite;
-    animation: rotating 2s linear infinite;
-}
-
-.button{
-    background: var(--primary-color);
-    color: #fff;
-    border: 0px; 
-}
-
-.zuz-toast{
-    border-radius: 5px;
-    @include anim($duration: 0.15s);
-    &.hidden{
-        transform: translate(-50%, -300px) scale(0.5) !important;
-    }
-    &.showing{
-        transform: translate(-50%, -50px) scale(0.9) !important;
-    }
-    &.visible{
-        transform: translate(-50%, 0px) scale(1) !important;
-    }
-}
-
-.zuz-checkbox{
-    opacity: 0; // hides checkbox
-    position: absolute;
-    & + label {
-        position: relative;
-        display: inline-block;
-        user-select: none;
-        transition: .4s ease;
-        height: 26px;
-        width: 44px;
-        border-radius: 60px;
-        background: #eee;
-        &:before {
-            content: "";
-            position: absolute;
-            display: block;
-            transition: .2s cubic-bezier(.24, 0, .5, 1);
-            height: 26px;
-            width: 44px;
-            top: 0;
-            left: 0;
-            border-radius: 30px;
-        }
-        &:after {
-            content: "";
-            position: absolute;
-            display: block;
-            transition: .35s cubic-bezier(.54, 1.60, .5, 1);
-            background: #fff;
-            height: 22px;
-            width: 22px;
-            top: 2px;
-            left: 2px;
-            border-radius: 60px;
-        }
-    }
-    &:checked {
-        & + label:before {
-          background: green; // Active Color
-          transition: width .2s cubic-bezier(0, 0, 0, .1);
-        }
-        & + label:after {
-          left: 20px;
-        }
-    }
-}
-
-.zuz-contextmenu{
-    width: 220px;
-    border-radius: 5px;
-    padding: 4px;
-    background: rgba(34,34,34,0.5);
-    border: 1px rgba(255,255,255,0.25) solid;
-    box-shadow: 0px 1px 3px rgba(0, 0, 0, .45);
-    backdrop-filter: blur(20px);
-    button{
-        border: 0px;
-        text-align: left;
-        padding: 4px 6px;
-        background: rgba(0, 0, 0, 0);
-        cursor: pointer;
-        color: #fff;
-        border-radius: 4px;
-        &:hover{
-            background: #5183ff;
-        }
-    }
-    .line{
-        height: 1px;
-        background: rgba(255,255,255,0.25);
-        margin: 4px 6px;
-    }
-}