@babylonjs/shared-ui-components 5.31.0 → 5.31.1

package/colorPicker/colorPicker.scss

@@ -0,0 +1,193 @@
+.color-picker-container {
+    width: 320px;
+    height: 300px;
+    background-color: white;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 50% 50px 60px 40px 1fr auto;
+    font-family: "acumin-pro-condensed";
+    font-weight: normal;
+    font-size: 14px;
+
+    &.with-hints {
+        height: 380px;
+    }
+
+    .color-picker-saturation {
+        grid-row: 1;
+        grid-column: 1;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 100%;
+        position: relative;
+        cursor: pointer;
+
+        .color-picker-saturation-white {
+            grid-row: 1;
+            grid-column: 1;
+
+            background: -webkit-linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+            background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+        }
+
+        .color-picker-saturation-black {
+            grid-row: 1;
+            grid-column: 1;
+
+            background: -webkit-linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+            background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+        }
+
+        .color-picker-saturation-cursor {
+            pointer-events: none;
+            width: 4px;
+            height: 4px;
+            box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
+            border-radius: 50%;
+            transform: translate(-2px, -2px);
+            position: absolute;
+        }
+    }
+
+    .color-picker-hue {
+        grid-row: 2;
+        grid-column: 1;
+        display: grid;
+        margin: 10px;
+        grid-template-columns: 24% 76%;
+        grid-template-rows: 100%;
+
+        .color-picker-hue-color {
+            grid-row: 1;
+            grid-column: 1;
+            align-self: center;
+            justify-self: center;
+            width: 30px;
+            height: 30px;
+            border-radius: 15px;
+            border: 1px solid black;
+        }
+
+        .color-picker-hue-slider {
+            grid-row: 1;
+            grid-column: 2;
+            align-self: center;
+            height: 16px;
+            position: relative;
+            cursor: pointer;
+
+            background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+            background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+
+            .color-picker-hue-cursor {
+                pointer-events: none;
+                width: 8px;
+                height: 18px;
+                transform: translate(-4px, -2px);
+                background-color: rgb(248, 248, 248);
+                box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+                position: absolute;
+            }
+        }
+    }
+
+    .color-picker-component {
+        display: grid;
+        margin: 5px;
+        grid-template-columns: 100%;
+        grid-template-rows: 50% 50%;
+
+        .color-picker-component-value {
+            justify-self: center;
+            align-self: center;
+            grid-row: 1;
+            grid-column: 1;
+            margin-bottom: 4px;
+
+            input {
+                width: 50px;
+            }
+        }
+
+        .color-picker-component-label {
+            justify-self: center;
+            align-self: center;
+            grid-row: 2;
+            grid-column: 1;
+            color: black;
+        }
+    }
+
+    .color-picker-rgb {
+        grid-row: 3;
+        grid-column: 1;
+        display: grid;
+        margin: 10px;
+        grid-template-columns: 20% 6.66% 20% 6.66% 20% 6.66% 20%;
+        grid-template-rows: 100%;
+    }
+
+    .red {
+        grid-row: 1;
+        grid-column: 1;
+    }
+
+    .green {
+        grid-row: 1;
+        grid-column: 3;
+    }
+
+    .blue {
+        grid-row: 1;
+        grid-column: 5;
+    }
+
+    .alpha {
+        grid-row: 1;
+        grid-column: 7;
+
+        &.grayed {
+            opacity: 0.5;
+        }
+    }
+
+    .color-picker-hex {
+        grid-row: 4;
+        grid-column: 1;
+        display: grid;
+        grid-template-columns: 20% 80%;
+        grid-template-rows: 100%;
+
+        .color-picker-hex-label {
+            justify-self: center;
+            align-self: center;
+            grid-row: 1;
+            grid-column: 1;
+            margin-left: 10px;
+            color: black;
+        }
+
+        .color-picker-hex-value {
+            justify-self: left;
+            align-self: center;
+            grid-row: 1;
+            grid-column: 2;
+            margin-left: 10px;
+            margin-right: 10px;
+
+            input {
+                width: 70px;
+            }
+        }
+    }
+
+    .color-picker-warning {
+        color: black;
+        font-size: 11px;
+        padding: 4px;
+        justify-self: left;
+        align-self: center;
+        grid-row: 6;
+        grid-column: 1;
+    }
+}

package/components/Button.modules.scss

@@ -0,0 +1,38 @@
+@import "Colors.scss";
+:local .button {
+    composes: fontRegular from "Fonts.scss";
+    width: 55px;
+    height: 55px;
+    border: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    &.wide {
+        width: 120px;
+        height: 45px;
+        justify-content: start;
+    }
+    &.small {
+        width: 30px;
+        height: 30px;
+    }
+    &.light {
+        background-color: light-background;
+        color: dark-color;
+        &:hover,
+        &.active {
+            background-color: light-active-background;
+        }
+        &:disabled {
+            background-color: light-color;
+        }
+    }
+    &.dark {
+        background-color: dark-background;
+        color: light-color;
+        &:hover,
+        &.active {
+            background-color: dark-active-background;
+        }
+    }
+}

