Home Explore Help
Sign In
pwa
/
Lungo.js
mirror of https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Refactor theme colors

Javi Jimenez Villar 13 years ago
parent
0d725983b1
commit
15fd3efc90
9 changed files with 93 additions and 68 deletions
Split View Show Diff Stats
  1. 20 3
      example/test.html
  2. 18 11
      src/stylesheets/theme/__init.styl
  3. 2 2
      src/stylesheets/theme/theme.base.styl
  4. 7 7
      src/stylesheets/theme/theme.layout.list.styl
  5. 9 9
      src/stylesheets/theme/theme.layout.nav.styl
  6. 14 11
      src/stylesheets/theme/theme.layout.styl
  7. 5 5
      src/stylesheets/theme/theme.widget.button.styl
  8. 15 18
      src/stylesheets/theme/theme.widget.form.styl
  9. 3 2
      src/stylesheets/theme/theme.widget.notification.styl

+ 20 - 3
example/test.html
View File 

@@ -22,9 +22,9 @@
 
 
 <body class="app">
 
 
+
 
 <section id="form" data-transition="slide">
 
     <header data-title="Form Elements" data-back="home">
 
-
 
         <nav class="right">
 
             <button data-label="test"></button>
 
             <button data-icon="edit"></button>
 
@@ -473,7 +473,7 @@
 
 
     <!-- Lungo dependencies -->
 
     <script src="components/quojs/quo.js"></script>
 
-    <script src="components/lungo.brownie/lungo.js"></script>
 
+    <script src="components/lungo.brownie/lungo.debug.js"></script>
 
 
     <!-- LungoJS - Sandbox App -->
 
     <script>
 
@@ -488,12 +488,29 @@
 
         Lungo.ready(function() {
 
             // Lungo.Router.article("main", "sub");
 
             Lungo.Element.count("section#main nav #products", 5);
 
+
 
+                // Lungo.Notification.success('Title', 'Description', 'ok', 10000);
 
+
 
+            // Lungo.Notification.push("Connection stablished.", "ok");
 
+
 
+
 
+            // setTimeout(function() {
 
+            //     Lungo.Notification.show();
 
+            // }, 2000);
 
+            // setTimeout(function() {
 
+            //     Lungo.Notification.error('Title', 'Description', 'ok', 10000);
 
+            // }, 4000);
 
+
 
+
 
+            // Lungo.Article.clean("form-normal", "edit", "Form empty", "Please check if you have an internet connection.", "Ok, I'll check tomorrow")
 
+            // Lungo.Article.clean("form-normal")
 
         });
 
+
 
+
 
         // Lungo.Notification.show("hola", "user");
 
 
         // Lungo.Notification.show();
 
 
-        // Lungo.Notification.success('Title', 'Description', 'message', 2);
 
 
         // Lungo.Notification.confirm({
 
         //     icon: 'user',

+ 18 - 11
src/stylesheets/theme/__init.styl
View File 

@@ -1,25 +1,31 @@
 
 @import "../CSSmethods/vendor.styl"
 
 
 /* -------------------------- COLOUR -------------------------- */
 
-CONTENT         = #f5f5f5
 
+BACKGROUND      = #f5f5f5
 
 COLOR           = #333
 
-COLOR_secondary = #95a5a6
 
-COLOR_cancel    = #e74c3c
 
+// COLOR           = #34495e
 
+COLOR_theme     = #0093D5
 
 COLOR_success   = #2ecc71
 
+COLOR_cancel    = #e74c3c
 
+COLOR_secondary = #95a5a6
 
+
 
+COLOR_contrast            = #222
 
 
-THEME           = #0093D5
 
-THEME_light     = lighten(THEME, 15%)
 
-THEME_dark      = darken(THEME, 15%)
 
+
 
+/* -------------------------- VARIATIONS -------------------------- */
 
 
 /* ------------------------- COLOUR ------------------------- */
 
-DARK            = #222
 
