From 2e58595d5c58ad9937bfc4f85ba8894970d4719f Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 8 Feb 2012 13:56:54 -0800 Subject: adding new scss folder --- scss/imports/themes/_test.scss | 55 +++++++++++++++++++ scss/imports/themes/default/_colors.scss | 94 ++++++++++++++++++++++++++++++++ scss/imports/themes/default/_fonts.scss | 7 +++ scss/imports/themes/default/_mixins.scss | 37 +++++++++++++ 4 files changed, 193 insertions(+) create mode 100644 scss/imports/themes/_test.scss create mode 100644 scss/imports/themes/default/_colors.scss create mode 100644 scss/imports/themes/default/_fonts.scss create mode 100644 scss/imports/themes/default/_mixins.scss (limited to 'scss/imports/themes') 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 @@ +// +// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +//
+ +/* extra theme for use when developing the layouts so we can color items to discern them */ +.applicationBodyBackground { + background: blue; +} + +.menuBar { + color: rgba(192,192,192,1); + background: black; +} + +.docAreaBackground { + color: black; + background: black; +} + +.mainStageBackground { + color: white; + background: gray; +} + +.stageContentShadow { + -webkit-box-shadow: 3px 5px 4px rgba(0,0,0,.5); + -moz-box-shadow: 3px 5px 4px rgba(0,0,0,.5); + box-shadow: 3px 5px 4px rgba(0,0,0,.5); +} + +.panelBackground { + color: white; + /*border: solid 1px #333;*/ + background: rgba(41,41,41,1); +} + +.panelCollapseControlBackground { + background: green; +} + +.panelCollapseArrowFill { + 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 */ +} + +.docAreaBorder { + border: solid 1px rgba(51,51,51,1); + padding: 1px; +} + +.panelContent { + background: rgba(62,62,62,1); + border: solid 1px black; +} \ 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 @@ +// +// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +//
+ +//_colors.scss +//Defines the colors for the UI of the application. +//To create a new theme, copy this file and change the values as desired. +//Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. + + +// Colors for radio buttons and other form elements +$color-radio-border: rgb(40,40,40); +$color-radio-shadow: rgba(200,200,200,0.5); +$color-radio-gradient-top: rgb(100,100,100); +$color-radio-gradient-bottom: rgb(60,60,60); +$color-formgrad-top: rgb(80,80,80); +$color-formgrad-bottom: rgb(60,60,60); +$color-radio-bg: rgb(0,0,0); +$color-radio: rgb(200,200,200); +$color-input: rgb(255,255,255); +$color-input-bg: rgb(68, 68, 68); +$color-input-border: rgb(49, 49, 49); +$color-focus-outline: rgb(180, 180, 180); +$color-transparent: rgba(0,0,0,0); + +// Base colors for dividers +// Dividers consist of a div with a background color and either +// a top & bottom border (in the case of horizontal dividers) +// or a left & right border (in the case of vertical dividers), +// for a total of three different colors. +// + +$color-divider-first: rgb(35,35,35); // top and left +$color-divider-second: rgb(0,0,0); // Middle +$color-divider-third: rgb(58,58,58); // Bottom and right + +// Main background color of entire app +$color-app-bg: rgb(0,0,0); // Main app background color. +$color-app-bg-a1: rgba(0,0,0,1); // rgba version +$color-app-border: rgb(51,51,51); // Main app border color +$color-app-shadow: rgba(0,0,0,.5); // color of drop shadows +$color-stage: rgb(128,128,128); // Stage color +$color-body-border: rgb(0,0,0); // body border color +$color-body-bg: rgb(255,255,255); // Body background color + +// Colors for main dropdown menus: background & text for both regular and highlighted states, dividers +$color-menu-bg: rgb(71,71,71); +$color-menu-text: rgb(255,255,255); +$color-menu-hilite-bg: rgb(178,178,178); +$color-menu-hilite-text: rgb(36,36,36); +$color-menu-divider: rgb(80,80,80); +$color-menu-border: rgb(0,0,0); +$color-menu-active-bg: rgb(181,122,10); + + +// Colors for tools: background, text, how they interact with the UI +$color-tool-bg: rgb(41,41,41); +$color-tool-bg-active: rgb(178,178,178); +$color-tool-border-selected: rgb(89,89,89); +$color-tool-bg-a1: rgba(41,41,41,1); +$color-tool-text: rgb(255,255,255); +$color-tool-text-a1: rgba(255,255,255,1); +$color-tool-separator-top: $color-divider-first; +$color-tool-separator-middle: $color-divider-second; +$color-tool-separator-bottom: $color-divider-third; +$color-tool-select-bg: rgb(102,102,102); +$color-tool-select-border: rgb(0,0,0); +$color-tool-select-hover-bg: rgb(221,221,221); + + +// Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. +$color-panel-bg: $color-menu-bg; +$color-panel-text: $color-menu-text; +$color-panel-input: $color-panel-text; +$color-panel-hilite-bg: $color-menu-hilite-bg; +$color-panel-hilite-text: $color-menu-hilite-text; +$color-panel-clickable: rgb(215,215,215); // used for editable items in their non-edit state, etc. +$color-panel-border: $color-menu-border; // Border for panel and for block elements +$color-panel-shadow: rgb(58,58,58); // Shadow for text and block elements +$color-panel-input-bg: rgb(68, 68, 68); +$color-panel-dividerlabel-bg: rgb(62, 62, 62); +$color-panel-input-border: rgb(49, 49, 49); +$color-panel-divider-top: rgb(62, 62, 62); +$color-panel-divider: $color-menu-divider; +$color-panel-divider-bottom: rgb(86, 86, 86); + +// Colors for scroll bars +$color-sb-border: rgb(0,0,0); +$color-sb-1: rgb(140,140,140); +$color-sb-2: rgb(173,173,173); +$color-sb-hover-1: rgb(190,190,190); +$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 @@ +// +// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +//
+ + 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 @@ +// +// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +//
+ +// themes/themename/mixins.scss +// Mixins that are theme-dependent (e.g. sprite mixins, etc) + +$Mx:0; +$My:0; +$opacity:1; + +//Mixin to set the Image Sprite Sheet +@mixin background-pos($Mx, $My, $Size_x,$Size_y) { + +background-image: url('../images/SpriteSheets/NinjaSpriteSheet2_5.png'); +@if $Size_x == 26px + { + @if $Size_y == 23px + { + $offset_x:30px; + $offset_y:27px; + + $offset_x:$offset_x*$Mx* -1; + $offset_y:$offset_y*$My* -1; + + background-position: $offset_x $offset_y; + background-repeat:no-repeat; + height:$Size_y; + width: $Size_x; + } + } + + +} + -- cgit v1.2.3