Startseite Erkunden Hilfe
Anmelden
pwa
/
Lungo.js
Mirror von https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

Changes on stylesheets

Javi Jimenez Villar vor 13 Jahren
Ursprung
0102439f6a
Commit
4b9bbce2bf
8 geänderte Dateien mit 111 neuen und 84 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 26 6
      example/test.html
  2. 1 0
      src/stylesheets/__init.styl
  3. 52 54
      src/stylesheets/lungo.widget.form.styl
  4. 12 11
      src/stylesheets/theme/__init.styl
  5. 6 6
      src/stylesheets/theme/theme.layout.nav.styl
  6. 1 1
      src/stylesheets/theme/theme.layout.styl
  7. 3 3
      src/stylesheets/theme/theme.widget.button.styl
  8. 10 3
      src/stylesheets/theme/theme.widget.form.styl

+ 26 - 6
example/test.html
Datei anzeigen 

@@ -23,7 +23,13 @@
 
 <body class="app">
 
 
 <section id="form" data-transition="slide">
 
-    <header data-title="Form Elements" data-back="home"></header>
 
+    <header data-title="Form Elements" data-back="home">
 
+
 
+        <nav class="right">
 
+            <button data-label="test"></button>
 
+            <button data-icon="edit"></button>
 
+        </nav>
 
+    </header>
 
 
     <nav data-control="groupbar">
 
         <a href="#" data-view-article="form-normal" data-label="Normal" class="active"></a>
 
@@ -57,6 +63,8 @@
 
                 <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
 
             </fieldset>
 
 
+
 
+            </fieldset>
 
             <!-- INPUT -->
 
             <fieldset>
 
                 <input type="text" id="description" class="text align_center" placeholder="value"/>
 
@@ -78,6 +86,11 @@
 
                 <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
 
             </fieldset>
 
 
+            <fieldset>
 
+                <label class="anchor">label Lorem ipsum dolor sit amet</label>
 
+                 <div data-control-checkbox="check" class="inline right"></div>
 
+             </fieldset>
 
+
 
             <fieldset data-icon="plus">
 
                 <label>label</label>
 
                 <input type="text" value="value" />
 
@@ -130,6 +143,13 @@
 
                 </label>
 
             </fieldset>
 
 
+
 
+            <fieldset>
 
+                <label class="anchor">label Lorem ipsum dolor sit amet</label>
 
+                <div data-control-checkbox="check_indent" class="inline right"></div>
 
+             </fieldset>
 
+
 
+
 
             <fieldset class="radius-bottom shadow">
 
                 <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
 
             </fieldset>
 
@@ -197,11 +217,11 @@
 
             </div>
 
             <br/>
 
 
-            <button class="anchor margin-bottom" data-label="Return to normal Elements"></button>
 
-            <button class="anchor accept margin-bottom" data-label="Return to normal Elements"></button>
 
-            <button class="anchor cancel margin-bottom" data-label="Return to normal Elements"></button>
 
-            <button class="anchor secondary margin-bottom" data-label="Return to normal Elements"></button>
 
-            <button class="anchor disabled" data-label="Return to normal Elements"></button>
 
+            <button class="anchor margin-bottom" data-label="Normal"></button>
 
+            <button class="anchor accept margin-bottom" data-icon="ok" data-label="Accept"></button>
 
+            <button class="anchor cancel margin-bottom" data-icon="remove" data-label="Cancel"></button>
 
+            <button class="anchor secondary margin-bottom" data-icon="plus" data-label="Secondary"></button>
 
+            <button class="anchor disabled" data-label="Disabled"></button>
 
         </div>
 
     </article>
 
 </section>

+ 1 - 0
src/stylesheets/__init.styl
Datei anzeigen 

@@ -12,6 +12,7 @@ TRANSITION_TIME        = 400ms
 
 
 FONT_SIZE_TINY         = 11px
 
 FONT_SIZE_SMALL        = 0.9em
 
+FONT_size_normal       = 1.0em
 
 FONT_SIZE_BIG          = 1.2em
 
 FONT_SIZE_LARGE        = 1.4em

+ 52 - 54
src/stylesheets/lungo.widget.form.styl
Datei anzeigen 

@@ -16,7 +16,7 @@ form, .form
 
     line-height: FORM_HEIGHT
 
     text-indent: 8px
 
 
-  & input:not([type="checkbox"]), textarea, select, .progress, label.select
 
+  & input:not([type="checkbox"]), textarea, select, .progress, label.select, [data-control-progress], [data-control-checkbox]
 
     margin-bottom: 8px
 
     font-size: FONT_SIZE_BIG
 
     &.large
 
@@ -32,7 +32,7 @@ form, .form
 
     -webkit-appearance: none
 
     -webkit-user-select: text
 
     -webkit-font-smoothing: antialiased
 
-    border: none
 
+    border: 0px
 
     &:focus
 
       outline: none !important
 
     &.border
 
@@ -44,14 +44,16 @@ form, .form
 
   & fieldset
 
     padding: 8px 8px 0 8px
 
     position: relative
 
-    & label:not(.select)
 
+    & > label:not(.select)
 
       float: left
 
       width: 20%
 
