react-miui 0.22.0 → 0.23.0

package/esm/components/form/Checkbox.module.scss

@@ -1,71 +0,0 @@
-.checkbox {
-    input {
-        width: 0;
-        height: 0;
-        transform: scale(0);
-        margin: 0;
-        vertical-align: middle;
-
-        &:focus-visible {
-            + .checkmark {
-                box-shadow: 0 0 5px black;
-            }
-        }
-
-        + .checkmark + .label:not(:empty) {
-            margin-left: 0.75em;
-        }
-    }
-}
-
-.checkmark {
-    border-radius: 100px;
-    background: none;
-    border: 1px solid var(--inactive-bg);
-    width: 18px;
-    height: 18px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    vertical-align: middle;
-    box-sizing: border-box;
-
-    svg {
-        display: none;
-        width: 9px;
-        height: 9px;
-        fill: white;
-    }
-
-    + .label {
-        vertical-align: middle;
-    }
-}
-
-.checkmarkChecked {
-    border-width: 0;
-    color: var(--main-color);
-    background: currentColor;
-
-    svg {
-        display: inline-block;
-    }
-
-    &.checkmarkDisabled {
-        background: var(--inactive-dark-bg);
-    }
-}
-
-.checkmarkDisabled {
-    background: var(--active-bg);
-
-    + .label {
-        color: var(--input-disabled-text);
-    }
-}
-
-.checkmarkReadOnly {
-    + .label {
-        color: var(--input-disabled-text);
-    }
-}

package/esm/components/form/Label.module.scss

@@ -1,15 +0,0 @@
-.label + .label {
-    margin-top: 23px;
-    display: block;
-}
-
-.text {
-    font-size: calc(28px / var(--ratio-font));
-    margin-bottom: calc(24px / var(--ratio-dimensions));
-    color: var(--sub);
-}
-
-.textBig {
-    font-size: calc(34px / var(--ratio-font));
-
-}

package/esm/components/form/Toggle.module.scss

@@ -1,55 +0,0 @@
-.container {
-    --ratio-dimensions: 2.5;
-
-    display: inline-flex;
-    align-items: center;
-    border: 1px solid #ccc;
-    border-radius: 100px;
-    position: relative;
-    line-height: 0;
-    width: calc(110px / var(--ratio-dimensions));
-    height: calc(62px / var(--ratio-dimensions));
-    padding-left: calc(8px / var(--ratio-dimensions));
-    box-sizing: border-box;
-
-    input {
-        position: absolute;
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        visibility: hidden;
-
-        &:not(:checked) + .toggle {
-            transform: translateX(0);
-            background: var(--toggle-handle-bg);
-            border-color: var(--toggle-handle-border);
-        }
-
-        &[data-undetermined=true] + .toggle {
-            transform: translateX(calc(24px / var(--ratio-dimensions)));
-            background: var(--toggle-handle-border);
-            border-color: var(--toggle-handle-border);
-        }
-
-        &:disabled:checked + .toggle {
-            border-color: var(--toggle-handle-border-disabled);
-            background: var(--toggle-handle-bg-disabled);
-        }
-    }
-}
-
-.disabled {
-    background: var(--toggle-bg-disabled);
-}
-
-.toggle {
-    box-sizing: border-box;
-    border-radius: 100px;
-    display: inline-block;
-    width: calc(44px / var(--ratio-dimensions));
-    height: calc(44px / var(--ratio-dimensions));
-    border: calc(1px / var(--ratio-border)) solid var(--orange1-darker);
-    background: var(--orange1);
-    transition: transform 200ms, background-color 200ms, border-color 200ms;
-    transform: translateX(calc(48px / var(--ratio-dimensions)));
-}

package/esm/components/form/choice/Choice.module.scss

@@ -1,56 +0,0 @@
-.choice {
-    input {
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        opacity: 0;
-        margin: 0;
-        position: absolute;
-
-        &:checked + span {
-            color: var(--choice-active-text);
-            background: var(--choice-active-bg);
-        }
-    }
-
-    span {
-        display: flex;
-        padding: 0 1em;
-        flex: 1;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-        font-size: calc(24px / var(--ratio-font));
-        color: var(--choice-text);
-        background: var(--choice-bg);
-        white-space: nowrap;
-    }
-
-    display: flex;
-    border: 1px solid var(--choice-border); // @TODO width
-    position: relative;
-    border-radius: 8px;
-    overflow: hidden;
-    width: max-content;
-    margin-left: auto;
-    margin-right: auto;
-
-    label {
-        flex: 1;
-        height: calc(89px / var(--ratio-dimensions));
-        display: flex;
-
-        + label {
-            border-left: 1px solid var(--choice-border);
-        }
-    }
-}
-
-.wide {
-    width: 100%;
-}
-
-.left {
-    margin-left: unset;
-    margin-right: unset;
-}

package/esm/components/form/input/Input.module.scss

