pxt-core 7.4.12 → 7.4.16

package/react-common/styles/controls/Button.less

@@ -0,0 +1,178 @@
+.common-button {
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+    min-height: 1rem;
+    outline: none;
+    border: none;
+    vertical-align: middle;
+    color: @buttonTextColor;
+    background: @buttonBackgroundColor;
+    font-family: @pageFont;
+    margin: 0 0.25rem 0 0;
+    padding: 0.8rem 2rem 0.95rem;
+    text-transform: none;
+    text-shadow: none;
+    font-weight: 400;
+    line-height: 1em;
+    font-style: normal;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 0.2em;
+    user-select: none;
+    transition: opacity .1s ease,background-color .1s ease,box-shadow .1s ease,color .1s ease,background .1s ease;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.common-button:hover {
+    filter: grayscale(.15) brightness(.85) contrast(1.3);
+}
+
+.common-button .right {
+    margin-left: 0.5rem;
+}
+
+.common-button:focus::after {
+    content: "";
+    position: absolute;
+    inset: 4px;
+    border: 1px solid transparent;
+    outline: @buttonFocusOutline;
+    z-index: 1;
+    border-radius: 0.2em;
+}
+
+.common-button.inverted:focus::after,
+.common-button.menu-button:focus::after {
+    outline: @buttonFocusOutlineInverted;
+}
+
+
+/****************************************************
+ *                  Color Variants                   *
+ ****************************************************/
+
+.common-button.primary {
+    background: @primaryColor;
+    color: @buttonTextColorInverted;
+    border: 1px solid @primaryColor;
+}
+
+.common-button.secondary {
+    background: @secondaryColor;
+    color: @buttonTextColorInverted;
+    border: 1px solid @secondaryColor;
+}
+
+.common-button.teal {
+    background: @teal;
+    color: @buttonTextColorInverted;
+    border: 1px solid @teal;
+}
+
+.common-button.orange {
+    background: @orange;
+    color: @buttonTextColorInverted;
+    border: 1px solid @orange;
+}
+
+.common-button.red {
+    background: @red;
+    color: @buttonTextColorInverted;
+    border: 1px solid @red;
+}
+
+.common-button.green {
+    background: @green;
+    color: @buttonTextColorInverted;
+    border: 1px solid @green;
+}
+
+.common-button.primary.inverted {
+    background: @buttonTextColorInverted;
+    color: @primaryColor;
+}
+
+.common-button.teal.inverted {
+    background: @buttonTextColorInverted;
+    color: @teal;
+}
+
+.common-button.orange.inverted {
+    background: @buttonTextColorInverted;
+    color: @orange;
+}
+
+.common-button.red.inverted {
+    background: @buttonTextColorInverted;
+    color: @red;
+}
+
+.common-button.green.inverted {
+    background: @buttonTextColorInverted;
+    color: @green;
+}
+
+
+/****************************************************
+ *                Disabled Buttons                  *
+ ****************************************************/
+
+.common-button.disabled:hover {
+    filter: none;
+}
+
+.common-button.disabled,
+.common-button.disabled.primary,
+.common-button.disabled.primary.inverted,
+.common-button.disabled.secondary,
+.common-button.disabled.secondary.inverted,
+.common-button.disabled.teal,
+.common-button.disabled.teal.inverted,
+.common-button.disabled.orange,
+.common-button.disabled.orange.inverted,
+.common-button.disabled.red,
+.common-button.disabled.red.inverted,
+.common-button.disabled.green,
+.common-button.disabled.green.inverted
+ {
+    cursor: default;
+    background-color: @buttonBackgroundColorDisabled;
+    color: @buttonTextColor;
+    border: @buttonBackgroundColorDisabled;
+}
+
+
+/****************************************************
+ *                   Menu Buttons                   *
+ ****************************************************/
+
+.common-button.menu-button {
+    background: none;
+    border: none;
+    color: @buttonMenuTextColor;
+    height: 100%;
+    padding: 0em 1rem 0rem;
+    margin: 0;
+    border-radius: 0;
+    font-size: 20px;
+
+    i.fas, i.far, .icon, .xicon {
+        font-size: 24px;
+    }
+}
+
+.common-button.menu-button:hover {
+    background: @buttonMenuBackgroundHoverColor;
+}
+
+.common-button.menu-button:active {
+    background: @buttonMenuBackgroundActiveColor;
+}
+
+.common-button.menu-button.inverted,
+.common-button.menu-button.inverted:hover  {
+    background: @buttonMenuBackgroundColorInverted;
+    color: @buttonMenuTextColorInverted;
+}
+

package/react-common/styles/controls/Checkbox.less

@@ -0,0 +1,13 @@
+.common-checkbox {
+    position: relative;
+    padding: 0.25rem;
+
+    input {
+        margin-right: 0.5rem;
+    }
+}
+
+.common-checkbox:focus-within {
+    outline: @checkboxFocusOutline;
+    border-radius: 0.2em;
+}

package/react-common/styles/controls/Icon.less

@@ -0,0 +1,11 @@
+i.far, i.fas {
+    margin: 0 0.25rem 0 0;
+    text-align: center;
+    width: 1.81rem;
+    line-height: inherit;
+    font-size: 18px;
+}
+
+i.far.large, i.fas.large {
+    font-size: 24px;
+}

package/react-common/styles/controls/Input.less

@@ -0,0 +1,95 @@
+/****************************************************
+ *                Input                             *
+ ****************************************************/
+
+.common-input-group {
+    position: relative;
+    display: flex;
+    height: 2rem;
+    align-items: stretch;
+    border-radius: 2px;
+    border: 1px solid @inputBorderColor;
+    background: @inputBackgroundColor;
+}
+
+.common-input-group:focus::after,
+.common-input-group:focus-within::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border: 2px solid @inputBorderColorFocus;
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+.common-input {
+    width: 100%;
+    min-width: 0;
+    padding: 0 0.5rem;
+    color: @inputTextColor;
+    border: none;
+    outline: 0;
+    background: none transparent;
+    text-overflow: ellipsis;
+}
+
+/****************************************************
+ *                Input Label                       *
+ ****************************************************/
+
+.common-input-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 0.3rem 0;
+    overflow-wrap: break-word;
+}
+
+/****************************************************
+ *                Input Icon                        *
+ ****************************************************/
+
+.common-input-group {
+    & > i.fas, i.far, .icon, .xicon {
+        position: absolute;
+        bottom: 0.3rem;
+        right: 0.5rem;
+        width: 1.25rem;
+        margin-right: 0;
+        line-height: 1.25rem;
+        pointer-events: none;
+    }
+
+    & > .common-button {
+        color: @inputButtonColor;
+        padding: 0;
+        margin: 0;
+        border-radius: 0;
+
+        &:hover {
+            color: @inputButtonColorHover;
+        }
+    }
+}
+
+.common-input.has-icon {
+    padding: 0 1.75rem 0 0.5rem;
+}
+
+/****************************************************
+ *                Disabled Input                    *
+ ****************************************************/
+
+.common-input-wrapper.disabled {
+    .common-input-group {
+        cursor: default;
+        border: 1px solid @inputBackgroundColorDisabled;
+        background: @inputBackgroundColorDisabled;
+    }
+
+    .common-input,
+    .common-input-label,
+    i {
+        color: @inputTextColorDisabled;
+    }
+}