-      text-indent: 0px
 
       &.absolute
 
         position: absolute
 
+      &.anchor
 
+        width: auto
 
+        overflow: hidden
 
 
-    & label:not(.absolute) + input, label:not(.absolute) + label.select
 
+    & > label:not(.absolute) + input, & > label:not(.absolute) + label.select
 
       width: 80% !important
 
 
     & .icon
 
@@ -67,9 +69,9 @@ form, .form
 
         background: none
 
 
   .indented & fieldset
 
-    & label:not(.select)
 
+    & > label:not(.select):not(.anchor)
 
       width: 25% !important
 
-    & label:not(.absolute) + input, label:not(.absolute) + label.select
 
+    & > label:not(.absolute) + input, & > label:not(.absolute) + label.select
 
       width: 75% !important
 
 
   & label.select
 
@@ -100,6 +102,7 @@ form, .form
 
       text-align: center
 
       line-height: FORM_HEIGHT
 
 
+  /* -------------------------- RANGE -------------------------- */
 
   & input[type=range]
 
     -webkit-appearance: none
 
     outline: none
 
@@ -129,53 +132,48 @@ form, .form
 
         width: 0%
 
         transition(width TRANSITION_TIME DEFAULT_TRANSITION)
 
 
-@media screen and (-webkit-min-device-pixel-ratio:0)
 
-  .custom-select
 
-    select
 
-      padding-right:30px
 
-
 
-
 
-/* -------------------------- CHECKBOX -------------------------- */
 
-[data-control-checkbox]
 
-  HEIGHT = (FORM_HEIGHT * 1.1)
 
-  width: 76px
 
-  height: HEIGHT
 
-  margin: 20px auto
 
-  position: relative
 
-  line-height: HEIGHT !important
 
-  &, & label
 
-    transition all 200ms ease
 
-
 
-  input[type=checkbox]
 
-    visibility: hidden
 
-
 
-  &:after, &:before
 
-    z-index: 0
 
-    position: absolute
 
-  &:before
 
-    content: "ON"
 
-    left: (HEIGHT / 2.2)
 
-    opacity: 0
 
-  &:after
 
-    content: "OFF"
 
-    right: (HEIGHT / 2.2)
 
-  &.checked
 
+
 
+  /* -------------------------- CHECKBOX -------------------------- */
 
+  & [data-control-checkbox]
 
+    HEIGHT = FORM_HEIGHT
 
+    width: 76px
 
+    height: HEIGHT
 
+    position: relative
 
+    line-height: HEIGHT !important
 
+    font-size: FONT_size_normal
 
+    &, & label
 
+      transition all 200ms ease
 
+
 
+    input[type=checkbox]
 
+      visibility: hidden
 
+
 
+    &:after, &:before
 
+      z-index: 0
 
+      position: absolute
 
     &:before
 
-      opacity: 1
 
-      z-index: 1
 
-    &:after
 
+      content: "ON"
 
+      left: (HEIGHT / 2.2)
 
       opacity: 0
 
-      z-index: 0
 
+    &:after
 
+      content: "OFF"
 
+      right: (HEIGHT / 2.2)
 
+    &.checked
 
+      &:before
 
+        opacity: 1
 
+        z-index: 1
 
+      &:after
 
+        opacity: 0
 
+        z-index: 0
 
 
-  & label
 
-    display: block
 
-    height: S = (HEIGHT - 6)
 
-    width: S
 
-    cursor: pointer
 
-    position: absolute
 
-    top: 3px
 
-    left: 3px
 
-    z-index: 1
 
-
 
-  & input[type=checkbox]:checked + label
 
-    left: 46px
 
+    & label
 
+      display: block
 
+      height: S = (HEIGHT - 6)
 
+      width: S
 
+      cursor: pointer
 
+      position: absolute
 
+      top: 3px
 
+      left: 3px
 
+      z-index: 1
 
+
 
+    & input[type=checkbox]:checked + label
 
+      left: 49px

+ 12 - 11
src/stylesheets/theme/__init.styl
Datei anzeigen 

@@ -1,13 +1,17 @@
 
 @import "../CSSmethods/vendor.styl"
 
 
-/* -------------------------- THEME -------------------------- */
 
+/* -------------------------- COLOUR -------------------------- */
 
 CONTENT         = #f5f5f5
 
 COLOR           = #333
 
 COLOR_secondary = #95a5a6
 
 COLOR_cancel    = #e74c3c
 
 COLOR_success   = #2ecc71
 
 
+THEME           = #0093D5
 
+THEME_light     = lighten(THEME, 15%)
 
+THEME_dark      = darken(THEME, 15%)
 
 
+/* ------------------------- COLOUR ------------------------- */
 
 DARK            = #222
 
 DARK_light      = lighten(DARK, 25%)
 
 DARK_dark       = darken(DARK, 15%)
 
@@ -15,19 +19,16 @@ DARK_darkest    = darken(DARK, 30%)
 
 LIST_color      = lighten(COLOR, 5%)
 
 LIST_color_2nd  = lighten(COLOR, 35%)
 
 LIST_border     = lighten(COLOR, 90%)
 