package/components/Colors.scss

@@ -0,0 +1,8 @@
+@value light-background: #E2E2E2;
+@value light-active-background: #FFFFFF;
+@value light-disabled-background: #C8C8C8;
+@value light-color: #FFFFFF;
+
+@value dark-background: #333333;
+@value dark-active-background: #666666;
+@value dark-color: #333333;

package/components/Fonts.scss

@@ -0,0 +1,5 @@
+@import url(https://use.typekit.net/xfi0rwe.css);
+:local(.fontRegular) {
+    font-family: "acumin-pro-condensed";
+    font-size: 14px;
+}

package/components/Icon.modules.scss

@@ -0,0 +1,3 @@
+:local .light {
+    filter: brightness(10);
+}

package/components/Label.modules.scss

@@ -0,0 +1,15 @@
+@import "Colors.scss";
+:local .label {
+    composes: fontRegular from "Fonts.scss";
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+:local .dark {
+    color: dark-color;
+}
+
+:local .light {
+    color: light-color;
+}

package/components/MessageDialog.modules.scss

@@ -0,0 +1,62 @@
+:local .dialog-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba(0.1, 0.1, 0.1, 0.6);
+    display: grid;
+    font-family: "acumin-pro";
+    top: 0;
+
+    .dialog {
+        align-self: center;
+        justify-self: center;
+        min-height: 140px;
+        max-width: 400px;
+        border-radius: 10px;
+        background: white;
+        padding: 10px;
+
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 1fr 50px;
+
+        .dialog-message {
+            grid-row: 1;
+            grid-column: 1;
+            margin-top: 20px;
+            padding: 10px;
+            font-size: 18px;
+            color: black;
+        }
+
+        .dialog-buttons {
+            grid-row: 2;
+            grid-column: 1;
+            display: grid;
+            grid-template-rows: 100%;
+            grid-template-columns: 100%;
+            color: white;
+
+            .dialog-button-ok {
+                cursor: pointer;
+                justify-self: center;
+                background: green;
+                min-width: 80px;
+                justify-content: center;
+                display: grid;
+                align-content: center;
+                align-self: center;
+                height: 35px;
+                border-radius: 10px;
+
+                &:hover {
+                    opacity: 0.8;
+                }
+
+                &.error {
+                    background: red;
+                }
+            }
+        }
+    }
+}

package/components/Toggle.modules.scss

@@ -0,0 +1,11 @@
+:local .toggle {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+:local .padded {
+    width: 40px;
+    height: 40px;
+}

package/components/bars/CommandBar.modules.scss

@@ -0,0 +1,45 @@
+:root {
+    --selectionGrey: #666666;
+}
+
+* {
+    font-family: "acumin-pro-condensed";
+    font-weight: 600;
+    font-size: 12px;
+}
+
+.commandBar {
+    background-color: #333333;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 55px;
+}
+
+.commandsLeft {
+    display: flex;
+    padding-left: 10px;
+}
+
+.divider {
+    display: flex;
+    align-items: center;
+    border-right: 1px solid black;
+    color: white;
+    &:last-of-type {
+        border-right: none;
+    }
+    &.padded {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}
+
+.commandsRight {
+    display: flex;
+}
+
+.betaFlag {
+    width: 80px;
+    height: 30px;
+}

package/components/bars/CommandButton.modules.scss

@@ -0,0 +1,33 @@
+.commandButton {
+    cursor: pointer;
+    width: 55px;
+    height: 55px;
+    background-color: #333333;
+
+    &:hover {
+        background-color: var(--selectionGrey);
+    }
+}
+
+.commandLabel {
+    display: none;
+}
+
+.active {
+    transform-origin: center;
+    background-color: var(--selectionGrey);
+}
+
+.commandButtonIcon {
+    height: 100%;
+    width: 100%;
+    display: grid;
+    color: white;
+    align-content: center;
+    justify-content: center;
+}
+
+.disabled {
+    pointer-events: none;
+    color: black;
+}

package/components/bars/CommandDropdown.modules.scss

@@ -0,0 +1,135 @@
+* {
+    font-family: "acumin-pro-condensed";
+}
+
+.commandDropdownBlocker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: scale(1);
+    z-index: 1;
+}
+
+.commandDropdownRoot {
+    position: relative;
+    text-transform: uppercase;
+    z-index: 1;
+}
+
+.commandDropdownIcon {
+    height: 100%;
+    width: 100%;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    color: white;
+}
+
+.commandDropdownActive {
+    height: 100%;
+    width: 100%;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    font-size: 14px;
+}
+
+.commandDropdown {
+    cursor: pointer;
+    width: 55px;
+    height: 55px;
+
+    &:hover,
+    &.activated {
+        background-color: #666666;
+        color: black;
+    }
+
+    &:active {
+        transform-origin: center;
+        transform: scale(0.95);
+    }
+}
+
+.commandDropdownContent {
+    background: #333333;
+    position: absolute;
+    top: 55px;
+    width: 55px;
+    transform: scale(1);
+
+    &.toRight {
+        width: 120px;
+    }
+}
+
+.commandDropdownLabel {
+    color: white;
+    padding: 5px;
+    padding-left: 7px;
+    height: 35px;
+    font-size: 18px;
+    display: grid;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    grid-template-columns: 1fr 20px;
+    grid-template-rows: 100%;
+    position: relative;
+
+    &.active {
+        font-weight: bold;
+        font-size: 20px;
+    }
+
+    &:hover {
+        background: var(--selectionGrey);
+        .sub-items {
+            display: block;
+        }
+    }
+}
+
+.commandDropdownLabelText {
+    font-size: 12px;
+    grid-column: 1;
+    grid-row: 1;
+    font-weight: 600;
+}
+
+.commandDropdownLabelCheck {
+    grid-column: 2;
+    grid-row: 1;
+}
+
+.commandDropdownArrow {
+    grid-column: 2;
+    grid-row: 1;
+    font-size: 20px;
+    font-weight: bold;
+    padding-bottom: 10px;
+    padding-left: 4px;
+}
+
+.subItems {
+    position: absolute;
+    left: 200px;
+    top: 0;
+    width: 150px;
+    display: none;
+}
+
+.subItem {
+    color: white;
+    padding: 5px;
+    padding-left: 10px;
+    height: 35px;
+    display: grid;
+
+    &.checked {
+        background: white;
+        color: black;
+    }
+}

package/components/colorPicker/ColorComponentEntry.modules.scss

@@ -0,0 +1,26 @@
+.colorPickerComponent {
+    display: grid;
+    margin: 5px;
+    grid-template-columns: 100%;
+    grid-template-rows: 50% 50%;
+}
+
+.colorPickerComponentValue {
+    justify-self: center;
+    align-self: center;
+    grid-row: 1;
+    grid-column: 1;
+    margin-bottom: 4px;
+
+    input {
+        width: 50px;
+    }
+}
+
+.colorPickerComponentLabel {
+    justify-self: center;
+    align-self: center;
+    grid-row: 2;
+    grid-column: 1;
+    color: black;
+}

package/components/colorPicker/ColorPicker.modules.scss

@@ -0,0 +1,136 @@
+.colorPickerContainer {
+    width: 320px;
+    height: 300px;
+    background-color: white;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 50% 50px 60px 40px 1fr auto;
+    font-family: "acumin-pro-condensed";
+    font-weight: normal;
+    font-size: 14px;
+}
+
+.withHints {
+    height: 380px !important;
+}
+
+.colorPickerSaturation {
+    grid-row: 1;
+    grid-column: 1;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 100%;
+    position: relative;
+    cursor: pointer;
+}
+
+.colorPickerSaturationWhite {
+    grid-row: 1;
+    grid-column: 1;
+
+    background: -webkit-linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+
+.colorPickerSaturationBlack {
+    grid-row: 1;
+    grid-column: 1;
+
+    background: -webkit-linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+}
+
+.colorPickerSaturationCursor {
+    pointer-events: none;
+    width: 4px;
+    height: 4px;
+    box-shadow: 0px 0px 1.5px 1px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
+    border-radius: 50%;
+    transform: translate(-2px, -2px);
+    position: absolute;
+}
+
+.colorPickerHue {
+    grid-row: 2;
+    grid-column: 1;
+    display: grid;
+    margin: 10px;
+    grid-template-columns: 24% 76%;
+    grid-template-rows: 100%;
+}
+
+.colorPickerHueColor {
+    grid-row: 1;
+    grid-column: 1;
+    align-self: center;
+    justify-self: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 15px;
+    border: 1px solid black;
+}
+
+.colorPickerHueSlider {
+    grid-row: 1;
+    grid-column: 2;
+    align-self: center;
+    height: 16px;
+    position: relative;
+    cursor: pointer;
+
+    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+    background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+}
+
+.colorPickerHueCursor {
+    pointer-events: none;
+    width: 8px;
+    height: 18px;
+    transform: translate(-4px, -2px);
+    background-color: rgb(248, 248, 248);
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+    position: absolute;
+}
+
+.colorPickerRgb {
+    grid-row: 3;
+    grid-column: 1;
+    display: grid;
+    margin: 10px;
+    grid-template-columns: 20% 6.66% 20% 6.66% 20% 6.66% 20%;
+    grid-template-rows: 100%;
+}
+
+.red {
+    grid-row: 1;
+    grid-column: 1;
+}
+
+.green {
+    grid-row: 1;
+    grid-column: 3;
+}
+
+.blue {
+    grid-row: 1;
+    grid-column: 5;
+}
+
+.alpha {
+    grid-row: 1;
+    grid-column: 7;
+}
+
+.grayed {
+    opacity: 0.5;
+}
+
+.colorPickerWarning {
+    color: black;
+    font-size: 11px;
+    padding: 4px;
+    justify-self: left;
+    align-self: center;
+    grid-row: 6;
+    grid-column: 1;
+}