diff options
author | Armen Kesablyan | 2012-02-13 13:36:52 -0800 |
---|---|---|
committer | Armen Kesablyan | 2012-02-13 13:36:52 -0800 |
commit | da32190d5dd91fa2c26f8cabb746980c3d06035c (patch) | |
tree | d923299208c84b1071b58e7eb9c0515b2e1c844a /js/panels/Timeline/Layer.reel/scss/Layer.scss | |
parent | 36cefa3526988cb4dfea107fedaa954a2703260d (diff) | |
parent | 90d0c8c0e98d062c628c061fe5765ce991fda409 (diff) | |
download | ninja-da32190d5dd91fa2c26f8cabb746980c3d06035c.tar.gz |
Merge branch 'refs/heads/master' into text-tool
Diffstat (limited to 'js/panels/Timeline/Layer.reel/scss/Layer.scss')
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 220 |
1 files changed, 220 insertions, 0 deletions
diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss new file mode 100644 index 00000000..7473a275 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss | |||
@@ -0,0 +1,220 @@ | |||
1 | @charset "UTF-8"; | ||
2 | |||
3 | /* Layer.scss | ||
4 | * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. | ||
5 | */ | ||
6 | |||
7 | // Import theme settings | ||
8 | @import "../../../../../_scss/imports/themes/default/colors"; | ||
9 | // @import "../../../../../_scss/imports/themes/default/fonts"; | ||
10 | @import "../../../../../_scss/imports/themes/default/mixins"; | ||
11 | |||
12 | // Import generic mixins and styles | ||
13 | @import "../../../../../_scss/imports/scss/mixins"; | ||
14 | // @import "../../../../../_scss/imports/scss/Base"; | ||
15 | |||
16 | .layerLabel{ | ||
17 | width: 100%; | ||
18 | color: $color-panel-text; | ||
19 | height: 21px; | ||
20 | font-family: 'Droid Sans'; | ||
21 | font-size: 12px; | ||
22 | text-shadow: 1px 1px 1px $color-panel-shadow; | ||
23 | display: -webkit-box; | ||
24 | -webkit-box-orient: horizontal; | ||
25 | } | ||
26 | .layerLabel.layerSelected { | ||
27 | background-color: $color-panel-hilite-bg; | ||
28 | color: $color-panel-hilite-text; | ||
29 | } | ||
30 | .layerLabel{ | ||
31 | width:100%; | ||
32 | height:18px; | ||
33 | padding-left: 25px; | ||
34 | padding-top: 2px; | ||
35 | -webkit-box-flex: 1; | ||
36 | } | ||
37 | .layerDisclosure{ | ||
38 | background-image: url('../images/panelDisclosureIcon.png'); | ||
39 | background-repeat: no-repeat; | ||
40 | width: 16px; | ||
41 | height: 16px; | ||
42 | /*float: left;*/ | ||
43 | |||
44 | -webkit-transition-property: rotate; | ||
45 | -webkit-transition-duration: 0.2s; | ||
46 | -webkit-transition-timing-function: linear; | ||
47 | padding-right: 2px; | ||
48 | -webkit-box-flex: 0; | ||
49 | } | ||
50 | .layerHide{ | ||
51 | background-image: url('../images/eye.png'); | ||
52 | background-repeat: no-repeat; | ||
53 | /*float: right;*/ | ||
54 | width: 16px; | ||
55 | height: 16px; | ||
56 | padding-right: 4px; | ||
57 | -webkit-box-flex: 0; | ||
58 | } | ||
59 | .layerLock{ | ||
60 | background-image: url('../images/lock_open.png'); | ||
61 | background-repeat: no-repeat; | ||
62 | /*float: right;*/ | ||
63 | width: 16px; | ||
64 | height: 16px; | ||
65 | padding-right: 4px; | ||
66 | -webkit-box-flex: 0; | ||
67 | } | ||
68 | |||
69 | /******************************************/ | ||
70 | |||
71 | .container-layer { | ||
72 | background-color: $color-panel-bg; | ||
73 | color: $color-panel-text; | ||
74 | font-size: 12px; | ||
75 | text-shadow: 1px 1px 1px $color-app-shadow; | ||
76 | } | ||
77 | .selected .container-layer { | ||
78 | background-color: $color-panel-bg; | ||
79 | } | ||
80 | .selected .container-layer .label-layer { | ||
81 | background-color: $color-panel-hilite-bg; | ||
82 | color: $color-panel-hilite-text; | ||
83 | } | ||
84 | |||
85 | .userlayers .collapsible-label { | ||
86 | display: block; | ||
87 | width: 100px; | ||
88 | height: 21px; | ||
89 | line-height: 20px; | ||
90 | color: $color-panel-text; | ||
91 | margin-left: 30px; | ||
92 | margin-right: 20px; | ||
93 | white-space: nowrap; | ||
94 | overflow: hidden; | ||
95 | text-overflow: ellipsis; | ||
96 | } | ||
97 | .layerSelected .label-layer { | ||
98 | background-color: $color-panel-hilite-bg; | ||
99 | color: $color-panel-hilite-text; | ||
100 | } | ||
101 | .content-layer { | ||
102 | background-color: $color-panel-bg; | ||
103 | color: $color-panel-text; | ||
104 | } | ||
105 | .content-layer .collapsible-label { | ||
106 | background-position: 14px 5px; | ||
107 | border-width: 0px; | ||
108 | } | ||
109 | .label-layer, | ||
110 | .label-position, | ||
111 | .label-transform, | ||
112 | .label-style { | ||
113 | position: relative; | ||
114 | border-bottom: 1px solid #505050; | ||
115 | cursor: pointer; | ||
116 | } | ||
117 | |||
118 | .content-layer .collapsible-label, | ||
119 | .content-layer .collapsible-content { | ||
120 | font-size: 11px; | ||
121 | } | ||
122 | |||
123 | .collapsible-clicker { | ||
124 | position: absolute; | ||
125 | width: 10px; | ||
126 | height: 10px; | ||
127 | top: 5px; | ||
128 | left: 5px; | ||
129 | margin: 0px; | ||
130 | padding: 0px; | ||
131 | background-image: url(../images/icon-open.png); | ||
132 | background-repeat: no-repeat; | ||
133 | } | ||
134 | .collapsible-clicker.collapsible-collapsed { | ||
135 | background-image: url(../images/icon-collapsed.png); | ||
136 | } | ||
137 | .collapsible-content .collapsible-clicker { | ||
138 | left: 12px; | ||
139 | } | ||
140 | .content-layer.collapsible-collapsed { | ||
141 | height: 0px; | ||
142 | overflow: hidden; | ||
143 | } | ||
144 | |||
145 | .label-layer .cssbutton, | ||
146 | .label-style .cssbutton { | ||
147 | width: 14px; | ||
148 | height: 14px; | ||
149 | overflow: hidden; | ||
150 | position: absolute; | ||
151 | background-repeat: no-repeat; | ||
152 | } | ||
153 | .label-layer .button-lock { | ||
154 | background-image: url(../images/icon-lock.png); | ||
155 | top: 3px; | ||
156 | right: 27px; | ||
157 | } | ||
158 | .label-layer .button-visible { | ||
159 | background-image: url(../images/icon-eye.png); | ||
160 | top: 3px; | ||
161 | right: 7px; | ||
162 | } | ||
163 | .label-style .button-add { | ||
164 | background-image: url(../images/icon-plus.png); | ||
165 | width: 15px; | ||
166 | height: 15px; | ||
167 | top: 3px; | ||
168 | right: 11px; | ||
169 | } | ||
170 | .label-style .button-delete { | ||
171 | background-image: url(../images/icon-minus.png); | ||
172 | width: 15px; | ||
173 | height: 15px; | ||
174 | top: 3px; | ||
175 | right: 31px; | ||
176 | } | ||
177 | .collapsible-content .layout-table { | ||
178 | width: 99.9%; | ||
179 | } | ||
180 | .content-layer .collapsible-content { | ||
181 | padding-left: 30px; | ||
182 | } | ||
183 | .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { | ||
184 | width: 40%; | ||
185 | height: 20px; | ||
186 | border-bottom: 1px solid $color-menu-divider; | ||
187 | line-height: 20px; | ||
188 | text-align: left; | ||
189 | } | ||
190 | .collapsible-content .layout-table:first-child { | ||
191 | border-top: 1px solid $color-menu-divider; | ||
192 | } | ||
193 | .collapsible-transition { | ||
194 | -webkit-transition-property: height; | ||
195 | -webkit-transition-duration: 200ms; | ||
196 | -webkit-transition-timing-function: ease-in; | ||
197 | } | ||
198 | |||
199 | .editable2 { | ||
200 | height: 20px; | ||
201 | background-color: $color-panel-hilite-text !IMPORTANT; | ||
202 | color: $color-panel-hilite-bg !IMPORTANT; | ||
203 | border-width: 0px; | ||
204 | font-size: 11px; | ||
205 | overflow: hidden; | ||
206 | -webkit-user-select: text; | ||
207 | text-overflow: clip; | ||
208 | } | ||
209 | |||
210 | /* styles elements */ | ||
211 | .content-style .item-template { | ||
212 | display: none; | ||
213 | } | ||
214 | .content-style .layout-row.selected .layout-cell { | ||
215 | background-color: $color-panel-hilite-bg; | ||
216 | color: $color-panel-hilite-text; | ||
217 | } | ||
218 | .style-row { | ||
219 | height: 20px; | ||
220 | } | ||