1 files changed, 339 insertions, 0 deletions

diff --git a/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss b/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss
new file mode 100755
index 00000000..70bbc13f
--- /dev/null
+++ b/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss
@@ -0,0 +1,339 @@
+@charset "UTF-8";
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+$grey_dark: #292929;
+$grey_light: #494949;
+$sprite_stdbtn_width: 26;
+$sprite_stdbtn_height: 23;
+$sprite_stdbtn_spacing: 4;
+
+@mixin sprite_background ($x, $y)
+{
+        background: url(../../../../../images/SpriteSheets/NinjaSpriteSheet.png) transparent no-repeat top left !important;
+        background-position: $x*-1px  $y*-1px !important;
+        border: none !important;
+        display: block;
+}
+
+.cp_expanded
+{
+        font-size: 12px;
+        text-shadow: 1px 1px 1px #000;
+        color: #FFF;
+}
+
+.cp_expanded a:hover
+{
+        color: #CCC;
+}
+
+.cp_expanded hr
+{
+        float: left;
+        clear: both;
+        width: 100%;
+        display: block;
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, rgb(29,29,29)), color-stop(0.75, rgb(66,66,66)));
+        border: none;
+        height: 2px;
+        margin: 4px 0px 4px 0px;
+}
+
+.cp_history
+{
+        float: left;
+        margin: 4px 0px 0px 4px;
+        background: url(../../../../../images/colorpanel/transparent.png) repeat;
+}
+
+.cp_history button
+{
+        
+        width: 22px;
+        height: 22px;
+        overflow: hidden;
+        text-indent: -9999px;
+        background: #333;
+        float: left;
+        border: solid 1px #000;
+        cursor: pointer;
+        margin: 0px -1px 0px 0px;
+        padding: 0px 0px 0px 0px;
+}
+
+.cp_expanded .cp_inputs
+{
+        float: left;
+        margin: 0px 4px 0px 4px;
+}
+
+
+.cp_expanded .cp_input_button
+{
+        background: url(../../../../../images/colorpanel/transparent.png) repeat;
+        float: left;
+        clear: left;
+        margin: 0px 0px 6px 0px;
+}
+
+.cp_expanded .cp_inputs button, .cpe_fill, .cpe_stroke, .cpe_fill_icon, .cpe_stroke_icon
+{
+        
+        width: 22px;
+        height: 22px;
+        overflow: hidden;
+        text-indent: -9999px;
+        padding: 0px 0px 0px 0px;
+        display: block;
+        float: left;
+        cursor: pointer;
+}
+
+.cpe_fill, .cpe_stroke
+{
+        clear: left;
+        background-color: #333;
+        border: solid 1px #000;
+}
+
+.cpe_fill_icon, .cpe_fill_icon
+{       
+        @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*10, 0);
+}
+
+.cpe_fill_icon:hover, .cpe_fill_icon.selected, .cpe_fill_icon:hover, .cpe_fill_icon.selected
+{       
+        @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*11, 0);
+}
+
+.cpe_stroke_icon, .cpe_stroke_icon
+{       
+        @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*8, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1);
+}
+
+.cpe_stroke_icon:hover, .cpe_stroke_icon.selected, .cpe_stroke_icon:hover, .cpe_stroke_icon.selected
+{       
+        @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*9, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1);
+}
+
+.cp_modes
+{
+        float: right;
+        margin: 4px 6px 0px 0px;
+        min-width: 73px;
+}
+
+.cp_modes button
+{
+        font-size: 14px;
+        line-height: 22px;
+        vertical-align: middle;
+        float: left;
+        background: none;
+        border: none;
+        margin: 0px;
+        padding: 0px;
+        color: #FFF;
+        text-shadow: 1px 1px 1px #000;
+        font-family: 'Droid Sans', sans-serif;
+}
+
+.cp_modes button:hover
+{
+        cursor: pointer;
+        color: #CCC;
+}
+
+.cp_rgb_mode, .cp_hsl_mode
+{
+        color: #888 !important;
+}
+
+.cp_rgb_mode:hover/* , .cp_hsl_mode:hover */
+{
+        color: #CCC !important;
+}
+
+.cp_rgb_mode.selected/* , .cp_hsl_mode.selected */
+{
+        color: #FFF !important;
+}
+
+.cp_modes hr
+{
+        display: block;
+        float: left;
+        width: 2px;
+        height: 14px;
+        border: none;
+        clear: none;
+        background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0.5, rgb(29,29,29)), color-stop(0.75, rgb(66,66,66)));
+        margin: 4px 8px 0px 9px
+}
+
+.cp_options
+{
+        float: left;
+        margin: 56px 0px 0px -48px;
+        
+}
+
+.cp_options button
+{
+        width: 14px;
+        height: 15px;
+        overflow: hidden;
+        text-indent: -9999px;
+        float: left;
+        cursor: pointer;
+        margin: 0px 2px 0px 0px;
+        border: none;
+        opacity: .7;
+}
+
+.cp_options button:hover
+{
+        background-position: 0px 1px;
+        opacity: 1;
+}
+
+.cp_reset
+{
+        background: url(../img/icon_default.png) transparent no-repeat 0px 0px;
+}
+
+.cp_nocolor
+{
+        background: url(../img/icon_nocolor.png) transparent no-repeat 0px 0px;
+}
+
+.cp_swap
+{
+        background: url(../img/icon_swap.png) transparent no-repeat 0px 0px;
+}
+
+.cp_sliders
+{
+        float: left;
+        width: 127px;
+        margin: 0px 0px 0px 0px;
+}