diff options
author | Jose Antonio Marquez | 2012-02-08 20:49:55 -0800 |
---|---|---|
committer | Jose Antonio Marquez | 2012-02-08 20:49:55 -0800 |
commit | 5d38e575b2bafeae9bd676247fce15ec5f78fa32 (patch) | |
tree | a612a4cd812d6f619d5fb7568399bdda459ae564 /scss/imports/themes | |
parent | 9b45b897949bf934c8bf2c90ee2ff78f8713cb12 (diff) | |
parent | 35ad4d6d2fac4432046141c63c0209cf3d00be5c (diff) | |
download | ninja-5d38e575b2bafeae9bd676247fce15ec5f78fa32.tar.gz |
Merge branch 'refs/heads/NinjaInternal' into Color
Diffstat (limited to 'scss/imports/themes')
-rw-r--r-- | scss/imports/themes/_test.scss | 55 | ||||
-rw-r--r-- | scss/imports/themes/default/_colors.scss | 94 | ||||
-rw-r--r-- | scss/imports/themes/default/_fonts.scss | 7 | ||||
-rw-r--r-- | scss/imports/themes/default/_mixins.scss | 37 |
4 files changed, 193 insertions, 0 deletions
diff --git a/scss/imports/themes/_test.scss b/scss/imports/themes/_test.scss new file mode 100644 index 00000000..87735bec --- /dev/null +++ b/scss/imports/themes/_test.scss | |||
@@ -0,0 +1,55 @@ | |||
1 | // <copyright> | ||
2 | // This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | // No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | // </copyright> | ||
6 | |||
7 | /* extra theme for use when developing the layouts so we can color items to discern them */ | ||
8 | .applicationBodyBackground { | ||
9 | background: blue; | ||
10 | } | ||
11 | |||
12 | .menuBar { | ||
13 | color: rgba(192,192,192,1); | ||
14 | background: black; | ||
15 | } | ||
16 | |||
17 | .docAreaBackground { | ||
18 | color: black; | ||
19 | background: black; | ||
20 | } | ||
21 | |||
22 | .mainStageBackground { | ||
23 | color: white; | ||
24 | background: gray; | ||
25 | } | ||
26 | |||
27 | .stageContentShadow { | ||
28 | -webkit-box-shadow: 3px 5px 4px rgba(0,0,0,.5); | ||
29 | -moz-box-shadow: 3px 5px 4px rgba(0,0,0,.5); | ||
30 | box-shadow: 3px 5px 4px rgba(0,0,0,.5); | ||
31 | } | ||
32 | |||
33 | .panelBackground { | ||
34 | color: white; | ||
35 | /*border: solid 1px #333;*/ | ||
36 | background: rgba(41,41,41,1); | ||
37 | } | ||
38 | |||
39 | .panelCollapseControlBackground { | ||
40 | background: green; | ||
41 | } | ||
42 | |||
43 | .panelCollapseArrowFill { | ||
44 | color: rgba(76,76,76,1); /* this is never really used but is set so we can get it via javascript to draw the control via script on the canvas */ | ||
45 | } | ||
46 | |||
47 | .docAreaBorder { | ||
48 | border: solid 1px rgba(51,51,51,1); | ||
49 | padding: 1px; | ||
50 | } | ||
51 | |||
52 | .panelContent { | ||
53 | background: rgba(62,62,62,1); | ||
54 | border: solid 1px black; | ||
55 | } \ No newline at end of file | ||
diff --git a/scss/imports/themes/default/_colors.scss b/scss/imports/themes/default/_colors.scss new file mode 100644 index 00000000..2a7b8191 --- /dev/null +++ b/scss/imports/themes/default/_colors.scss | |||
@@ -0,0 +1,94 @@ | |||
1 | // <copyright> | ||
2 | // This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | // No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | // </copyright> | ||
6 | |||
7 | //_colors.scss | ||
8 | //Defines the colors for the UI of the application. | ||
9 | //To create a new theme, copy this file and change the values as desired. | ||
10 | //Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. | ||
11 | |||
12 | |||
13 | // Colors for radio buttons and other form elements | ||
14 | $color-radio-border: rgb(40,40,40); | ||
15 | $color-radio-shadow: rgba(200,200,200,0.5); | ||
16 | $color-radio-gradient-top: rgb(100,100,100); | ||
17 | $color-radio-gradient-bottom: rgb(60,60,60); | ||
18 | $color-formgrad-top: rgb(80,80,80); | ||
19 | $color-formgrad-bottom: rgb(60,60,60); | ||
20 | $color-radio-bg: rgb(0,0,0); | ||
21 | $color-radio: rgb(200,200,200); | ||
22 | $color-input: rgb(255,255,255); | ||
23 | $color-input-bg: rgb(68, 68, 68); | ||
24 | $color-input-border: rgb(49, 49, 49); | ||
25 | $color-focus-outline: rgb(180, 180, 180); | ||
26 | $color-transparent: rgba(0,0,0,0); | ||
27 | |||
28 | // Base colors for dividers | ||
29 | // Dividers consist of a div with a background color and either | ||
30 | // a top & bottom border (in the case of horizontal dividers) | ||
31 | // or a left & right border (in the case of vertical dividers), | ||
32 | // for a total of three different colors. | ||
33 | // | ||
34 | |||
35 | $color-divider-first: rgb(35,35,35); // top and left | ||
36 | $color-divider-second: rgb(0,0,0); // Middle | ||
37 | $color-divider-third: rgb(58,58,58); // Bottom and right | ||
38 | |||
39 | // Main background color of entire app | ||
40 | $color-app-bg: rgb(0,0,0); // Main app background color. | ||
41 | $color-app-bg-a1: rgba(0,0,0,1); // rgba version | ||
42 | $color-app-border: rgb(51,51,51); // Main app border color | ||
43 | $color-app-shadow: rgba(0,0,0,.5); // color of drop shadows | ||
44 | $color-stage: rgb(128,128,128); // Stage color | ||
45 | $color-body-border: rgb(0,0,0); // body border color | ||
46 | $color-body-bg: rgb(255,255,255); // Body background color | ||
47 | |||
48 | // Colors for main dropdown menus: background & text for both regular and highlighted states, dividers | ||
49 | $color-menu-bg: rgb(71,71,71); | ||
50 | $color-menu-text: rgb(255,255,255); | ||
51 | $color-menu-hilite-bg: rgb(178,178,178); | ||
52 | $color-menu-hilite-text: rgb(36,36,36); | ||
53 | $color-menu-divider: rgb(80,80,80); | ||
54 | $color-menu-border: rgb(0,0,0); | ||
55 | $color-menu-active-bg: rgb(181,122,10); | ||
56 | |||
57 | |||
58 | // Colors for tools: background, text, how they interact with the UI | ||
59 | $color-tool-bg: rgb(41,41,41); | ||
60 | $color-tool-bg-active: rgb(178,178,178); | ||
61 | $color-tool-border-selected: rgb(89,89,89); | ||
62 | $color-tool-bg-a1: rgba(41,41,41,1); | ||
63 | $color-tool-text: rgb(255,255,255); | ||
64 | $color-tool-text-a1: rgba(255,255,255,1); | ||
65 | $color-tool-separator-top: $color-divider-first; | ||
66 | $color-tool-separator-middle: $color-divider-second; | ||
67 | $color-tool-separator-bottom: $color-divider-third; | ||
68 | $color-tool-select-bg: rgb(102,102,102); | ||
69 | $color-tool-select-border: rgb(0,0,0); | ||
70 | $color-tool-select-hover-bg: rgb(221,221,221); | ||
71 | |||
72 | |||
73 | // Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. | ||
74 | $color-panel-bg: $color-menu-bg; | ||
75 | $color-panel-text: $color-menu-text; | ||
76 | $color-panel-input: $color-panel-text; | ||
77 | $color-panel-hilite-bg: $color-menu-hilite-bg; | ||
78 | $color-panel-hilite-text: $color-menu-hilite-text; | ||
79 | $color-panel-clickable: rgb(215,215,215); // used for editable items in their non-edit state, etc. | ||
80 | $color-panel-border: $color-menu-border; // Border for panel and for block elements | ||
81 | $color-panel-shadow: rgb(58,58,58); // Shadow for text and block elements | ||
82 | $color-panel-input-bg: rgb(68, 68, 68); | ||
83 | $color-panel-dividerlabel-bg: rgb(62, 62, 62); | ||
84 | $color-panel-input-border: rgb(49, 49, 49); | ||
85 | $color-panel-divider-top: rgb(62, 62, 62); | ||
86 | $color-panel-divider: $color-menu-divider; | ||
87 | $color-panel-divider-bottom: rgb(86, 86, 86); | ||
88 | |||
89 | // Colors for scroll bars | ||
90 | $color-sb-border: rgb(0,0,0); | ||
91 | $color-sb-1: rgb(140,140,140); | ||
92 | $color-sb-2: rgb(173,173,173); | ||
93 | $color-sb-hover-1: rgb(190,190,190); | ||
94 | $color-sb-hover-2: rgb(255,255,255); | ||
diff --git a/scss/imports/themes/default/_fonts.scss b/scss/imports/themes/default/_fonts.scss new file mode 100644 index 00000000..9174cff3 --- /dev/null +++ b/scss/imports/themes/default/_fonts.scss | |||
@@ -0,0 +1,7 @@ | |||
1 | // <copyright> | ||
2 | // This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | // No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | // </copyright> | ||
6 | |||
7 | |||
diff --git a/scss/imports/themes/default/_mixins.scss b/scss/imports/themes/default/_mixins.scss new file mode 100644 index 00000000..9f61e7ef --- /dev/null +++ b/scss/imports/themes/default/_mixins.scss | |||
@@ -0,0 +1,37 @@ | |||
1 | // <copyright> | ||
2 | // This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | // No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | // </copyright> | ||
6 | |||
7 | // themes/themename/mixins.scss | ||
8 | // Mixins that are theme-dependent (e.g. sprite mixins, etc) | ||
9 | |||
10 | $Mx:0; | ||
11 | $My:0; | ||
12 | $opacity:1; | ||
13 | |||
14 | //Mixin to set the Image Sprite Sheet | ||
15 | @mixin background-pos($Mx, $My, $Size_x,$Size_y) { | ||
16 | |||
17 | background-image: url('../images/SpriteSheets/NinjaSpriteSheet2_5.png'); | ||
18 | @if $Size_x == 26px | ||
19 | { | ||
20 | @if $Size_y == 23px | ||
21 | { | ||
22 | $offset_x:30px; | ||
23 | $offset_y:27px; | ||
24 | |||
25 | $offset_x:$offset_x*$Mx* -1; | ||
26 | $offset_y:$offset_y*$My* -1; | ||
27 | |||
28 | background-position: $offset_x $offset_y; | ||
29 | background-repeat:no-repeat; | ||
30 | height:$Size_y; | ||
31 | width: $Size_x; | ||
32 | } | ||
33 | } | ||
34 | |||
35 | |||
36 | } | ||
37 | |||