From 4021b680f89535dadc7708e4f49509496bd3f5e5 Mon Sep 17 00:00:00 2001 From: antoine Date: Tue, 30 Sep 2014 21:39:51 +0200 Subject: [PATCH] No more dependency with bootstrap and some comments in less file --- .../src/canvasdesigner/index.html | 15 +- .../src/less/canvasdesigner.less | 275 ++++-------------- 2 files changed, 60 insertions(+), 230 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/index.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/index.html index e8d2e050b0..843ec3bd6f 100644 --- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/index.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/index.html @@ -1,11 +1,10 @@  - + Umbraco Canvas Designer - @@ -49,10 +48,6 @@ - -
@@ -86,7 +81,7 @@
@@ -107,7 +102,8 @@ -
+

{{configItem.name}}

@@ -136,7 +132,7 @@
@@ -153,7 +149,6 @@ - diff --git a/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less b/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less index 87bb1b8bc3..a55e83e419 100644 --- a/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less +++ b/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less @@ -6,6 +6,8 @@ src: url('/Umbraco/assets/fonts/helveticons/helveticons.eot?#iefix') format('embedded-opentype'), url('/Umbraco/assets/fonts/helveticons/helveticons.ttf') format('truetype'), url('/Umbraco/assets/fonts/helveticons/helveticons.svg#icomoon') format('svg') !important; } +/****************************/ +/* General style */ /****************************/ body { @@ -18,6 +20,10 @@ body { line-height: 20px; color: #343434; background-color: #F5F5F5; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + padding-left:80px; } h4 { @@ -50,27 +56,10 @@ a, a:hover{ text-decoration:none; } -body { - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - padding-left:80px; -} -body.rightOpen { - padding-right: 250px -} - -body.leftOpen { - padding-left: 330px -} - -.wait { - display: block; - height: 280px; - width: 100%; - background: center center url(../img/loader.gif) no-repeat; -} +/****************************/ +/* General class */ +/****************************/ .right { float:right; @@ -82,15 +71,20 @@ body.leftOpen { display:inline-block; } +.leftOpen { + padding-left: 330px +} +.wait { + display: block; + height: 280px; + width: 100%; + background: center center url(../img/loader.gif) no-repeat; +} - - - - - - - +/****************************/ +/* Group button */ +/****************************/ .btn-group { float: right; @@ -219,13 +213,9 @@ body.leftOpen { background: #f8f8f8; } - - - - - - - +/****************************/ +/* Speech bubble */ +/****************************/ #speechbubble { position: absolute; @@ -258,25 +248,9 @@ body.leftOpen { } - - - - - - - - - - - - - - - - - - - +/****************************/ +/* Main section menu */ +/****************************/ .more-options i { display: inline-block; @@ -287,8 +261,6 @@ body.leftOpen { border-radius: 20px; } - - .fix-left-menu { position: fixed; top: 0; @@ -399,12 +371,6 @@ ul.sections li.current, ul.sections li:hover { margin-left:0px; } - - - - - - /*************************************************/ /* Main panel */ /*************************************************/ @@ -493,22 +459,9 @@ ul.sections li.current, ul.sections li:hover { margin-left: 0px; } - - - - - - - - - - - - - - - - +/*************************************************/ +/* sample palette color */ +/*************************************************/ .samples h4 { position: initial; @@ -540,30 +493,19 @@ ul.sections li.current, ul.sections li:hover { padding: 0; } - - - - - - - - - - - - - - - - +/*************************************************/ +/* canvas designer panel */ +/*************************************************/ h4.panel-title { cursor:pointer; + background-color: #f8f8f8; + color: #767676; } .editor-category{ margin: 5px 10px; - border: 1px solid #535353; + border: 1px solid #D9D9D9; } .canvasdesigner-panel-container { @@ -576,13 +518,6 @@ h4.panel-title { margin: 0 0 10px 0; } - - - - - - - .canvasdesigner .box-slider { padding: 0px 0px 6px 0px; overflow: hidden; @@ -602,13 +537,9 @@ h4.panel-title { clear: both; } - - - - - - - +/*************************************************/ +/* font family picker */ +/*************************************************/ .fontFamilyPickerPreview { float: left; @@ -670,31 +601,9 @@ h4.panel-title { margin-bottom:40px; } - - - - - - - - - - - - - - - - - - - - - - - - - +/*************************************************/ +/* slider */ +/*************************************************/ .canvasdesigner .ui-widget-content { background: rgba(0, 0, 0, 0.27) !important; @@ -703,23 +612,8 @@ h4.panel-title { } .canvasdesigner .ui-slider-horizontal { - /* float: left; */ - /* width: 155px; */ - /* height: .3em !important; */ margin: 14px 11px 0 11px; - /* padding: 10px; */ } - -/*.canvasdesigner .ui-slider .ui-slider-handle { - - margin-left: 0; - color: #d9d9d9 !important; - cursor: pointer; - border-top-right-radius: 1px; - border-bottom-right-radius: 1px; - border-bottom-left-radius: 1px; - border-top-left-radius: 1px; -}*/ .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, @@ -759,13 +653,6 @@ h4.panel-title { } -/*.canvasdesigner .slider-span { - float: right; - margin: -9px 0 0 0; - font-size: 11px; - color: #d9d9d9; -}*/ - @-moz-document url-prefix() { .canvasdesigner .slider-input { margin-top: -6px; @@ -820,29 +707,9 @@ h4.panel-title { height: 28px; } - - - - - - - - - - - - - - - - - - - - - - -/******* IFRAME *******/ +/*************************************************/ +/* IFrame size */ +/*************************************************/ .desktop { width: 100%; @@ -903,17 +770,9 @@ iframe { -o-transform: rotate(90deg); } - - - - - - - - - - -/* image picker */ +/*************************************************/ +/* Image picker */ +/*************************************************/ .imagePickerPreview { height: 20px; @@ -1005,10 +864,6 @@ iframe { border: 2px solid #84B8F0; } -/*.bodyCanvasdesignerImagePicker { - padding: 10px 20px 0 15px; -}*/ - .canvasdesignerImagePicker .modal-dialog { width: 618px; font-weight: normal; @@ -1070,25 +925,9 @@ iframe { color: #555555; } - - - - - - - - - - - - - - - - - - -/******* BORDER *******/ +/*************************************************/ +/* Border editor */ +/*************************************************/ .box-preview { display:inline-block; @@ -1147,6 +986,10 @@ iframe { float: left; } +/*************************************************/ +/* Radius editor */ +/*************************************************/ + .radius-top-left, .radius-top-right, .radius-bottom-left, .radius-bottom-right { display: block; position: absolute; @@ -1178,11 +1021,3 @@ iframe { bottom:0; right:0 } - - - - - - - -