diff options
Diffstat (limited to 'js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss')
-rwxr-xr-x | js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss | 339 |
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 @@ | |||
1 | @charset "UTF-8"; | ||
2 | /* <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> */ | ||
7 | |||
8 | $grey_dark: #292929; | ||
9 | $grey_light: #494949; | ||
10 | $sprite_stdbtn_width: 26; | ||
11 | $sprite_stdbtn_height: 23; | ||
12 | $sprite_stdbtn_spacing: 4; | ||
13 | |||
14 | @mixin sprite_background ($x, $y) | ||
15 | { | ||
16 | background: url(../../../../../images/SpriteSheets/NinjaSpriteSheet.png) transparent no-repeat top left !important; | ||
17 | background-position: $x*-1px $y*-1px !important; | ||
18 | border: none !important; | ||
19 | display: block; | ||
20 | } | ||
21 | |||
22 | .cp_expanded | ||
23 | { | ||
24 | font-size: 12px; | ||
25 | text-shadow: 1px 1px 1px #000; | ||
26 | color: #FFF; | ||
27 | } | ||
28 | |||
29 | .cp_expanded a:hover | ||
30 | { | ||
31 | color: #CCC; | ||
32 | } | ||
33 | |||
34 | .cp_expanded hr | ||
35 | { | ||
36 | float: left; | ||
37 | clear: both; | ||
38 | width: 100%; | ||
39 | display: block; | ||
40 | 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))); | ||
41 | border: none; | ||
42 | height: 2px; | ||
43 | margin: 4px 0px 4px 0px; | ||
44 | } | ||
45 | |||
46 | .cp_history | ||
47 | { | ||
48 | float: left; | ||
49 | margin: 4px 0px 0px 4px; | ||
50 | background: url(../../../../../images/colorpanel/transparent.png) repeat; | ||
51 | } | ||
52 | |||
53 | .cp_history button | ||
54 | { | ||
55 | |||
56 | width: 22px; | ||
57 | height: 22px; | ||
58 | overflow: hidden; | ||
59 | text-indent: -9999px; | ||
60 | background: #333; | ||
61 | float: left; | ||
62 | border: solid 1px #000; | ||
63 | cursor: pointer; | ||
64 | margin: 0px -1px 0px 0px; | ||
65 | padding: 0px 0px 0px 0px; | ||
66 | } | ||
67 | |||
68 | .cp_expanded .cp_inputs | ||
69 | { | ||
70 | float: left; | ||
71 | margin: 0px 4px 0px 4px; | ||
72 | } | ||
73 | |||
74 | |||
75 | .cp_expanded .cp_input_button | ||
76 | { | ||
77 | background: url(../../../../../images/colorpanel/transparent.png) repeat; | ||
78 | float: left; | ||
79 | clear: left; | ||
80 | margin: 0px 0px 6px 0px; | ||
81 | } | ||
82 | |||
83 | .cp_expanded .cp_inputs button, .cpe_fill, .cpe_stroke, .cpe_fill_icon, .cpe_stroke_icon | ||
84 | { | ||
85 | |||
86 | width: 22px; | ||
87 | height: 22px; | ||
88 | overflow: hidden; | ||
89 | text-indent: -9999px; | ||
90 | padding: 0px 0px 0px 0px; | ||
91 | display: block; | ||
92 | float: left; | ||
93 | cursor: pointer; | ||
94 | } | ||
95 | |||
96 | .cpe_fill, .cpe_stroke | ||
97 | { | ||
98 | clear: left; | ||
99 | background-color: #333; | ||
100 | border: solid 1px #000; | ||
101 | } | ||
102 | |||
103 | .cpe_fill_icon, .cpe_fill_icon | ||
104 | { | ||
105 | @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*10, 0); | ||
106 | } | ||
107 | |||
108 | .cpe_fill_icon:hover, .cpe_fill_icon.selected, .cpe_fill_icon:hover, .cpe_fill_icon.selected | ||
109 | { | ||
110 | @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*11, 0); | ||
111 | } | ||
112 | |||
113 | .cpe_stroke_icon, .cpe_stroke_icon | ||
114 | { | ||
115 | @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*8, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1); | ||
116 | } | ||
117 | |||
118 | .cpe_stroke_icon:hover, .cpe_stroke_icon.selected, .cpe_stroke_icon:hover, .cpe_stroke_icon.selected | ||
119 | { | ||
120 | @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*9, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1); | ||
121 | } | ||
122 | |||
123 | .cp_modes | ||
124 | { | ||
125 | float: right; | ||
126 | margin: 4px 6px 0px 0px; | ||
127 | min-width: 73px; | ||
128 | } | ||
129 | |||
130 | .cp_modes button | ||
131 | { | ||
132 | font-size: 14px; | ||
133 | line-height: 22px; | ||
134 | vertical-align: middle; | ||
135 | float: left; | ||
136 | background: none; | ||
137 | border: none; | ||
138 | margin: 0px; | ||
139 | padding: 0px; | ||
140 | color: #FFF; | ||
141 | text-shadow: 1px 1px 1px #000; | ||
142 | font-family: 'Droid Sans', sans-serif; | ||
143 | } | ||
144 | |||
145 | .cp_modes button:hover | ||
146 | { | ||
147 | cursor: pointer; | ||
148 | color: #CCC; | ||
149 | } | ||
150 | |||
151 | .cp_rgb_mode, .cp_hsl_mode | ||
152 | { | ||
153 | color: #888 !important; | ||
154 | } | ||
155 | |||
156 | .cp_rgb_mode:hover/* , .cp_hsl_mode:hover */ | ||
157 | { | ||
158 | color: #CCC !important; | ||
159 | } | ||
160 | |||
161 | .cp_rgb_mode.selected/* , .cp_hsl_mode.selected */ | ||
162 | { | ||
163 | color: #FFF !important; | ||
164 | } | ||
165 | |||
166 | .cp_modes hr | ||
167 | { | ||
168 | display: block; | ||
169 | float: left; | ||
170 | width: 2px; | ||
171 | height: 14px; | ||
172 | border: none; | ||
173 | clear: none; | ||
174 | 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))); | ||
175 | margin: 4px 8px 0px 9px | ||
176 | } | ||
177 | |||
178 | .cp_options | ||
179 | { | ||
180 | float: left; | ||
181 | margin: 56px 0px 0px -48px; | ||
182 | |||
183 | } | ||
184 | |||
185 | .cp_options button | ||
186 | { | ||
187 | width: 14px; | ||
188 | height: 15px; | ||
189 | overflow: hidden; | ||
190 | text-indent: -9999px; | ||
191 | float: left; | ||
192 | cursor: pointer; | ||
193 | margin: 0px 2px 0px 0px; | ||
194 | border: none; | ||
195 | opacity: .7; | ||
196 | } | ||
197 | |||
198 | .cp_options button:hover | ||
199 | { | ||
200 | background-position: 0px 1px; | ||
201 | opacity: 1; | ||
202 | } | ||
203 | |||
204 | .cp_reset | ||
205 | { | ||
206 | background: url(../img/icon_default.png) transparent no-repeat 0px 0px; | ||
207 | } | ||
208 | |||
209 | .cp_nocolor | ||
210 | { | ||
211 | background: url(../img/icon_nocolor.png) transparent no-repeat 0px 0px; | ||
212 | } | ||
213 | |||
214 | .cp_swap | ||
215 | { | ||
216 | background: url(../img/icon_swap.png) transparent no-repeat 0px 0px; | ||
217 | } | ||
218 | |||
219 | .cp_sliders | ||
220 | { | ||
221 | float: left; | ||
222 | width: 127px; | ||
223 | margin: 0px 0px 0px 0px; | ||
224 | } | ||