Начало Каталог Помощ
Вход
pwa
/
Lungo.js
огледало от https://github.com/tapquo/Lungo.js.git
2
0
Разклонения 0
Файлове Задачи 0 Уики
Преглед на файлове

Forms CSS3

soyjavi преди 13 години
родител
45560b5ad0
ревизия
44cc7aab66
променени са 5 файла, в които са добавени 277 реда и са изтрити 267 реда
Обединен изглед Покажи статистика за разликите
  1. 27 25
      examples/kitchen-sink/test.html
  2. 22 15
      src/stylesheets/Lungo.theme.default.less
  3. 136 143
      src/stylesheets/Lungo.widgets.form.less
  4. 34 36
      src/stylesheets/css/Lungo.theme.default.css
  5. 58 48
      src/stylesheets/css/Lungo.widgets.form.css

+ 27 - 25
examples/kitchen-sink/test.html
Целия файл 

@@ -49,7 +49,7 @@
 
 
 
 <body class="app">
 
 <body class="app">
 
     <section id="layout" data-transition="slide">
 
     <section id="layout" data-transition="slide">
 
-        <header data-title="Layout" class="extended">
 
+        <header data-title="Layout" class="-extended">
 
             <nav class="button">
 
             <nav class="button">
 
                 <a href="#back" data-router="section" data-label="back"></a>
 
                 <a href="#back" data-router="section" data-label="back"></a>
 
             </nav>
 
             </nav>
 
@@ -58,15 +58,17 @@
 
             </nav>
 
             </nav>
 
         </header>
 
         </header>
 
 
 
+        <!--
 
         <nav class="groupbar">
 
         <nav class="groupbar">
 
             <a href="#layout-art1" data-router="article" class="current" data-label="Profile"></a>
 
             <a href="#layout-art1" data-router="article" class="current" data-label="Profile"></a>
 
             <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="3"></a>
 
             <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="3"></a>
 
             <a href="#layout-art3" data-router="article" data-label="Map"></a>
 
             <a href="#layout-art3" data-router="article" data-label="Map"></a>
 
             <a href="#layout-art4" data-router="article" data-label="Settings"></a>
 
             <a href="#layout-art4" data-router="article" data-label="Settings"></a>
 
         </nav>
 
         </nav>
 
+        -->
 
 
 
         <footer>
 
         <footer>
 
-            <nav class="with-labels">
 
+            <nav >
 
                 <a href="#layout-art1" data-router="article" data-label="Home" class="current" data-icon="home"></a>
 
                 <a href="#layout-art1" data-router="article" data-label="Home" class="current" data-icon="home"></a>
 
                 <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="2"></a>
 
                 <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="2"></a>
 
                 <a href="#layout-art3" data-router="article" data-icon="user"></a>
 
                 <a href="#layout-art3" data-router="article" data-icon="user"></a>
 
@@ -74,44 +76,44 @@
 
             </nav>
 
             </nav>
 
         </footer>
 
         </footer>
 
 
 
-        <article id="layout-art1" class="padding">
 
+        <article id="layout-art1" class="padding scroll">
 
             <form>
 
             <form>
 
-                <label>text</label>
 
-                <input type="text"/>
 
-                <!--
 
-                <label>text.disabled</label>
 
-                <input type="text" disabled/>
 
-                <label>password</label>
 
-                <input type="password"/>
 
-
 
-                <label>textarea</label>
 
+                <div class="six columns">
 
+                    <label>Address</label>
 
+                    <input type="text" placeholder="placeholder"/>
 
+                </div>
 
+                <div class="three columns right">
 
+                    <label>Pin Code</label>
 
+                    <input type="password" value="value" disabled/>
 
+                </div>
 
                 <textarea></textarea>
 
                 <textarea></textarea>
 
-            -->
 
 
 
-
 
-                <label>Example of select</label>
 
+                <label>Select your skill</label>
 
                 <label class="select">
 
                 <label class="select">
 
                     <select class="custom">
 
                     <select class="custom">
 
-                        <option value="1">One</option>
 
+                        <option value="1">HTML5 Jedi</option>
 
                         <option value="2">Two</option>
 
                         <option value="2">Two</option>
 
                         <option value="3">Three</option>
 
                         <option value="3">Three</option>
 
                     </select>
 
                     </select>
 
                 </label>
 
                 </label>
 
 
 
 
 
-                <label>Example of progress</label>
 
+                <label>Progress of project</label>
 
                 <div id="progress-normal" data-progress="25%"></div>
 
                 <div id="progress-normal" data-progress="25%"></div>
 
 
 
-                <label>Example of range</label>
 