-DARK_light      = lighten(DARK, 25%)
 
-DARK_dark       = darken(DARK, 15%)
 
-DARK_darkest    = darken(DARK, 30%)
 
+COLOR_contrast_light      = lighten(COLOR_contrast, 25%)
 
+COLOR_contrast_dark       = darken(COLOR_contrast, 15%)
 
+COLOR_contrast_darkest    = darken(COLOR_contrast, 30%)
 
+
 
 LIST_color      = lighten(COLOR, 5%)
 
 LIST_color_2nd  = lighten(COLOR, 35%)
 
 LIST_border     = lighten(COLOR, 90%)
 
-NAV_LINK        = lighten(DARK, 25%)
 
+
 
+LIST_active     = lighten(COLOR_theme, 15%)
 
+
 
+NAV_LINK        = lighten(COLOR_contrast, 25%)
 
 NAV_LINK_ACTIVE = #FFF
 
 
 /* ------------------------- TRANSITION ------------------------- */
 
@@ -30,5 +36,6 @@ TRANSITION_easing      = ease
 
 BORDER_radius   = 2px
 
 /* -------------------------- FORM -------------------------- */
 
 FORM_color         = darken(#e5e5e5, 5%)
 
+// FORM_color         = #34495e
 
 FORM_border        = 2px
 
 FORM_border_radius = (BORDER_radius * FORM_border)

+ 2 - 2
src/stylesheets/theme/theme.base.styl
View File 

@@ -20,6 +20,6 @@ body
 
   letter-spacing: -0.05em
 
 
   & .theme
 
-    background-color: THEME-light
 
+    background-color: COLOR_theme-light
 
     &:active
 
-      background-color: THEME
 
+      background-color: COLOR_theme

+ 7 - 7
src/stylesheets/theme/theme.layout.list.styl
View File 

@@ -26,11 +26,11 @@
 
     &, a
 
       color: LIST_color
 
       &.anchor
 
-        background: DARK
 
+        background: COLOR_contrast
 
       &.dark
 
-        background: DARK_light
 
+        background: COLOR_contrast_light
 
       &.selectable:active, &.theme, &.active
 
-        background: THEME_light
 
+        background: LIST_active
 
       &.light
 
         background:  LIST_border
 
         color: LIST_color_2nd
 
@@ -49,13 +49,13 @@
 
   aside & li
 
     background: none
 
     &:not(:first-child)
 
-      border-top: solid 1px  DARK
 
+      border-top: solid 1px  COLOR_contrast
 
     &:not(:last-child)
 
-      border-bottom: solid 1px DARKEST
 
+      border-bottom: solid 1px COLOR_contrastEST
 
     &:active
 
-      background: DARK_darkest
 
+      background: COLOR_contrast_darkest
 
     &.active
 
-      background: THEME
 
+      background: COLOR_theme
 
     &.active, &:active
 
       border-color: transparent
 
       & strong, & small, & .icon

+ 9 - 9
src/stylesheets/theme/theme.layout.nav.styl
View File 

@@ -12,10 +12,10 @@
 
 nav
 
   section > header > &
 
     & a:not(.button)
 
-      color: darken(THEME, 35%)
 
-      text-shadow 0 1px 0 lighten(THEME, 25%)
 
+      color: darken(COLOR_theme, 35%)
 
+      text-shadow 0 1px 0 lighten(COLOR_theme, 25%)
 
       &:active
 
-        color: darken(THEME, 50%)
 
+        color: darken(COLOR_theme, 50%)
 
 
   section > footer > & > a, &[data-control=groupbar] > a
 
     color: NAV_LINK
 
@@ -24,21 +24,21 @@ nav
 
 
   section > &[data-control=groupbar] > a.active
 
     transition box-shadow TRANSITION_time TRANSITION_easing
 
-    box-shadow inset 0 -4px 0 THEME
 
+    box-shadow inset 0 -4px 0 COLOR_theme
 
 
   section > footer > & > a
 
-    box-shadow inset 0 1px 0 #000, inset 0 2px 0 lighten(DARK, 20%)
 
+    box-shadow inset 0 1px 0 #000, inset 0 2px 0 lighten(COLOR_contrast, 20%)
 
     &.active
 
       box-shadow inset 0 0 16px #000
 
-      background-color: DARK_dark
 
+      background-color: COLOR_contrast_dark
 
 
   aside & a
 
-    color: lighten(DARK, 20%)
 
+    color: lighten(COLOR_contrast, 20%)
 
     &:active
 
-      color: lighten(DARK, 50%)
 
+      color: lighten(COLOR_contrast, 50%)
 
 
   &[data-control=menu]
 
-    COLOR = DARK
 
+    COLOR = COLOR_contrast
 
     background: COLOR
 
     box-shadow 0 2px 0 rgba(0,0,0,0.15)
 
     &.icons

+ 14 - 11
src/stylesheets/theme/theme.layout.styl
View File 

@@ -10,32 +10,35 @@
 
 @import "__init.styl"
 
 
 body > section
 
-  background-color: DARK
 
+  background-color: COLOR_contrast
 
   & > header
 
-    background-color: THEME
 
-    box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
 
+    C = COLOR_theme
 
+    background-color: COLOR_theme
 
+    box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 lighten(C, 20%), inset 0 -1px 0 darken(C, 20%)
 
     color: #fff
 
     border-radius (BORDER_radius * 2.5) (BORDER_radius * 2.5) 0 0
 
+    & > .title
 
+      font-weight: 700
 
 
   & > footer, & nav[data-control=groupbar]
 
-    background-color: DARK
 
-    // box-shadow inset 0 3px 0 DARK_dark
 
+    background-color: COLOR_contrast
 
+    // box-shadow inset 0 3px 0 COLOR_contrast_dark
 
   & > article, & > [data-control="pull"]
 
-    background-color: CONTENT
 
+    background-color: BACKGROUND
 
     &.splash
 
-      background: THEME
 
+      background: COLOR_theme
 
       color: #fff
 
   &.aside
 
     box-shadow -1px 0 2px rgba(0,0,0,0.2)
 
     &.right
 
       box-shadow 1px 0 2px rgba(0,0,0,0.2)
 
 
-DARKEST = darken(DARK_darkest, 15%)
 
+COLOR_contrastEST = darken(COLOR_contrast_darkest, 15%)
 
 body > aside
 
-  background-color: DARK_dark
 
+  background-color: COLOR_contrast_dark
 
   color: #fff
 
   & > header, > footer
 
-    background-color: DARK_darkest
 
+    background-color: COLOR_contrast_darkest
 
   & > header
 
-    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 DARK, inset 0 -1px 0 DARKEST
 
+    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 COLOR_contrast, inset 0 -1px 0 COLOR_contrastEST

+ 5 - 5
src/stylesheets/theme/theme.widget.button.styl
View File 

@@ -14,15 +14,15 @@
 
 header
 
   & .button, button
 
     color: #fff
 
-    background-color: THEME_dark
 
-    box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
 
+    background-color: darken(COLOR_theme, 15%)
 
+    box-shadow 0 1px 0 lighten(COLOR_theme, 15%), inset 0 1px 0 darken(COLOR_theme, 35%)
 
     &:active
 
-      background-color: darken(THEME, 40%)
 
+      background-color: darken(COLOR_theme, 40%)
 
 
 article
 
   & .button, button
 
     color: #fff !important
 
-    box-shadow inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.15)
 
