pxt-core 7.5.2 → 7.5.5

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

@@ -1,3 +1,5 @@
+
+
 .common-modal-container {
     position: fixed;
     display: flex;
@@ -7,12 +9,12 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--modal-overlay-color);
+    background-color: @modalOverlayColor;
     z-index: @modalDimmerZIndex;
 }
 
 .common-modal-container.fullscreen {
-    z-index: var(--fullscreen-modal-zindex)
+    z-index: @modalFullscreenZIndex;
 }
 
 .common-modal {
@@ -44,7 +46,7 @@
 }
 
 .common-modal-body {
-    background-color: @modalBodyBackgroundColor;
+    background-color: @pageBackground;
     min-height: 4rem;
     padding: 1.25rem 1.5rem;
 }
@@ -77,7 +79,7 @@
 }
 
 .fullscreen > .common-modal > .common-modal-header {
-    background-color: var(--primary-color);
+    background-color: @primaryColor;
     color: white;
     margin-bottom: 0;
 
@@ -99,7 +101,7 @@
 
 .fullscreen > .common-modal > .common-modal-body {
     flex-grow: 1;
-    background-color: var(--body-background-color);
+    background-color: @homeScreenBackground;
     padding: 1rem;
     max-height: unset;
 }

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

@@ -0,0 +1,81 @@
+/****************************************************
+ *                Textarea                          *
+ ****************************************************/
+
+.common-textarea-group {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    border-radius: 2px;
+    border: 1px solid @textareaBorderColor;
+    background: @textareaBackgroundColor;
+}
+
+.common-textarea-group:focus::after,
+.common-textarea-group:focus-within::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border: 2px solid @textareaBorderColorFocus;
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+.common-textarea {
+    width: 100%;
+    min-width: 0;
+    padding: 0.5rem;
+    color: @textareaTextColor;
+    border: none;
+    outline: 0;
+    background: none transparent;
+    text-overflow: ellipsis;
+    resize: none;
+
+    &.resize-both { resize: both; }
+    &.resize-horizontal { resize: horizontal; }
+    &.resize-vertical { resize: vertical; }
+}
+
+
+/****************************************************
+ *               Textarea Label                     *
+ ****************************************************/
+
+.common-textarea-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 0.3rem 0;
+    overflow-wrap: break-word;
+}
+
+/****************************************************
+ *                Disabled Textarea                 *
+ ****************************************************/
+
+.common-textarea-wrapper.disabled {
+    .common-textarea-group {
+        cursor: default;
+        border: 1px solid @textareaBackgroundColorDisabled;
+        background: @textareaBackgroundColorDisabled;
+    }
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-textarea {
+        color: @highContrastTextColor;
+        border-color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+    }
+
+    .common-textarea-group:focus::after,
+    .common-textarea-group:focus-within::after {
+        border-color: @highContrastHighlightColor;
+    }
+
+}

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

@@ -0,0 +1,10 @@
+/**
+ * This file is the same as react-common-skillmap.less except it doesn't import any
+ * variables from the target. This is used for pxt-core's css build
+ */
+
+// Import variables from pxt-core
+@import "themes/default/globals/site.variables";
+@import "themes/pxt/globals/site.variables";
+
+@import "react-common.less";

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

@@ -0,0 +1,12 @@
+/**
+ * Used for building react-common-skillmap.css
+ */
+
+// Import variables from pxt-core
+@import "themes/default/globals/site.variables";
+@import "themes/pxt/globals/site.variables";
+
+// Import the variables from the target
+@import "site/globals/site.variables";
+
+@import "react-common.less";

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

@@ -45,7 +45,9 @@
 @modalHeaderBackgroundColor: @modalBodyBackgroundColor;
 @modalFooterBackgroundColor: #f9fafb;
 @modalSeparatorBorder: 1px solid rgba(34, 36, 38, .15);
+@modalOverlayColor: rgba(0, 0, 0, 0.5);
 @modalDimmerZIndex: 1000;
+@modalFullscreenZIndex: @modalDimmerZIndex;
 
 
 /****************************************************
@@ -74,6 +76,23 @@
 @inputButtonColor: rgb(0, 120, 212);
 @inputButtonColorHover: rgb(16, 110, 190);
 
+/****************************************************
+ *                  Textarea                        *
+ ****************************************************/
+
+ @textareaTextColor: @commonTextColor;
+ @textareaBorderColor: @commonBorderColor;
+ @textareaBorderColorFocus: rgb(0, 120, 212);
+ @textareaBackgroundColor: #ffffff;
+ @textareaBackgroundColorDisabled: @commonBackgroundDisabledColor;
+
+/****************************************************
+ *              EditorToggle                        *
+ ****************************************************/
+@editorToggleBackgroundColor: rgba(52,73,94,.4);
+@editorToggleBorderColor: rgba(52,73,94,.2);
+@editorToggleBorderWidth: 3px;
+
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/

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

@@ -1,11 +1,14 @@
 @import "profile/profile.less";
+@import "share/share.less";
 @import "controls/Button.less";
 @import "controls/Checkbox.less";
+@import "controls/EditorToggle.less";
 @import "controls/Icon.less";
 @import "controls/Input.less";
 @import "controls/MenuDropdown.less";
 @import "controls/Modal.less";
 @import "controls/Spinner.less";
+@import "controls/Textarea.less";
 @import "./react-common-variables.less";
 
 @import "fontawesome-free/less/solid.less";

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