package/react-common/styles/controls/List.less

@@ -0,0 +1,12 @@
+.common-list {
+    display: flex;
+    flex-direction: column;
+
+    .common-list-item {
+        margin-bottom: 0.25rem;
+    }
+}
+
+.common-list.horizontal {
+    flex-direction: row;
+}

package/react-common/styles/controls/MenuDropdown.less

@@ -0,0 +1,36 @@
+.common-menu-dropdown {
+    height: 100%;
+    position: relative;
+}
+
+.common-menu-dropdown > .menu-button.expanded {
+    background: @buttonMenuBackgroundActiveColor;
+}
+
+.common-menu-dropdown-pane {
+    position: absolute;
+    right: 0;
+    width: 10rem;
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        background: @menuDropdownPaneBackground;
+    }
+
+    li {
+        width: 100%;
+    }
+}
+
+.common-menu-dropdown-item {
+    background: none;
+    text-align: left;
+    width: 100%;
+    margin: 0;
+}
+
+.common-menu-dropdown-item.common-button:focus::after {
+    outline: @buttonFocusOutlineInverted;
+}

package/react-common/styles/controls/Modal.less

@@ -0,0 +1,105 @@
+.common-modal-container {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--modal-overlay-color);
+    z-index: var(--modal-dimmer-zindex);
+}
+
+.common-modal-container.fullscreen {
+    z-index: var(--fullscreen-modal-zindex)
+}
+
+.common-modal {
+    width: 50%;
+    max-width: 40rem;
+    border-radius: .285rem;
+    overflow: hidden;
+}
+
+.common-modal-header {
+    background-color: @modalHeaderBackgroundColor;
+
+    display: flex;
+    font-size: 1.2rem;
+    font-weight: 600;
+    padding-left: 1.5rem;
+    border-bottom: @modalSeparatorBorder;
+    flex-shrink: 0;
+
+    .common-modal-title {
+        flex-grow: 1;
+        padding-top: 1.25rem;
+        padding-bottom: 1.25rem;
+    }
+
+    .common-modal-close .common-button .fas {
+        color: @modalCloseColor;
+    }
+}
+
+.common-modal-body {
+    background-color: @modalBodyBackgroundColor;
+    min-height: 4rem;
+    padding: 1.25rem 1.5rem;
+}
+
+.common-modal-footer {
+    background-color: @modalFooterBackgroundColor;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    padding: 1rem;
+    border-top: @modalSeparatorBorder;
+
+    button:only-child {
+        grid-column: 2 / -1;
+    }
+}
+
+.fullscreen > .common-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: none;
+    padding: 0;
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.fullscreen > .common-modal > .common-modal-header {
+    background-color: var(--primary-color);
+    color: white;
+    margin-bottom: 0;
+
+    .common-modal-back {
+        font-size: 1.2rem;
+        font-weight: 600;
+
+        .common-button.men .fas {
+
+        }
+    }
+
+    .common-modal-title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.fullscreen > .common-modal > .common-modal-body {
+    flex-grow: 1;
+    background-color: var(--body-background-color);
+    padding: 1rem;
+    max-height: unset;
+}

package/react-common/styles/controls/Spinner.less

@@ -0,0 +1,24 @@
+// This is mostly taken from fluentui
+.common-spinner {
+    box-sizing: border-box;
+    border-radius: 50%;
+    border-width: 1.5px;
+    border-style: solid;
+    border-color: rgb(0, 120, 212) rgb(199, 224, 244) rgb(199, 224, 244);
+    border-image: initial;
+    animation-name: spinner-rotate;
+    animation-duration: 1.3s;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
+    width: 20px;
+    height: 20px;
+}
+
+@keyframes spinner-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/react-common/styles/profile/profile.less

@@ -303,6 +303,18 @@
     font-family: var(--body-font-family);
 }
 