+    box-shadow inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.15)
 
     // border: solid 1px rgba(0,0,0,0.1)
 
     &:active
 
       box-shadow inset 0 0 128px rgba(0,0,0,0.25)
 
@@ -35,7 +35,7 @@ article
 
 
   & button, .button, .tag:not(.icon)
 
     &
 
-      background-color: THEME_dark
 
+      background-color: darken(COLOR_theme, 15%)
 
     &.secondary
 
       background-color: COLOR_secondary
 
     &.accept

+ 15 - 18
src/stylesheets/theme/theme.widget.form.styl
View File 

@@ -16,7 +16,7 @@ form, .form
 
 
   & fieldset
 
     background: #fff
 
-    border-bottom: 1px solid CONTENT
 
+    border-bottom: 1px solid BACKGROUND
 
     & .icon
 
       color: #ccc
 
     &.radius-top
 
@@ -41,24 +41,21 @@ form, .form
 
       color: COLOR_success !important
 
       border-color: COLOR_success !important
 
     &:focus, &:active, &:hover
 
-      color: THEME_dark
 
-      border-color: THEME
 
-      &:after
 
-        background-color: THEME
 
+      color: COLOR_theme
 
+      border-color: COLOR_theme
 
     &[disabled]
 
       background: FORM_color
 
       border-color: FORM_color
 
       color: darken(FORM_color, 25%)
 
 
