Move blockly toolbox css to semantic.css (#522)
This commit is contained in:
		
							
								
								
									
										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';
 | 
				
			||||||
@@ -167,4 +168,34 @@
 | 
				
			|||||||
    .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
 | 
					    .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
 | 
				
			||||||
        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;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user