+                <label>Range 50%</label>
 
                 <input type="range" placeholder="type your name" />
 
                 <input type="range" placeholder="type your name" />
 
 
 
-                 <input type="range" min="0" max="1" class="checkbox left" value="0">
 
-                <input type="range" min="0" max="1" class="checkbox right active" value="1">
 
-
 
-                </form>
 
-                &nbsp;
 
-                <form>
 
-                <a href="#" class="button big theme" data-label="Boton Azul" data-icon="check"></a>
 
+                <div class="one row">
 
+                    <input type="range" min="0" max="1" class="checkbox left" value="0">
 
+                    <input type="range" min="0" max="1" class="checkbox right active" value="1">
 
+                </div>
 
+                    <div class="four columns left">
 
+                        <a href="#" class="button big theme" data-label="Accept" data-icon="check"></a>
 
+                    </div>
 
+                    <div class="four columns right">
 
+                        <a href="#" class="button big red" data-label="Cancel" data-icon="close"></a>
 
+                    </div>
 
             </form>
 
             </form>
 
         </article>
 
         </article>
 
         <article id="layout-art2"></article>
 
         <article id="layout-art2"></article>

+ 22 - 15
src/stylesheets/Lungo.theme.default.less
Целия файл 

@@ -21,6 +21,9 @@
 
     @footer-dark: #23282C;
 
     @footer-dark: #23282C;
 
 @color: #484a49;
 
 @color: #484a49;
 
 
 
+@form-border-radius: 2px;
 
+
 