+.common-checkbox.loading {
+    input {
+        opacity: 0;
+    }
+
+    .common-spinner {
+        display: inline-block;
+        position: absolute;
+        left: 0px;
+    }
+}
+
 @media only screen and (max-width: 1200px) and (min-width: 992px) {
     .profile-badges, .profile-badges-background {
         background-size: 25%;

package/react-common/styles/react-common-skillmap.less

@@ -9,4 +9,4 @@
 // Import the variables from the target
 @import "site/globals/site.variables";
 
-@import "react-common.less";
+@import "react-common.less";

package/react-common/styles/react-common-variables.less

@@ -0,0 +1,57 @@
+@commonTextColor: rgb(50, 49, 48);
+@commonBorderColor: rgb(96, 94, 92);
+@commonBackgroundDisabledColor: rgb(243, 242, 241);
+
+/****************************************************
+ *                    Buttons                       *
+ ****************************************************/
+
+@buttonTextColor: @commonTextColor;
+@buttonTextColorInverted: @white;
+@buttonBackgroundColor: @white;
+@buttonBackgroundColorDisabled: @commonBackgroundDisabledColor;
+
+@buttonMenuTextColor: #ffffff;
+@buttonMenuTextColorInverted: @primaryColor;
+@buttonMenuBackgroundColorInverted: @buttonMenuTextColor;
+@buttonFocusOutline: @buttonTextColorInverted solid 1px;;
+@buttonFocusOutlineInverted: @commonBorderColor solid 1px;
+@buttonMenuBackgroundHoverColor: rgba(0,0,0,.1);
+@buttonMenuBackgroundActiveColor: rgba(0,0,0,.15);
+
+/****************************************************
+ *                    Modals                        *
+ ****************************************************/
+
+@modalCloseColor: #333333;
+@modalBodyBackgroundColor: #ffffff;
+@modalHeaderBackgroundColor: @modalBodyBackgroundColor;
+@modalFooterBackgroundColor: #f9fafb;
+@modalSeparatorBorder: 1px solid rgba(34, 36, 38, .15);
+
+
+/****************************************************
+ *                 MenuDropdowns                    *
+ ****************************************************/
+
+ @menuDropdownPaneBackground: #ffffff;
+
+
+/****************************************************
+ *                    Checkboxes                    *
+ ****************************************************/
+
+@checkboxFocusOutline: @commonBorderColor solid 1px;
+
+/****************************************************
+ *                    Inputs                        *
+ ****************************************************/
+
+@inputTextColor: @commonTextColor;
+@inputTextColorDisabled: rgb(161, 159, 157);
+@inputBorderColor: @commonBorderColor;
+@inputBorderColorFocus: rgb(0, 120, 212);
+@inputBackgroundColor: #ffffff;
+@inputBackgroundColorDisabled: @commonBackgroundDisabledColor;
+@inputButtonColor: rgb(0, 120, 212);
+@inputButtonColorHover: rgb(16, 110, 190);

package/react-common/styles/react-common.less

@@ -1 +1,13 @@
-@import "profile/profile.less";
+@import "profile/profile.less";
+@import "controls/Button.less";
+@import "controls/Checkbox.less";
+@import "controls/Icon.less";
+@import "controls/Input.less";
+@import "controls/MenuDropdown.less";
+@import "controls/Modal.less";
+@import "controls/Spinner.less";
+@import "./react-common-variables.less";
+
+@import "fontawesome-free/less/solid.less";
+@import "fontawesome-free/less/regular.less";
+@import "fontawesome-free/less/fontawesome.less";

package/theme/asset-editor.less

@@ -10,6 +10,7 @@
     height: 100%;
     border-right: 1px solid @assetSidebarBorder;
     overflow-y: auto;
+    z-index: 1;
 }
 
 .asset-editor-sidebar-info {
@@ -159,31 +160,22 @@
     }
 }
 
