Просмотр исходного кода

New stylesheet for .progress element

@soyjavi 14 лет назад
Родитель
Сommit
3ec8521196

+ 24 - 8
src/stylesheets/less/Lungo.theme.default.less

@@ -265,12 +265,16 @@ section.aside {
 /* @end */
 /* @end */
 
 
 /* @group <inputs> */
 /* @group <inputs> */
+@box-shadow-form: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+@box-shadow-form-big: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+
+
 input, textarea, select {
 input, textarea, select {
 	border: 1px solid #e1e1e1;
 	border: 1px solid #e1e1e1;
 	.border-radius(@border-radius);
 	.border-radius(@border-radius);
 	color: #858585;
 	color: #858585;
 	font-family: 'Roboto', Helvetica, Arial, sans-serif;
 	font-family: 'Roboto', Helvetica, Arial, sans-serif;
-	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+	box-shadow: @box-shadow-form;
 	
 	
 	&.underline {
 	&.underline {
 		border:  none;
 		border:  none;
@@ -297,11 +301,11 @@ label {
 	border-bottom-right-radius: @border-radius;
 	border-bottom-right-radius: @border-radius;
 }
 }
 
 
+/* @group .range */
 input[type="checkbox"] + span, input[type="radio"] + span {
 input[type="checkbox"] + span, input[type="radio"] + span {
 	color: #fff;
 	color: #fff;
 	background: #a0a0a0;	
 	background: #a0a0a0;	
-	
-		.border-radius(@border-radius);
+	.border-radius(@border-radius);
 }
 }
 	input[type="checkbox"] + span::before,
 	input[type="checkbox"] + span::before,
 	input[type="radio"] + span::before {
 	input[type="radio"] + span::before {
@@ -311,16 +315,19 @@ input[type="checkbox"] + span, input[type="radio"] + span {
 
 
 	input[type="checkbox"]:checked + span,
 	input[type="checkbox"]:checked + span,
 	input[type="radio"]:checked + span {
 	input[type="radio"]:checked + span {
-		background: @background-main;
-		
+		background: @background-main;		
 		.border-radius(@border-radius);
 		.border-radius(@border-radius);
 	}
 	}
+/* @end */
+
+
 
 
 /* @group range */
 /* @group range */
 input[type="range"] {
 input[type="range"] {
 	background-color: #c7c7c7;
 	background-color: #c7c7c7;
 	.border-radius(@border-radius);
 	.border-radius(@border-radius);
-	box-shadow: inset 0 2px 6px #666;
+	box-shadow: @box-shadow-form-big;
+	
 
 
 	&:active { 
 	&:active { 
 		box-shadow: none;
 		box-shadow: none;
@@ -348,12 +355,21 @@ input[type="range"] {
 
 
     & .bar {
     & .bar {
 		background: #c7c7c7;
 		background: #c7c7c7;
-		box-shadow: inset 0 2px 6px #666;
+		box-shadow: @box-shadow-form-big;
 		.border-radius(@border-radius);
 		.border-radius(@border-radius);
 
 
     	& .value {
     	& .value {
 			background: @background-main;
 			background: @background-main;
-						.border-radius(@border-radius);
+			.border-radius(@border-radius);
+			
+			& .label {
+				float: right;
+				margin-right: 3px;
+				font-weight: bold;
+				color: rgba(0,0,0,0.6);
+				text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
+				font-size: 12px;
+			}
 		}
 		}
 	}
 	}
 }
 }

+ 7 - 9
src/stylesheets/less/Lungo.widgets.form.less

@@ -7,31 +7,27 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
  */
 
 
-@import "mixins.less";
 @import "constants.less";
 @import "constants.less";
+@import "mixins.less";
 
 
-form, .form {
-
-}
+form, .form { }
 
 
 label {
 label {
 	font-size: 0.8em;
 	font-size: 0.8em;
-    //line-height: 27px;
 }
 }
 
 
 input:not([type=checkbox]), textarea, select {
 input:not([type=checkbox]), textarea, select {
 	display: inline-block;
 	display: inline-block;
 	padding: 5px 0 5px 5px;
 	padding: 5px 0 5px 5px;
 	width: 97%;
 	width: 97%;
-	//margin-bottom: 2px;
 
 
 	outline: none;
 	outline: none;
-	-webkit-appearance: none;
-	border-radius: 0px;
+	
 	font-size:  15px;
 	font-size:  15px;
 	line-height: 15px;
 	line-height: 15px;
 	font-weight: bold;
 	font-weight: bold;
-
+	
+	-webkit-appearance: none;
 	-webkit-user-select: text;
 	-webkit-user-select: text;
 }
 }
 
 
@@ -224,6 +220,7 @@ input[type="range"] {
 
 
     & .bar {
     & .bar {
 		height:  15px;
 		height:  15px;
+		line-height: 16px;
 		display: block;
 		display: block;
 
 
     	& .value {
     	& .value {
@@ -237,6 +234,7 @@ input[type="range"] {
 
 
 .big .progress .bar {
 .big .progress .bar {
 	height:  29px;
 	height:  29px;
+	line-height: 30px;
 }
 }
 /* @end */
 /* @end */
 
 

+ 1 - 1
src/view/Lungo.View.Element.js

@@ -14,7 +14,7 @@ LUNGO.View.Element = (function(lng, undefined) {
     var SELECTORS = {
     var SELECTORS = {
         BUBBLE: '.bubble.count',
         BUBBLE: '.bubble.count',
         PROGRESS_VALUE: ' .value',
         PROGRESS_VALUE: ' .value',
-        PROGRESS_PERCENTAGE: ' .labels span:last-child',
+        PROGRESS_PERCENTAGE: ' .value .label',
         PROGRESS_DESCRIPTION: ' .labels span:first-child'
         PROGRESS_DESCRIPTION: ' .labels span:first-child'
     };
     };