+
 
 .app {
 
 .app {
 
     background: #000;
 
     background: #000;
 
     font-family: "Roboto", Helvetica, Arial, sans-serif;
 
     font-family: "Roboto", Helvetica, Arial, sans-serif;
 
@@ -200,8 +203,9 @@ aside .list {
 
 
 
 /* @group .button */
 
 /* @group .button */
 
 a.button {
 
 a.button {
 
-    .border-radius(2px);
 
-    .box-shadow(~"inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2)");
 
+    .border-radius(@form-border-radius);
 
+    .box-shadow(~"inset 1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255, 0.2)");
 
+
 
     font-weight: bold;
 
     font-weight: bold;
 
     text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
 
     text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
 
 
 
@@ -213,15 +217,16 @@ a.button {
 
 /* @group <form> */
 
 /* @group <form> */
 
 @box-shadow-form: ~'inset 0 1px 2px rgba(0,0,0,0.1)';
 
 @box-shadow-form: ~'inset 0 1px 2px rgba(0,0,0,0.1)';
 
 @box-shadow-form-active: ~'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef';
 
 @box-shadow-form-active: ~'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef';
 
-@form-border-radius: 1px;
 
+@form-border-color: #D0D4C6;
 
 label { color: #999; }
 
 label { color: #999; }
 
 
 
-input[type=text],  textarea, select {
 
-    border: 1px solid #ccc;
 
+input:not([type=range]), textarea, select {
 
+    border: 1px solid @form-border-color;
 
     .border-radius(@form-border-radius);
 
     .border-radius(@form-border-radius);
 
-    .box-shadow(@box-shadow-form);
 
+    // .box-shadow(@box-shadow-form);
 
     color: #858585;
 
     color: #858585;
 
     font-family: Helvetica, Arial, sans-serif;
 
     font-family: Helvetica, Arial, sans-serif;
 
+    background: #fff;
 
 
 
     &:focus {
 
     &:focus {
 
         color: #484a49;
 
         color: #484a49;
 
@@ -230,25 +235,23 @@ input[type=text],  textarea, select {
 
     }
 
     }
 
 
 
     &[disabled] {
 
     &[disabled] {
 
-        background: #f00;
 
+        background: #F4F5F0;
 
+        color: #bbb;
 
     }
 
     }
 
 }
 
 }
 
 
 
 .select:after {
 
 .select:after {
 
-    background: #ccc;
 
+    background: @form-border-color;
 
     color: white;
 
     color: white;
 
     border-top-right-radius: @form-border-radius;
 
     border-top-right-radius: @form-border-radius;
 
     border-bottom-right-radius: @form-border-radius;
 
     border-bottom-right-radius: @form-border-radius;
 
 }
 
 }
 
 
 
-
 
-
 
 /* @group range */
 
 /* @group range */
 
 input[type=range] {
 
 input[type=range] {
 
     .box-shadow(@box-shadow-form);
 
     .box-shadow(@box-shadow-form);
 
     .border-radius(@form-border-radius);
 
     .border-radius(@form-border-radius);
 
 
 
-
 
     &:not(.checkbox) {
 
     &:not(.checkbox) {
 
         background-color: #c7c7c7;
 
         background-color: #c7c7c7;
 
         &:active { background-color: @theme-light;  }
 
         &:active { background-color: @theme-light;  }
 
@@ -266,7 +269,7 @@ input[type=range] {
 
         background: #fff; }
 
         background: #fff; }
 
 
 
     &::-webkit-slider-thumb::after {
 
     &::-webkit-slider-thumb::after {
 
-        background: rgb(234,234,234); }
 
+        background: #ddd; }
 
 }
 
 }
 
 /* @end */
 
 /* @end */
 
 
 
@@ -305,17 +308,21 @@ input[type=range] {
 
 /* @group .bubble */
 
 /* @group .bubble */
 
 .bubble {
 
 .bubble {
 
     color: #fff;
 
     color: #fff;
 
-    .border-radius(2px);
 
+    .border-radius(8px);
 
 
 
-    &.count { .linear-gradient(top, ~','@theme-light 0%, ~','@theme-dark 100%);  }
 
+    &.count { background: @theme; }
 
 }
 
 }
 
+    header .count {
 
+        background: @footer !important;
 
+    }
 
+
 
     footer .bubble {
 
     footer .bubble {
 
         .box-shadow(~'inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)');  }
 
         .box-shadow(~'inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)');  }
 
 
 
-
 
     article .list .bubble {
 
     article .list .bubble {
 
         .box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
 
         .box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
 
     }
 
     }
 
+
 
     aside .list .bubble { background: rgba(0,0,0,0.25); }
 
     aside .list .bubble { background: rgba(0,0,0,0.25); }
 
 /* @end */
 
 /* @end */

+ 136 - 143
src/stylesheets/Lungo.widgets.form.less
Целия файл 

@@ -11,6 +11,7 @@
 
 
 
 @form-input-height: 30px;
 
 @form-input-height: 30px;
 
 @rounded-radius: 2px;
 
 @rounded-radius: 2px;
 
+@range_progress_height: 12px;
 
 
 
 
 
 form {
 
 form {
 
@@ -21,7 +22,7 @@ form {
 
     }
 
     }
 
 
 
     &.rounded {
 
     &.rounded {
 
-        & input:not([type=checkbox]), textarea, select {
 
+        & input:not([type=range]), textarea, select {
 
             width: 94%;
 
             width: 94%;
 
             padding: 1.0% 3% ;
 
             padding: 1.0% 3% ;
 
 
 
@@ -29,175 +30,167 @@ form {
 
             &:last-of-type  { .border-radius(0px 0px @rounded-radius @rounded-radius); }
 
             &:last-of-type  { .border-radius(0px 0px @rounded-radius @rounded-radius); }
 
         }
 
         }
 
     }
 
     }
 
-}
 
-
 
-label:not(.select) {
 
-    // font-size: 0.9em;
 
-}
 
-
 
-input[type=text], textarea, select {
 
-    display: block;
 
-    width: 96%;
 
-    padding: 0 2%;
 
-    height: @form-input-height;
 
-    font-size: 14px;
 
-    font-weight: bold;
 
-
 
-    -webkit-appearance: none;
 
-    -webkit-user-select: text;
 
-    -webkit-font-smoothing: antialiased;
 
-}
 
 
 
-textarea {
 
-    padding-top: 1.5%;
 
-    min-height: 48px; }
 
+    label:not(.select) {
 
+        font-size: 13px;
 
+        margin-bottom: 3px;
 
+        display: block; }
 
 
 
+    input, textarea, select, .progress {
 
+        margin-bottom: 8px; }
 
 
 
-/* @group search */
 
-input[type=search] {
 
-    width: 85%;
 
-    display: inline-block;
 
-
 
-    & + .button {
 
-        float: right;
 
-        padding: 0px;
 
-        width: 13%;
 
+    input:not([type=range]), textarea, select {
 
+        display: block;
 
+        width: 94%;
 
+        padding: 0 3%;
 
         height: @form-input-height;
 
         height: @form-input-height;
 
-        & .icon{
 
-            top: -3px;
 
-            float: none;
 
-        }
 
-    }
 
-}
 
-/* @end */
 
+        font-size: 15px;
 
+        line-height: 14px;
 
+        font-weight: bold;
 
 
 
-/* @group select */
 
-
 
-select {
 
-    width: 100%;
 
-    height: @form-input-height;
 
-}
 
-
 
-label.select {
 
-    position: relative;
 
-    display: inline-block;
 
-    width: 100%;
 
-}
 
+        -webkit-appearance: none;
 
+        -webkit-user-select: text;
 
+        -webkit-font-smoothing: antialiased;
 
+    }
 
 
 
-.select:after {
 
-    text-align: center;
 
-    position: absolute;
 
-    top: 0;
 
-    right: 0;
 
-    bottom: 0;
 
-    height: @form-input-height;
 
-    width: @form-input-height;
 
-
 
-    content: "▼";
 
-    pointer-events:none;
 
-    line-height: 31px;
 
-}
 
+    textarea {
 
+        padding-top: 1.5%;
 
+        min-height: 48px; }
 
 
 
-.no-pointer-events .select:after {
 
-    content: none;
 
-}
 
-/* @end */
 
-input[type=range] {
 
-    -webkit-appearance: none;
 
-    outline: none;
 
 
 
-    &:not(.checkbox) {
 
-        height: 12px;
 
-        width: 100%;
 
-        padding: 0px;
 
-        margin: 8px 0 12px 0;
 
-        border: 0;
 
-        cursor: ew-resize;
 
+    /* @group search */
 
+    input[type=search] {
 
+        width: 85%;
 
+        display: inline-block;
 
 
 
-        &::-webkit-slider-thumb {
 
-            top: -1px;
 
+        & + .button {
 
+            float: right;
 
+            padding: 0px;
 
+            width: 13%;
 
+            height: @form-input-height;
 
+            & .icon{
 
+                top: -3px;
 
+                float: none;
 
+            }
 
         }
 
         }
 
     }
 
     }
 
 
 
-    &.checkbox {
 
-        background: #aaaaaa;
 
-        width:70px;
 
-
 
-        height: 30px;
 
-        padding: 1px 2px;
 
-        font-family:'lungojsicon';
 
+    select {
 
+        width: 100%;
 
+        height: @form-input-height; }
 
 
 
-        &:after {
 
-            content: "\0055";
 
+        label.select {
 
             position: relative;
 
             position: relative;
 
-            float: right;
 
-            top: -23px;
 
-            padding: 0 8px;
 
-            font-size: 1.5em; }
 
-
 
-        &.active:after {
 
-            float: left;
 
-            content: "\0051";
 
-            font-weight: bold; }
 
+            display: inline-block;
 
+            width: 100%; }
 
+
 
+        .select:after {
 
+            text-align: center;
 
+            position: absolute;
 
+            top: 3px;
 
+            right: 0;
 
+            bottom: 0;
 
+            height: @form-input-height;
 
+            width: @form-input-height;
 
+
 
+            content: "▼";
 
+            pointer-events:none;
 
+            line-height: 33px; }
 
+
 
+        .no-pointer-events .select:after {
 
+            content: none;
 
     }
 
     }
 
 
 
-    &::-webkit-slider-thumb {
 
+    input[type=range] {
 
         -webkit-appearance: none;
 
         -webkit-appearance: none;
 
-        width: 30px;
 
-        height: 24px;
 
-        border-radius: 2px;
 
-        position:relative;
 
-        margin:2px 2px 2px 2px;
 
-        border: none; }
 
-
 
-    &::-webkit-slider-thumb::after {
 
-      width:13px;
 
-      height:13px;
 
-      display:block;
 
-      content:"";
 
-      position:relative;
 
-      border-radius:7.5px;
 
-      z-index:9;
 
-      top:5px;
 
-      left:9px; }
 
-}
 
+        outline: none;
 
 
 
+        &:not(.checkbox) {
 
+            height: @range_progress_height;
 
+            width: 100%;
 
+            padding: 0px;
 
+            margin-top: 2px;
 
+            border: 0;
 
+            cursor: ew-resize;
 
 
 
+            &::-webkit-slider-thumb { top: -1px; }
 
+        }
 
 
 
-/* @group range */
 
-/* @end */
 
+        &.checkbox {
 
+            width:70px;
 
+            height: 30px;
 
+            padding: 1px 2px;
 
+            font-family:'lungojsicon';
 
 
 
-/* @group progress */
 
-.progress {
 
-    width: 100%;
 
-    margin-bottom: 8px;
 
+            &:after {
 
+                content: "\0055";
 
+                position: relative;
 
+                float: right;
 
+                top: -23px;
 
+                padding: 0 8px;
 
+                font-size: 1.5em; }
 
+
 
+            &.active:after {
 
+                float: left;
 
+                content: "\0051";
 
+                font-weight: bold;
 
+                font-size: 1.6em; }
 
+        }
 
 
 
-    .labels {
 
-        font-size: 1.0em;
 
-        display: block;
 
-        & span:last-child { float: right; }
 
+        &::-webkit-slider-thumb {
 
+            -webkit-appearance: none;
 
+            width: 30px;
 
+            height: 24px;
 
+            border-radius: 2px;
 
+            position:relative;
 
+            margin:2px 2px 2px 2px;
 
+            border: none; }
 
+
 
+        &::-webkit-slider-thumb::after {
 
+          width:12px;
 
+          height:12px;
 
+          display:block;
 
+          content:"";
 
+          position:relative;
 
+          border-radius: 8px;
 
+          z-index:9;
 
+          top:6px;
 
+          left:9px; }
 
     }
 
     }
 
 
 
-    & .bar {
 
-        height:  12px;
 
-        line-height: 12px;
 
-        display: block;
 
+    .progress {
 
+        width: 100%;
 
+        margin-bottom: 8px;
 
 
 
-        & .value {
 
-            display:block;
 
-            height: inherit;
 
-            width: 0%;
 
-            -webkit-transition: width 500ms @defaultTrasition;
 
+        .labels {
 
+            font-size: 1.0em;
 
+            display: block;
 
+            & span:last-child { float: right; }
 
+        }
 
 
 
-            & .label {
 
-                float: right;
 
-                margin-right: 4px;
 
-                font-size: 0.75em; }
 
+        & .bar {
 
+            height: @range_progress_height;
 
+            line-height: @range_progress_height;
 
+            display: block;
 
+
 
+            & .value {
 
+                display:block;
 
+                height: inherit;
 
+                width: 0%;
 
+                .transition( width 500ms @defaultTrasition);
 
+
 
+                & .label {
 
+                    float: right;
 
+                    margin-right: 4px;
 
+                    font-size: 0.75em; }
 
+            }
 
         }
 
         }
 
     }
 
     }
 
-}
 
-/* @end */
 
 
 
-@media screen and (-webkit-min-device-pixel-ratio:0) {
 
-    .custom-select select {padding-right:30px;}
 
+    @media screen and (-webkit-min-device-pixel-ratio:0) {
 
+        .custom-select select {padding-right:30px;}
 
+    }
 
+
 
 }
 
 }
 
+
 
+

+ 34 - 36
src/stylesheets/css/Lungo.theme.default.css
Целия файл 

@@ -233,9 +233,9 @@ a.button {
 
   -webkit-background-clip: padding-box;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
   background-clip: padding-box;
 
-  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2);
 
-  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2);
 
-  box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2);
 
+  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255, 0.2);
 
+  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255, 0.2);
 
+  box-shadow: inset 1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255, 0.2);
 
   font-weight: bold;
 
   font-weight: bold;
 
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
 
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
 
 }
 
 }
 
@@ -249,23 +249,21 @@ a.button:active {
 
 label {
 
 label {
 
   color: #999;
 
   color: #999;
 
 }
 
 }
 
-input[type=text],
 
+input:not([type=range]),
 
 textarea,
 
 textarea,
 
 select {
 
 select {
 
-  border: 1px solid #ccc;
 
-  -webkit-border-radius: 1px;
 
-  -moz-border-radius: 1px;
 
-  border-radius: 1px;
 
+  border: 1px solid #d0d4c6;
 
+  -webkit-border-radius: 2px;
 
+  -moz-border-radius: 2px;
 
+  border-radius: 2px;
 
   -webkit-background-clip: padding-box;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
   background-clip: padding-box;
 
-  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
-  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
   color: #858585;
 
   color: #858585;
 
   font-family: Helvetica, Arial, sans-serif;
 
   font-family: Helvetica, Arial, sans-serif;
 
+  background: #fff;
 
 }
 
 }
 
-input[type=text]:focus,
 
+input:not([type=range]):focus,
 
 textarea:focus,
 
 textarea:focus,
 
 select:focus {
 
 select:focus {
 
   color: #484a49;
 
   color: #484a49;
 
@@ -274,25 +272,26 @@ select:focus {
 
   -moz-box-shadow: 0 0 1px #39abe1;
 
   -moz-box-shadow: 0 0 1px #39abe1;
 
   box-shadow: 0 0 1px #39abe1;
 
   box-shadow: 0 0 1px #39abe1;
 
 }
 
 }
 
-input[type=text][disabled],
 
+input:not([type=range])[disabled],
 
 textarea[disabled],
 
 textarea[disabled],
 
 select[disabled] {
 
 select[disabled] {
 
-  background: #f00;
 
+  background: #F4F5F0;
 
+  color: #bbb;
 
 }
 
 }
 
 .select:after {
 
 .select:after {
 
-  background: #ccc;
 
+  background: #d0d4c6;
 
   color: white;
 
   color: white;
 
-  border-top-right-radius: 1px;
 
-  border-bottom-right-radius: 1px;
 
+  border-top-right-radius: 2px;
 
+  border-bottom-right-radius: 2px;
 
 }
 
 }
 
 /* @group range */
 
 /* @group range */
 
 input[type=range] {
 
 input[type=range] {
 
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
-  -webkit-border-radius: 1px;
 
-  -moz-border-radius: 1px;
 
-  border-radius: 1px;
 
+  -webkit-border-radius: 2px;
 
+  -moz-border-radius: 2px;
 
+  border-radius: 2px;
 
   -webkit-background-clip: padding-box;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
   background-clip: padding-box;
 
@@ -311,12 +310,12 @@ input[type=range].checkbox.active {
 
   background-color: #39abe1;
 
   background-color: #39abe1;
 
 }
 
 }
 
 input[type=range]::-webkit-slider-thumb {
 
 input[type=range]::-webkit-slider-thumb {
 
-  border-radius: 1px;
 
+  border-radius: 2px;
 
   box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);
 
   box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);
 
   background: #fff;
 
   background: #fff;
 
 }
 
 }
 
 input[type=range]::-webkit-slider-thumb::after {
 
 input[type=range]::-webkit-slider-thumb::after {
 
-  background: #eaeaea;
 
+  background: #ddd;
 
 }
 
 }
 
 /* @end */
 
 /* @end */
 
 /* @group .progress */
 
 /* @group .progress */
 
@@ -331,18 +330,18 @@ input[type=range]::-webkit-slider-thumb::after {
 
   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
   background: #c7c7c7;
 
   background: #c7c7c7;
 
-  -webkit-border-radius: 1px;
 
-  -moz-border-radius: 1px;
 
-  border-radius: 1px;
 
+  -webkit-border-radius: 2px;
 
+  -moz-border-radius: 2px;
 
+  border-radius: 2px;
 
   -webkit-background-clip: padding-box;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
   background-clip: padding-box;
 
 }
 
 }
 
 .progress .bar .value {
 
 .progress .bar .value {
 
   background-color: #39abe1;
 
   background-color: #39abe1;
 
-  -webkit-border-radius: 1px;
 
-  -moz-border-radius: 1px;
 
-  border-radius: 1px;
 
+  -webkit-border-radius: 2px;
 
+  -moz-border-radius: 2px;
 
+  border-radius: 2px;
 
   -webkit-background-clip: padding-box;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
   background-clip: padding-box;
 
@@ -359,19 +358,18 @@ input[type=range]::-webkit-slider-thumb::after {
 
 /* @group .bubble */
 
 /* @group .bubble */
 
 .bubble {
 
 .bubble {
 
   color: #fff;
 
   color: #fff;
 
-  -webkit-border-radius: 2px;
 
-  -moz-border-radius: 2px;
 
-  border-radius: 2px;
 
+  -webkit-border-radius: 8px;
 
+  -moz-border-radius: 8px;
 
+  border-radius: 8px;
 
   -webkit-background-clip: padding-box;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
   background-clip: padding-box;
 
 }
 
 }
 
 .bubble.count {
 
 .bubble.count {
 
-  background-image: -webkit-linear-gradient(top , #39abe1 0% , #1984c2 100%);
 
-  background-image: -moz-linear-gradient(top , #39abe1 0% , #1984c2 100%);
 
-  background-image: -ms-linear-gradient(top , #39abe1 0% , #1984c2 100%);
 
-  background-image: -o-linear-gradient(top , #39abe1 0% , #1984c2 100%);
 
-  background-image: linear-gradient(top , #39abe1 0% , #1984c2 100%);
 
+  background: #2a95d3;
 
+}
 
+header .count {
 
+  background: #292f34 !important;
 
 }
 
 }
 
 footer .bubble {
 
 footer .bubble {
 
   -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
 
   -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);

+ 58 - 48
src/stylesheets/css/Lungo.widgets.form.css
Целия файл 

@@ -10,19 +10,21 @@
 
 /* COLORS */
 
 /* COLORS */
 
 form {
 
 form {
 
   margin: 3%;
 
   margin: 3%;
 
+  /* @group search */
 
+
 
 }
 
 }
 
 form.wrapper input:not([type=checkbox]),
 
 form.wrapper input:not([type=checkbox]),
 
 form textarea,
 
 form textarea,
 
 form select {
 
 form select {
 
   margin: 3px 0px 3px 0px;
 
   margin: 3px 0px 3px 0px;
 
 }
 
 }
 
-form.rounded input:not([type=checkbox]),
 
+form.rounded input:not([type=range]),
 
 form.rounded textarea,
 
 form.rounded textarea,
 
 form.rounded select {
 
 form.rounded select {
 
   width: 94%;
 
   width: 94%;
 
   padding: 1.0% 3% ;
 
   padding: 1.0% 3% ;
 
 }
 
 }
 
-form.rounded input:not([type=checkbox]):first-of-type,
 
+form.rounded input:not([type=range]):first-of-type,
 
 form.rounded textarea:first-of-type,
 
 form.rounded textarea:first-of-type,
 
 form.rounded select:first-of-type {
 
 form.rounded select:first-of-type {
 
   -webkit-border-radius: 2px 2px 0px 0px;
 
   -webkit-border-radius: 2px 2px 0px 0px;
 
@@ -32,7 +34,7 @@ form.rounded select:first-of-type {
 
   -moz-background-clip: padding;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
   background-clip: padding-box;
 
 }
 
 }
 
-form.rounded input:not([type=checkbox]):last-of-type,
 
+form.rounded input:not([type=range]):last-of-type,
 
 form.rounded textarea:last-of-type,
 
 form.rounded textarea:last-of-type,
 
 form.rounded select:last-of-type {
 
 form.rounded select:last-of-type {
 
   -webkit-border-radius: 0px 0px 2px 2px;
 
   -webkit-border-radius: 0px 0px 2px 2px;
 
@@ -42,88 +44,95 @@ form.rounded select:last-of-type {
 
   -moz-background-clip: padding;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
   background-clip: padding-box;
 
 }
 
 }
 
-input[type=text],
 
-textarea,
 
-select {
 
+form label:not(.select) {
 
+  font-size: 13px;
 
+  margin-bottom: 3px;
 
   display: block;
 
   display: block;
 
-  width: 96%;
 
-  padding: 0 2%;
 
+}
 
+form input,
 
+form textarea,
 
+form select,
 
+form .progress {
 
+  margin-bottom: 8px;
 
+}
 
+form input:not([type=range]),
 
+form textarea,
 
+form select {
 
+  display: block;
 
+  width: 94%;
 
+  padding: 0 3%;
 
   height: 30px;
 
   height: 30px;
 
-  font-size: 14px;
 
+  font-size: 15px;
 
+  line-height: 14px;
 
   font-weight: bold;
 
   font-weight: bold;
 
   -webkit-appearance: none;
 
   -webkit-appearance: none;
 
   -webkit-user-select: text;
 
   -webkit-user-select: text;
 
   -webkit-font-smoothing: antialiased;
 
   -webkit-font-smoothing: antialiased;
 
 }
 
 }
 
-textarea {
 
+form textarea {
 
   padding-top: 1.5%;
 
   padding-top: 1.5%;
 
   min-height: 48px;
 
   min-height: 48px;
 
 }
 
 }
 
-/* @group search */
 
-input[type=search] {
 
+form input[type=search] {
 
   width: 85%;
 
   width: 85%;
 
   display: inline-block;
 
   display: inline-block;
 
 }
 
 }
 
-input[type=search]  + .button {
 
+form input[type=search]  + .button {
 
   float: right;
 
   float: right;
 
   padding: 0px;
 
   padding: 0px;
 
   width: 13%;
 
   width: 13%;
 
   height: 30px;
 
   height: 30px;
 
 }
 
 }
 
-input[type=search]  + .button .icon {
 
+form input[type=search]  + .button .icon {
 
   top: -3px;
 
   top: -3px;
 
   float: none;
 
   float: none;
 
 }
 
 }
 
-/* @end */
 
-/* @group select */
 
-select {
 
+form select {
 
   width: 100%;
 
   width: 100%;
 
   height: 30px;
 
   height: 30px;
 
 }
 
 }
 
-label.select {
 
+form label.select {
 
   position: relative;
 
   position: relative;
 
   display: inline-block;
 
   display: inline-block;
 
   width: 100%;
 
   width: 100%;
 
 }
 
 }
 
-.select:after {
 
+form .select:after {
 
   text-align: center;
 
   text-align: center;
 
   position: absolute;
 
   position: absolute;
 
-  top: 0;
 
+  top: 3px;
 
   right: 0;
 
   right: 0;
 
   bottom: 0;
 
   bottom: 0;
 
   height: 30px;
 
   height: 30px;
 
   width: 30px;
 
   width: 30px;
 
   content: "▼";
 
   content: "▼";
 
   pointer-events: none;
 
   pointer-events: none;
 
-  line-height: 31px;
 
+  line-height: 33px;
 
 }
 
 }
 
-.no-pointer-events .select:after {
 
+form .no-pointer-events .select:after {
 
   content: none;
 
   content: none;
 
 }
 
 }
 
-/* @end */
 
-input[type=range] {
 
+form input[type=range] {
 
   -webkit-appearance: none;
 
   -webkit-appearance: none;
 
   outline: none;
 
   outline: none;
 
 }
 
 }
 
-input[type=range]:not(.checkbox) {
 
+form input[type=range]:not(.checkbox) {
 
   height: 12px;
 
   height: 12px;
 
   width: 100%;
 
   width: 100%;
 
   padding: 0px;
 
   padding: 0px;
 
-  margin: 8px 0 12px 0;
 
+  margin-top: 2px;
 
   border: 0;
 
   border: 0;
 
   cursor: ew-resize;
 
   cursor: ew-resize;
 
 }
 
 }
 
-input[type=range]:not(.checkbox)::-webkit-slider-thumb {
 
+form input[type=range]:not(.checkbox)::-webkit-slider-thumb {
 
   top: -1px;
 
   top: -1px;
 
 }
 
 }
 
-input[type=range].checkbox {
 
-  background: #aaaaaa;
 
+form input[type=range].checkbox {
 
   width: 70px;
 
   width: 70px;
 
   height: 30px;
 
   height: 30px;
 
   padding: 1px 2px;
 
   padding: 1px 2px;
 
   font-family: 'lungojsicon';
 
   font-family: 'lungojsicon';
 
 }
 
 }
 
-input[type=range].checkbox:after {
 
+form input[type=range].checkbox:after {
 
   content: "\0055";
 
   content: "\0055";
 
   position: relative;
 
   position: relative;
 
   float: right;
 
   float: right;
 
@@ -131,12 +140,13 @@ input[type=range].checkbox:after {
 
   padding: 0 8px;
 
   padding: 0 8px;
 
   font-size: 1.5em;
 
   font-size: 1.5em;
 
 }
 
 }
 
-input[type=range].checkbox.active:after {
 
+form input[type=range].checkbox.active:after {
 
   float: left;
 
   float: left;
 
   content: "\0051";
 
   content: "\0051";
 
   font-weight: bold;
 
   font-weight: bold;
 
+  font-size: 1.6em;
 
 }
 
 }
 
-input[type=range]::-webkit-slider-thumb {
 
+form input[type=range]::-webkit-slider-thumb {
 
   -webkit-appearance: none;
 
   -webkit-appearance: none;
 
   width: 30px;
 
   width: 30px;
 
   height: 24px;
 
   height: 24px;
 
@@ -145,50 +155,50 @@ input[type=range]::-webkit-slider-thumb {
 
   margin: 2px 2px 2px 2px;
 
   margin: 2px 2px 2px 2px;
 
   border: none;
 
   border: none;
 
 }
 
 }
 
-input[type=range]::-webkit-slider-thumb::after {
 
-  width: 13px;
 
-  height: 13px;
 
+form input[type=range]::-webkit-slider-thumb::after {
 
+  width: 12px;
 
+  height: 12px;
 
   display: block;
 
   display: block;
 
   content: "";
 
   content: "";
 
   position: relative;
 
   position: relative;
 
-  border-radius: 7.5px;
 
+  border-radius: 8px;
 
   z-index: 9;
 
   z-index: 9;
 
-  top: 5px;
 
+  top: 6px;
 
   left: 9px;
 
   left: 9px;
 
 }
 
 }
 
-/* @group range */
 
-/* @end */
 
-/* @group progress */
 
-.progress {
 
+form .progress {
 
   width: 100%;
 
   width: 100%;
 
   margin-bottom: 8px;
 
   margin-bottom: 8px;
 
 }
 
 }
 
-.progress .labels {
 
+form .progress .labels {
 
   font-size: 1.0em;
 
   font-size: 1.0em;
 
   display: block;
 
   display: block;
 
 }
 
 }
 
-.progress .labels span:last-child {
 
+form .progress .labels span:last-child {
 
   float: right;
 
   float: right;
 
 }
 
 }
 
-.progress .bar {
 
+form .progress .bar {
 
   height: 12px;
 
   height: 12px;
 
   line-height: 12px;
 
   line-height: 12px;
 
   display: block;
 
   display: block;
 
 }
 
 }
 
-.progress .bar .value {
 
+form .progress .bar .value {
 
   display: block;
 
   display: block;
 
   height: inherit;
 
   height: inherit;
 
   width: 0%;
 
   width: 0%;
 
   -webkit-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
 
   -webkit-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
 
+  -moz-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
 
+  -ms-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
 
+  -o-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
 
+  transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
 
 }
 
 }
 
-.progress .bar .value .label {
 
+form .progress .bar .value .label {
 
   float: right;
 
   float: right;
 
   margin-right: 4px;
 
   margin-right: 4px;
 
   font-size: 0.75em;
 
   font-size: 0.75em;
 
 }
 
 }
 
-/* @end */
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
 
-  .custom-select select {
 
+  form .custom-select select {
 
     padding-right: 30px;
 
     padding-right: 30px;
 
   }
 
   }
 
 }
 
 }