-.asset-editor-button {
-    padding: .7em 2em .85em;
-    text-align: center;
-    background-color: @assetSidebarButton;
-    font-size: 1rem;
-    box-shadow: inset 0 0 0 1px rgba(34,36,38,.15), inset 0 -0.3em 0 0 rgba(34,36,38,.15);
-    cursor: pointer;
-}
-
-.asset-editor-button.disabled,
-.asset-editor-button.disabled:hover {
-    color: darken(@assetSidebarButtonHover, 20%);
-    background-color: @assetSidebarButtonHover;
-    cursor: not-allowed;
+.asset-editor-sidebar-controls > .common-list-item {
+    display: flex;
 }
 
-.asset-editor-button:hover {
-    background-color: @assetSidebarButtonHover;
+.asset-editor-button {
+    flex: 1;
+    box-shadow: inset 0 0 0 1px rgba(34,36,38,.15), inset 0 -0.3em 0 0 rgba(34,36,38,.15);
 }
 
-.asset-editor-button[data-tooltip]:hover:after {
-    z-index: @sidedocZIndex;
+.delete-asset.common-button {
+    flex: 1;
+    background: none transparent;
+    border: none;
 }
 
-.create-new {
+.create-new.common-button {
     color: @white;
     background-color: @green;
     font-weight: 700;
@@ -191,7 +183,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border-width: 0;
+    margin: 1rem 0 0 1rem;
 
     i.icon {
         margin: 0;
@@ -207,14 +199,6 @@
     background-color: @assetUnselected;
 }
 
-.delete-asset {
-    margin: 0.5rem;
-    text-align: center;
-    font-size: 0.9rem;
-    cursor: pointer;
-    opacity: 0.9;
-}
-
 .asset-editor-create-options {
     display: flex;
     flex-wrap: wrap;
@@ -222,7 +206,7 @@
     justify-content: space-around;
 }
 
-.asset-editor-create-button {
+.asset-editor-create-button.common-button {
     display: flex;
     flex-direction: column;
     justify-content: center;

package/theme/blockly-core.less

@@ -316,6 +316,22 @@ text.blocklyCheckbox {
     border: 1px solid #FAF6BD; // match comment color
 }
 
+/*******************************
+        Workspace Search
+*******************************/
+
+.blockly-ws-searching {
+    path.blocklyPath:not(.blockly-ws-search-highlight-pxt) {
+        opacity: 0.6;
+    }
+
+    path.blocklyPath.blockly-ws-search-highlight-pxt.blockly-ws-search-current {
+        stroke: #FFF200;
+        stroke-width: 4px;
+        transition: none;
+    }
+}
+
 /*******************************
         Media Adjustments
 *******************************/