@@ -1,7 +0,0 @@
-.textarea {
-    padding: 1.2em calc(36px / var(--ratio-dimensions));
-    height: unset;
-    resize: vertical;
-    min-height: calc(103px * 3 / var(--ratio-dimensions))
-}
-

package/esm/components/layout/card/Card.module.scss

@@ -1,15 +0,0 @@
-.card {
-    background: var(--background);
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column;
-
-    + .card {
-        margin-top: 23px;
-    }
-}
-
-.margin {
-    margin-left: 23px;
-    margin-right: 23px;
-}

package/esm/components/layout/header/Header.module.scss

@@ -1,108 +0,0 @@
-.header {
-    --border-color: var(--header-border);
-    --background-color: var(--header-bg);
-    background-clip: padding-box;
-    background: var(--background-color);
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-    font-weight: bold;
-    box-sizing: border-box;
-    color: var(--header-text);
-}
-
-.header--toolbar {
-    --border-color: var(--toolbar-border);
-    --background-color: var(--toolbar-bg);
-}
-
-.header--colored {
-    --border-color: var(--custom-header-color);
-    --background-color: var(--custom-header-color);
-    color: var(--custom-text-color);
-}
-
-.header--top, .header--bottom {
-    padding: 0 16.666px;
-    min-height: 44px;
-}
-.header--left, .header--right {
-    padding: 16.666px 0;
-    min-width: 44px;
-    flex-direction: column;
-
-    > .contents {
-        flex-direction: column;
-        align-items: center;
-    }
-}
-
-.header--top {
-    border-bottom: 0.37px solid var(--border-color);
-}
-.header--bottom {
-    border-top: 0.37px solid var(--border-color);
-    order: 2;
-}
-.header--left {
-    border-right: 0.37px solid var(--border-color);
-}
-.header--right {
-    border-left: 0.37px solid var(--border-color);
-    order: 2;
-}
-
-.contents {
-    flex: 1;
-    display: flex;
-}
-
-.header--center > .contents {
-    justify-content: center;
-}
-
-.header--top, .header--bottom {
-    .before {
-        margin-right: calc(50px / var(--ratio-dimensions));
-        height: 100%;
-        padding: 7px 0;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .after {
-        margin-left: calc(50px / var(--ratio-dimensions));
-        height: 100%;
-        padding: 7px 0;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .actions {
-        margin: calc(56px / var(--ratio-dimensions)) 0;
-    }
-}
-
-.header--left, .header--right {
-    .before {
-        margin-bottom: calc(50px / var(--ratio-dimensions));
-        flex-direction: column;
-    }
-
-    .after {
-        margin-top: calc(50px / var(--ratio-dimensions));
-        flex-direction: column;
-    }
-
-    .actions {
-        margin: 0 calc(56px / var(--ratio-dimensions));
-    }
-}
-
-.before, .after {
-    display: flex;
-}

package/esm/components/layout/header/HeaderIconAction.module.scss

@@ -1,26 +0,0 @@
-.btn, .a {
-    height: 100%;
-    aspect-ratio: 1;
-    background: none;
-    border-radius: 666px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: calc(2px / var(--ratio-border)) solid transparent;
-    color: currentColor;
-
-    &:hover {
-        background: #00000022;
-    }
-    &:active {
-        background: #00000011;
-        color: currentColor;
-    }
-}
-
-.icon {
-    width: 16px;
-    height: 16px;
-    display: block;
-    fill: currentColor;
-}

package/esm/components/layout/header/StickyHeader.module.scss

@@ -1,18 +0,0 @@
-.stickyHeader {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    &__content {
-        flex: 1;
-        overflow: auto;
-
-        &--bottom, &--right {
-            order: 1;
-        }
-    }
-}
-
-.stickyHeader--left, .stickyHeader--right {
-    flex-direction: row;
-}

package/esm/components/layout/section/SearchContainer.module.scss

@@ -1,3 +0,0 @@
-.section {
-    margin: 12px;
-}

package/esm/components/layout/table/Table.module.scss

@@ -1,30 +0,0 @@
-.table {
-    border-spacing: 10px;
-    border-collapse: collapse;
-
-    > * > tr > * {
-        text-align: left;
-        padding: 0.75em 0.5em;
-        border-bottom: 1px solid var(--border);
-    }
-
-    > thead > tr:last-child > * {
-        border-bottom: 2px solid var(--border);
-        box-shadow: 0 4px 10px -10px rgba(0, 0, 0, 0.6);
-    }
-}
-
-.striped {
-    > tbody > tr:nth-child(even) > * {
-        background: var(--table-striped-bg);
-    }
-}
-
-.centered {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.wide {
-    width: 100%;
-}

package/esm/components/ui/action/Action.module.scss

@@ -1,26 +0,0 @@
-.action {
-    height: calc(102px / var(--ratio-dimensions));
-    width: calc(102px / var(--ratio-dimensions));
-    border-radius: 100px;
-    border: calc(1px / var(--ratio-border)) solid var(--button-border);
-    background: white;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.a {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.button {
-    border: none;
-    padding: 0;
-    background: none;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: calc(18px / var(--ratio-dimensions));
-}

package/esm/components/ui/action/EqualActions.module.scss

@@ -1,11 +0,0 @@
-.actions {
-    --actions-count: 1;
-    display: inline-grid;
-    grid-template-columns: repeat(var(--actions-count), 1fr);
-    gap: calc(56px / var(--ratio-dimensions));
-}
-
-.vertical {
-    grid-template-columns: auto;
-    grid-template-rows: repeat(var(--actions-count), 1fr);
-}

package/esm/components/ui/directionPad/Pad.module.scss

@@ -1,45 +0,0 @@
-.pad {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 150px;
-    border-radius: 666px;
-    width: 150px;
-    border: 1px solid #aaa;
-    background: white;
-
-    &__line {
-        display: flex;
-    }
-
-    &__button {
-        height: 50px;
-        width: 50px;
-        margin: 0;
-        border-radius: 666px;
-        border: none;
-        display: block;
-        background: none;
-    }
-
-    &__middle {
-        display: block;
-        margin: 0;
-        height: 50px;
-        width: 50px;
-        border: 1px solid #999;
-        box-sizing: border-box;
-        border-radius: 666px;
-        background: none;
-    }
-
-    &__dot {
-        display: block;
-        width: 4px;
-        height: 4px;
-        border-radius: 666px;
-        background: black;
-        margin: auto;
-    }
-}

package/esm/components/ui/drawer/Drawer.module.scss

@@ -1,15 +0,0 @@
-.drawer {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: white;
-    z-index: 1;
-
-    transition: transform 300ms;
-}
-
-.content {
-    height: 100%;
-}

package/esm/components/ui/keyValue/KeyValue.module.scss

@@ -1,57 +0,0 @@
-.container {
-    --kv-border-color: var(--header-border);
-    --kv-border: calc(1px / var(--ratio-border)) solid var(--kv-border-color);
-    --kv-background-color: white;
-    --kv-hover-background-color: var(--active-bg);
-    border: 1px solid var(--kv-border-color);
-    background-color: var(--kv-background-color);
-    border-radius: 5px;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.item {
-    display: inline-flex;
-    box-sizing: border-box;
-    padding: 10px;
-    align-items: center;
-    gap: 10px;
-    border: none;
-    background: none;
-}
-
-button.item:hover {
-    background: var(--kv-hover-background-color)
-}
-
-.kv {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-}
-
-.key {
-    font-size: calc(22px / var(--ratio-font));
-    color: var(--sub);
-}
-
-.value {
-    font-size: calc(29px / var(--ratio-font));
-}
-
-.itemNotFirstRow {
-    border-top: var(--kv-border);
-}
-
-.itemNotFirstCol {
-    border-left: var(--kv-border);
-}
-
-.itemLastWithoutFullRow {
-    border-right: var(--kv-border);
-}
-
-.missingItem {
-    border-top: var(--kv-border);
-    border-left: var(--kv-border);
-}

package/esm/components/ui/message/Message.module.scss

@@ -1,31 +0,0 @@
-.container {
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-    padding: calc(47px / var(--ratio-dimensions)) calc(83px / var(--ratio-dimensions));
-    font-weight: 500;
-    line-height: 1.25;
-}
-
-.box {
-    border-left: 1px solid var(--border);
-    border-right: 1px solid var(--border);
-    margin: 12px;
-}
-
-.warning {
-    background-color: var(--yellow3);
-    border-color: var(--yellow1);
-    color: var(--yellow2);
-}
-
-.error {
-    background-color: var(--pinky3);
-    border-color: var(--pinky1);
-    color: var(--pinky2);
-}
-
-.info {
-    background-color: var(--blue3);
-    border-color: var(--blue2);
-    color: var(--blue1);
-}

package/esm/components/ui/pop/Pop.module.scss

@@ -1,60 +0,0 @@
-.overlay {
-    position: fixed;
-    background: #0000004c;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 4;
-}
-
-.pop {
-    z-index: 5;
-    position: absolute;
-    background: white;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-}
-
-.li {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-
-    + .li {
-        border-top: 1px solid var(--border);
-    }
-}
-
-.button {
-    border: none;
-    background: white;
-    height: calc(116px / var(--ratio-dimensions));
-    padding: 0 calc(42px / var(--ratio-dimensions));
-    box-sizing: border-box;
-    width: 100%;
-    min-width: calc(460px / var(--ratio-dimensions));
-    text-align: left;
-    color: var(--pop-text);
-    font-size: calc(26px / var(--ratio-font));
-    font-weight: revert;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-        background: var(--active-bg);
-    }
-}
-
-.icon {
-    fill: currentColor;
-    margin-right: calc(42px / var(--ratio-dimensions));
-}
-
-.fakeIcon {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-right: calc(42px / var(--ratio-dimensions));
-}