@@ -0,0 +1,116 @@
+.sharedialog.fullscreen.common-modal-container > .common-modal > .common-modal-body {
+    padding: 0;
+}
+
+.project-share {
+    display: flex;
+    height: 100%;
+}
+
+.project-share-simulator {
+    flex: 1;
+    height: 100%;
+    background-color: @simulatorBackground;
+
+    #shareLoanedSimulator {
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .simframe {
+        padding-bottom: 56.25%!important;
+    }
+}
+
+.project-share-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+
+    > div {
+        margin-bottom: 1rem;
+        flex-shrink: 0;
+    }
+}
+
+.project-share-thumbnail {
+    display: flex;
+    flex-direction: column;
+
+    .project-thumbnail-placeholder,
+    img {
+        margin: 0.3rem 0;
+        width: 15rem;
+        height: 11.25rem;
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+}
+
+.fullscreen {
+    .project-share > div {
+        padding: 2rem;
+    }
+
+    .project-share-info {
+        flex: unset;
+        width: 28rem;
+    }
+}
+
+/////////////////////////////////////////
+//           Embed                     //
+/////////////////////////////////////////
+
+.project-share-actions {
+    display: flex;
+
+    .share-button {
+        width: 3rem;
+        padding: 1rem 0.75rem;
+
+        i {
+            margin: 0;
+        }
+    }
+}
+
+
+/////////////////////////////////////////
+//           Gif Recorder              //
+/////////////////////////////////////////
+
+.gif-recorder {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    bottom: 0;
+    left: calc(~'(100vw - 25rem)/2');
+    padding: 1rem;
+    transform: translateX(-50%);
+    background: @white;
+    border: @teal;
+    border-radius: 0.2rem;
+    font-family: @segoeUIFont;
+}
+
+.gif-recorder-label,
+.thumbnail-label {
+    margin-bottom: 0.5rem;
+    font-family: @segoeUIFont;
+}
+
+.gif-recorder-actions {
+    display: flex;
+}
+
+.thumbnail-image,
+.thumbnail-placeholder {
+    display: flex;
+    background-color: rgba(0, 0, 0, 0.05);
+    width: 24.5rem;
+    height: 18.375rem;
+}

package/theme/image-editor/imageEditor.less

@@ -103,6 +103,14 @@
     flex: 1;
 }
 
+.image-editor-header-center {
+    flex: 1.5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
 .image-editor-header-right {
     display: flex;
     justify-content: flex-end;
@@ -146,10 +154,6 @@
         flex: 3!important;
     }
 
-    .image-editor-header-left {
-        display: none;
-    }
-
     .gallery-editor-toggle {
         margin-left: .25rem!important;
         flex-shrink: 1;
@@ -186,118 +190,6 @@
 
 }
 
-.gallery-editor-toggle {
-    display: flex;
-    flex-direction: row;
-    position: relative;
-
-    height: 2.25rem;
-    line-height: 2.25rem;
-
-    background-color: #4572cf;
-    border: 2px solid #4067b3;
-    border-radius: 5px;
-    width: 24rem;
-    margin-top: 0.25rem;
-
-    margin-left: auto;
-    margin-right: auto;
-    cursor: pointer;
-}
-
-.gallery-editor-toggle.right {
-    .gallery-editor-toggle-handle {
-        /* Subtract small margin for rightmost element */
-        transform: translateX(calc(16rem - 0.2rem));
-    }
-    .gallery-editor-toggle-right {
-        color: #4B7BEC;
-    }
-}
-
-.gallery-editor-toggle.center {
-    .gallery-editor-toggle-handle {
-        transform: translateX(8rem);
-    }
-    .gallery-editor-toggle-center {
-        color: #4B7BEC;
-    }
-}
-
-.gallery-editor-toggle.left {
-    .gallery-editor-toggle-left {
-        color: #4B7BEC;
-    }
-}
-
-.gallery-editor-toggle.no-gallery {
-    width: 16rem;
-
-    .gallery-editor-toggle-handle {
-        width: 50%;
-    }
-    .gallery-editor-toggle-label {
-        flex-basis: 50%;
-    }
-}
-
-.gallery-editor-toggle.no-gallery.right {
-    .gallery-editor-toggle-handle {
-        transform: translateX(8rem);
-    }
-}
-
-// Microsoft Edge has a bug related to relative z-indices that prevents the handle
-// from appearing below the text, so instead we make the handle transparent and have the text
-// show through
-.gallery-editor-toggle.edge {
-    .gallery-editor-toggle-label, .gallery-editor-toggle-label-right, .gallery-editor-toggle-label-left, .gallery-editor-toggle-label-center {
-        color: #ffffff;
-        z-index: auto;
-    }
-    .gallery-editor-toggle-handle {
-        opacity: 0.3;
-    }
-}
-
-.gallery-editor-toggle-label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-basis: 33%;
-    text-align: center;
-    color: #ffffff;
-    z-index: 1;
-    transition: color 0.3s;
-    user-select: none;
-
-    & > i.icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-
-    span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex-shrink: 1;
-        white-space: nowrap;
-    }
-}
-
-.gallery-editor-toggle-handle {
-    width: 33%;
-    height: 2rem;
-    background-color: white;
-    border-radius: 5px;
-    position: absolute;
-    left: 0;
-
-    transform: translateX(0);
-    transition: transform 0.3s;
-}
-
 .gallery-editor-show-tiles {
     position: absolute;
     height: 2.3rem;

package/webapp/public/authcode.html

@@ -0,0 +1 @@
+<!doctype html><html lang="@locale@"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>MakeCode Device Auth</title><link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css"><link rel="stylesheet" href="/blb/icons.css"><link rel="stylesheet" href="/blb/react-common-authcode.css"><script defer="defer" src="/blb/authcode/js/main.03da4c20.js"></script><link href="/blb/authcode/css/main.1cf9dc37.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><script type="text/javascript" src="/blb/target.js"></script><script type="text/javascript" src="/blb/pxtlib.js"></script><div id="root"></div><script>var pxtConfig=null</script></body></html>