-NAV_LINK        = #888
 
+NAV_LINK        = lighten(DARK, 25%)
 
 NAV_LINK_ACTIVE = #FFF
 
-THEME           = #0093D5
 
-THEME_light     = lighten(THEME, 15%)
 
-THEME_dark      = darken(THEME, 15%)
 
 
+/* ------------------------- TRANSITION ------------------------- */
 
+TRANSITION_time        = 400ms
 
+TRANSITION_easing      = ease
 
 
+/* ------------------------- RADIUS ------------------------- */
 
 BORDER_radius   = 2px
 
-
 
 /* -------------------------- FORM -------------------------- */
 
-FORM_color      = darken(#e5e5e5, 5%)
 
-// FORM_color = #dce4ec
 
-
 
-
 
+FORM_color         = darken(#e5e5e5, 5%)
 
 FORM_border        = 2px
 
-FORM_border_radius = 4px
 
+FORM_border_radius = (BORDER_radius * FORM_border)

+ 6 - 6
src/stylesheets/theme/theme.layout.nav.styl
Datei anzeigen 

@@ -17,20 +17,20 @@ nav
 
       &:active
 
         color: darken(THEME, 50%)
 
 
-  section > &[data-control=groupbar] > a.active
 
-    box-shadow inset 0 -3px 0 THEME
 
-
 
   section > footer > & > a, &[data-control=groupbar] > a
 
     color: NAV_LINK
 
     &.active
 
       color: NAV_LINK_ACTIVE
 
 
+  section > &[data-control=groupbar] > a.active
 
+    transition box-shadow TRANSITION_time TRANSITION_easing
 
+    box-shadow inset 0 -4px 0 THEME
 
+
 
   section > footer > & > a
 
-    box-shadow 1px 0 0 DARK_dark
 
+    box-shadow inset 0 1px 0 #000, inset 0 2px 0 lighten(DARK, 20%)
 
     &.active
 
-      color:  NAV_LINK_ACTIVE
 
+      box-shadow inset 0 0 16px #000
 
       background-color: DARK_dark
 
-      box-shadow inset 0 3px 0 THEME
 
 
   aside & a
 
     color: lighten(DARK, 20%)

+ 1 - 1
src/stylesheets/theme/theme.layout.styl
Datei anzeigen 

@@ -19,7 +19,7 @@ body > section
 
 
   & > footer, & nav[data-control=groupbar]
 
     background-color: DARK
 
-    box-shadow inset 0 3px 0 DARK_dark
 
+    // box-shadow inset 0 3px 0 DARK_dark
 
   & > article, & > [data-control="pull"]
 
     background-color: CONTENT
 
     &.splash

+ 3 - 3
src/stylesheets/theme/theme.widget.button.styl
Datei anzeigen 

@@ -8,27 +8,27 @@
 
  */
 
 
 @import "__init.styl"
 
+.button, button
 
+  border-radius (BORDER_radius * 2)
 
 
 header
 
   & .button, button
 
     color: #fff
 
     background-color: THEME_dark
 
     box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
 
-    border-radius (BORDER_radius * 2)
 
     &:active
 
       background-color: darken(THEME, 40%)
 
 
 article
 
   & .button, button
 
     color: #fff !important
 
-    border-radius (BORDER_radius * 2)
 
     box-shadow inset 0 1px 0 rgba(255,255,255,0.25), 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)
 
       border-color: none
 
     &, abbr
 
-      font-weight: 400
 
+      font-weight: 600
 
     & .icon
 
       opacity: 0.65
 
       text-shadow: 0 -1px 0 rgba(0,0,0,0.25)

+ 10 - 3
src/stylesheets/theme/theme.widget.form.styl
Datei anzeigen 

@@ -50,10 +50,17 @@ form, .form
 
       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)
 
 
+  /* -------------------------- RANGE -------------------------- */
 
   & input[type=range]
 
     background-color: FORM_color
 
     color: darken(FORM_color, 25%)
 
@@ -67,6 +74,7 @@ form, .form
 
       border-radius (FORM_border_radius * 4)
 
       background-color: darken(FORM_color, 25%)
 
 
+  /* -------------------------- PROGRESS -------------------------- */
 
   & [data-progress]
 
     background-color: #ddd
 
     & .value
 
@@ -74,17 +82,16 @@ form, .form
 
     &, & .value
 
       border-radius (FORM_border_radius * 3)
 
 
+  /* -------------------------- CHECKBOX -------------------------- */
 
   & [data-control-checkbox]
 
     background: FORM_color
 
     color: darken(FORM_color, 25%)
 
     font-weight: 700
 
     border-radius: (FORM_border_radius * 4)
 
-    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.25), 0px 1px 0px rgba(255,255,255,0.25)
 
-
 
+    // box-shadow: inset 0px 1px 2px rgba(0,0,0,0.25), 0px 1px 0px rgba(255,255,255,0.25)
 
     & label
 
       border-radius: (FORM_border_radius * 4)
 
       background: darken(FORM_color, 25%)
 
-
 
     &.checked
 
       background-color: THEME_light
 
       color: #fff !important