Move blockly toolbox css to semantic.css (#522)
This commit is contained in:
parent
d6e4c5a717
commit
be207282e3
117
theme/blockly-toolbox.less
Normal file
117
theme/blockly-toolbox.less
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
|
||||||
|
|
||||||
|
/*******************************
|
||||||
|
Blockly Toolbox
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
/* Fonts for toolbox icons */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'legoIcons';
|
||||||
|
src: data-uri("../docs/static/fonts/icons/iconfont.woff");
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon {
|
||||||
|
font-family: 'legoIcons' !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toolbox padding */
|
||||||
|
.blocklyToolboxDiv, .monacoToolboxDiv {
|
||||||
|
padding: 0.5rem;
|
||||||
|
/*box-shadow: inset 0px 0px 0px 2px #D3A805;
|
||||||
|
border-bottom-left-radius: 3px;
|
||||||
|
border-bottom-right-radius: 3px;*/
|
||||||
|
box-shadow: 3px 0 1px -2px @legoGreyLight;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.blocklyTreeRow {
|
||||||
|
border-radius: 0px;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
/*-webkit-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
|
||||||
|
-moz-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
|
||||||
|
box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);*/
|
||||||
|
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid #EBEBEB !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.blocklyTreeSeparator {
|
||||||
|
border: none;
|
||||||
|
/*border-bottom: solid #CEA403 2px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blockly Text */
|
||||||
|
span.blocklyTreeLabel {
|
||||||
|
font-family: @pageFont !important;
|
||||||
|
font-size:1rem !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search box */
|
||||||
|
#blocklySearchArea {
|
||||||
|
margin: 0.5rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
.blocklySearchInputField {
|
||||||
|
border-radius: 1rem !important;
|
||||||
|
border: 1px solid #ebebeb !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile */
|
||||||
|
@media only screen and (max-width: @largestMobileScreen) {
|
||||||
|
#blocklyTrashIcon {
|
||||||
|
margin: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*******************************
|
||||||
|
Custom icons
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconloops::before {
|
||||||
|
content: "\f10b";
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconlogic::before {
|
||||||
|
content: "\f10a";
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconvariables::before {
|
||||||
|
content: "\f111";
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconmath::before {
|
||||||
|
content: "\f10c";
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconfunctions {
|
||||||
|
font-family: 'legoIcons' !important;
|
||||||
|
}
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconfunctions::before {
|
||||||
|
content: "\f108";
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconarrays::before {
|
||||||
|
content: "\f109";
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIcontext::before {
|
||||||
|
content: "\f110";
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconaddpackage::before {
|
||||||
|
content: "\f105";
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconadvancedcollapsed::before {
|
||||||
|
content: "\f113";
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconadvancedexpanded::before {
|
||||||
|
content: "\f114";
|
||||||
|
}
|
||||||
|
|
||||||
|
span.blocklyTreeIcon.blocklyTreeIconsearch::before {
|
||||||
|
content: "\f11a";
|
||||||
|
}
|
@ -4,14 +4,6 @@
|
|||||||
|
|
||||||
@import 'blockly-core';
|
@import 'blockly-core';
|
||||||
|
|
||||||
/* Toolbox icons */
|
|
||||||
|
|
||||||
/* Fonts for toolbox icons */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'legoIcons';
|
|
||||||
src: data-uri("../docs/static/fonts/icons/iconfont.woff");
|
|
||||||
}
|
|
||||||
|
|
||||||
.blocklyFlyoutLabel:not(.blocklyFlyoutHeading) .blocklyFlyoutLabelIcon {
|
.blocklyFlyoutLabel:not(.blocklyFlyoutHeading) .blocklyFlyoutLabelIcon {
|
||||||
fill: white;
|
fill: white;
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
@ -21,59 +13,6 @@
|
|||||||
font-family: 'legoIcons' !important;
|
font-family: 'legoIcons' !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.blocklyTreeIcon {
|
|
||||||
font-family: 'legoIcons' !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Toolbox padding */
|
|
||||||
.blocklyToolboxDiv, .monacoToolboxDiv {
|
|
||||||
padding: 0.5rem;
|
|
||||||
/*box-shadow: inset 0px 0px 0px 2px #D3A805;
|
|
||||||
border-bottom-left-radius: 3px;
|
|
||||||
border-bottom-right-radius: 3px;*/
|
|
||||||
box-shadow: 3px 0 1px -2px @legoGreyLight;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.blocklyTreeRow {
|
|
||||||
border-radius: 0px;
|
|
||||||
margin-bottom: 7px;
|
|
||||||
/*-webkit-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
|
|
||||||
-moz-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
|
|
||||||
box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);*/
|
|
||||||
|
|
||||||
border: none !important;
|
|
||||||
border-bottom: 1px solid #EBEBEB !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.blocklyTreeSeparator {
|
|
||||||
border: none;
|
|
||||||
/*border-bottom: solid #CEA403 2px;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove shadow around blockly blocks */
|
|
||||||
.blocklyPathDark, .blocklyPathLight {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Blockly Text */
|
|
||||||
span.blocklyTreeLabel {
|
|
||||||
font-family: @pageFont !important;
|
|
||||||
font-size:1rem !important;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search box */
|
|
||||||
#blocklySearchArea {
|
|
||||||
margin: 0.5rem;
|
|
||||||
margin-left: 1rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
}
|
|
||||||
.blocklySearchInputField {
|
|
||||||
border-radius: 1rem !important;
|
|
||||||
border: 1px solid #ebebeb !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Square shaped corners */
|
/* Square shaped corners */
|
||||||
.blocklyDropDownDiv {
|
.blocklyDropDownDiv {
|
||||||
border-radius: 0px !important;
|
border-radius: 0px !important;
|
||||||
@ -91,82 +30,3 @@ span.blocklyTreeLabel {
|
|||||||
.blocklyDropDownButton {
|
.blocklyDropDownButton {
|
||||||
border-radius: 0px !important;
|
border-radius: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile */
|
|
||||||
@media only screen and (max-width: @largestMobileScreen) {
|
|
||||||
#blocklyTrashIcon {
|
|
||||||
margin: 0.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconloops::before {
|
|
||||||
content: "\f10b";
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconlogic::before {
|
|
||||||
content: "\f10a";
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconvariables::before {
|
|
||||||
content: "\f111";
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconmath::before {
|
|
||||||
content: "\f10c";
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconfunctions {
|
|
||||||
font-family: 'legoIcons' !important;
|
|
||||||
}
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconfunctions::before {
|
|
||||||
content: "\f108";
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconarrays::before {
|
|
||||||
content: "\f109";
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIcontext::before {
|
|
||||||
content: "\f110";
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconaddpackage::before {
|
|
||||||
content: "\f105";
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconadvancedcollapsed::before {
|
|
||||||
content: "\f113";
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconadvancedexpanded::before {
|
|
||||||
content: "\f114";
|
|
||||||
}
|
|
||||||
|
|
||||||
span.blocklyTreeIcon.blocklyTreeIconsearch::before {
|
|
||||||
content: "\f11a";
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-editortools-btn .icon.save:before {
|
|
||||||
font-family: 'legoIcons';
|
|
||||||
content: "\f118";
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-button .icon.download.icon-and-text:before {
|
|
||||||
font-family: 'legoIcons';
|
|
||||||
content: "\f117";
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.approve.positive i.icon.checkmark:before {
|
|
||||||
font-family: 'legoIcons';
|
|
||||||
content: "\f116";
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.approve.cancel i.icon.cancel:before {
|
|
||||||
font-family: 'legoIcons';
|
|
||||||
content: "\f115";
|
|
||||||
}
|
|
||||||
|
|
||||||
.blocks-menuitem i.icon.blocks:before {
|
|
||||||
font-family: 'legoIcons' !important;
|
|
||||||
content: "\f119" !important;
|
|
||||||
}
|
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
/* Import all components */
|
/* Import all components */
|
||||||
@import 'pxtsemantic';
|
@import 'pxtsemantic';
|
||||||
@import 'pxt';
|
@import 'pxt';
|
||||||
|
@import 'blockly-toolbox';
|
||||||
@import 'themes/default/globals/site.variables';
|
@import 'themes/default/globals/site.variables';
|
||||||
@import 'themes/pxt/globals/site.variables';
|
@import 'themes/pxt/globals/site.variables';
|
||||||
@import 'site/globals/site.variables';
|
@import 'site/globals/site.variables';
|
||||||
@ -168,3 +169,33 @@
|
|||||||
border-color: white !important;
|
border-color: white !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*******************************
|
||||||
|
Custom icons
|
||||||
|
*******************************/
|
||||||
|
|
||||||
|
.save-editortools-btn .icon.save:before {
|
||||||
|
font-family: 'legoIcons';
|
||||||
|
content: "\f118";
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button .icon.download.icon-and-text:before {
|
||||||
|
font-family: 'legoIcons';
|
||||||
|
content: "\f117";
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.approve.positive i.icon.checkmark:before {
|
||||||
|
font-family: 'legoIcons';
|
||||||
|
content: "\f116";
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.approve.cancel i.icon.cancel:before {
|
||||||
|
font-family: 'legoIcons';
|
||||||
|
content: "\f115";
|
||||||
|
}
|
||||||
|
|
||||||
|
.blocks-menuitem i.icon.blocks:before {
|
||||||
|
font-family: 'legoIcons' !important;
|
||||||
|
content: "\f119" !important;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user