-  /* -------------------------- SELECT -------------------------- */
 
-  & fieldset .select
 
-    & > select
 
-      background-color: lighten(FORM_color, 75%) !important
 
 
-  & .select:after
 
-    background: FORM_color
 
-    color: #fff
 
-    border-radius: (FORM_border_radius / 2)
 
+  /* -------------------------- SELECT -------------------------- */
 
+  & select, label.select
 
+    &:after
 
+      color: FORM_color
 
+    &:focus, &:active, &:hover
 
+      &:after
 
+        color: COLOR_theme
 
 
   /* -------------------------- RANGE -------------------------- */
 
   & input[type=range]
 
@@ -66,10 +63,10 @@ form, .form
 
     color: darken(FORM_color, 25%)
 
     border-radius: (FORM_border_radius * 4)
 
     &:active
 
-      background-color: THEME_light !important
 
+      background-color: COLOR_theme !important
 
       color: #fff
 
       &::-webkit-slider-thumb
 
-        background-color: darken(THEME, 25%) !important
 
+        background-color: darken(COLOR_theme, 25%) !important
 
     &::-webkit-slider-thumb
 
       border-radius (FORM_border_radius * 4)
 
       background-color: darken(FORM_color, 25%)
 
@@ -78,7 +75,7 @@ form, .form
 
   & [data-progress]
 
     background-color: #ddd
 
     & .value
 
-      background-color: THEME_light
 
+      background-color: COLOR_theme
 
     &, & .value
 
       border-radius (FORM_border_radius * 3)
 
 
@@ -93,10 +90,10 @@ form, .form
 
       border-radius: (FORM_border_radius * 4)
 
       background: darken(FORM_color, 25%)
 
     &.checked
 
-      background-color: THEME_light
 
+      background-color: COLOR_theme
 
       color: #fff !important
 
       & label
 
-        background-color: darken(THEME, 25%)
 
+        background-color: darken(COLOR_theme, 25%)
 
 
     // Expand
 
     &.twitter

+ 3 - 2
src/stylesheets/theme/theme.widget.notification.styl
View File 

@@ -16,13 +16,14 @@
 
   &:not(.push)
 
     background-color: rgba(0,0,0,0.6)
 
   & .window
 
+    border-radius FORM_border_radius
 
     &.growl
 
       background: rgba(0,0,0,0.75)
 
     &:not(.growl)
 
       box-shadow(0 0 8px #444)
 
       & button, .button
 
         background: #fff
 
-        color: THEME_dark
 
+        color: COLOR_theme
 
     &.confirm, &.html
 
       background: #e6e6e6
 
       color: #222
 
@@ -37,7 +38,7 @@
 
         font-weight: 100
 
     &.html
 
       & .title
 
-        background: THEME
 
+        background: COLOR_theme
 
         color: #fff
 
     &.push
 
       background: rgba(0,0,0,0.65)