From 7615da5c6ba54bd082eac4b8a6d9196084e5c590 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 20 Jun 2012 16:45:29 -0700 Subject: Adding transparent background to color chip buttons Add a transparent pattern to the background of color chips consumed in the app, this way you can preview colors in alpha. This was lost, just added back again. Not a big change, just minor CSS, so should only be quickly tested prior to merge. --- css/ninja.css | 4 +++- .../brush-properties.reel/brush-properties.html | 2 +- .../fill-properties.reel/fill-properties.html | 2 +- .../ink-bottle-properties.reel/ink-bottle-properties.html | 2 +- .../tools-properties/pen-properties.reel/pen-properties.html | 4 ++-- .../shape-properties.reel/shape-properties.html | 4 ++-- .../tools-properties/tag-properties.reel/tag-properties.html | 2 +- .../text-properties.reel/text-properties.css | 4 ++-- .../text-properties.reel/text-properties.html | 2 +- js/panels/properties.reel/properties.css | 10 +++++++++- scss/imports/scss/_Tools.scss | 12 ++++++++++-- 11 files changed, 33 insertions(+), 15 deletions(-) diff --git a/css/ninja.css b/css/ninja.css index e3d560ab..1a6bd654 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -677,7 +677,9 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul .toolOptionsSpacer { margin-right: 9px; } -.toolColorChipCtrl { width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px black solid; } +.toolColorChipCtrl { width: 16px; height: 16px; border: 1px #000 solid; } + +.toolColorChipContainer { background: url(../../../../../images/colorpanel/transparent.png) repeat; width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px #777 solid; } .toolColorChipIcon { width: 20px; height: 20px; margin-top: 1px; -webkit-transform: scale(0.8); background-color: #282828; } diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html index 7d99a42a..8753e921 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html @@ -82,7 +82,7 @@
-
+
 
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html index ca447b8b..a479dbda 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html @@ -66,7 +66,7 @@
-
+
 
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html index 5620eed8..41c55bc0 100755 --- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html +++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html @@ -151,7 +151,7 @@
-
+
 
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html index adb5cd7d..c77ac660 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html @@ -51,9 +51,9 @@
 
-
+
-
+
 
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html index ea246ea8..22ea7431 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -135,9 +135,9 @@
 
-
+
-
+
 
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html index 87f87aff..082384db 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html @@ -48,7 +48,7 @@
 
-
+
 
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css index 218105a7..586cdcd5 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css @@ -39,7 +39,7 @@ width: 160px; } -.optionsTextTool .toolColorChipCtrl { - margin-left: 6px; +.fontColorChipContainer { + margin-left: 10px !important; margin-right: 0px; } \ No newline at end of file diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html index e7fafd0d..f47ca0c8 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -290,7 +290,7 @@ -
+
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index 84f52ed4..d1aa750a 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css @@ -239,8 +239,9 @@ padding-right:6px; } .propertiesPanel .colortoolbar div { - margin: 0px 10px 0px 20px; + margin: 0px 5px 0px 10px; clear:none; + float: left; } /* color select */ @@ -250,6 +251,13 @@ padding-right:6px; clear:none; } +.propertiesPanel .colortoolbar .chipContainer { + margin-top: 2px; + background: url(../../../../../images/colorpanel/transparent.png) repeat; + width: 40px; + height: 20px; +} + .propertiesPanel .button:active { outline: none; } diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index c63e695d..e599668f 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -36,12 +36,20 @@ } .toolColorChipCtrl { - width: 18px; + width: 16px; + height: 16px; + border: 1px #000 solid; +} + +.toolColorChipContainer +{ + background: url(../../../../../images/colorpanel/transparent.png) repeat; + width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; - border: 1px black solid; + border: 1px #777 solid; } .toolColorChipIcon { -- cgit v1.2.3