royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 39/49: remove primary from textfield and integrate in border when focus
Date Tue, 27 Mar 2018 08:32:34 GMT
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit d10aa7da2b025b6c9533a0a5f61546eedc306a14
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Sat Mar 24 10:48:29 2018 +0100

    remove primary from textfield and integrate in border when focus
---
 .../src/main/royale/TextInputPlayGround.mxml       |  2 +-
 .../royale/jewel/supportClasses/TextFieldBase.as   | 32 +--------
 .../JewelTheme/src/main/resources/defaults.css     | 79 +++++++++-------------
 .../src/main/sass/components/_textfield.sass       | 21 +++---
 4 files changed, 46 insertions(+), 88 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 6880431..e5a1021 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -34,7 +34,7 @@ limitations under the License.
 			<j:HorizontalLayoutWithPaddingAndGap gap="10"/>
 		</js:beads>
 		<j:TextButton text="Check it!" primary="true"/>
-		<j:TextField text="A TextField" primary="true"/>
+		<j:TextField text="A TextField"/>
 	</js:Group>
 
 	<js:Group>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
index 5977727..0a8399e 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
@@ -127,37 +127,7 @@ package org.apache.royale.jewel.supportClasses
 			//positioner.className = value;
             addStyles(positioner, value);
 		}
-
-        private var _primary:Boolean = false;
-
-        /**
-		 *  A boolean flag to activate "primary" effect selector.
-		 *  Applies primary color display effect.
-         *  Colors are defined in royale-jewel.css
-         *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.2
-		 */
-        public function get primary():Boolean
-        {
-            return _primary;
-        }
-
-        public function set primary(value:Boolean):void
-        {
-            if (_primary != value)
-            {
-                _primary = value;
-
-                COMPILE::JS
-                {
-                    toggleStyle(positioner, "primary", _primary);
-                }
-            }
-        }
-
+        
         private var _isInvalid:Boolean = false;
         /**
 		 *  A boolean flag to activate "is-invalid" effect selector.
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 8352a0f..92c4c04 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -21,7 +21,7 @@
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   font-family: "Lato", sans-serif;
-  color: #FFFFFF;
+  color: #808080;
 }
 
 .royale {
@@ -56,18 +56,18 @@ span {
   padding: 10px 16px;
   min-width: 74px;
   min-height: 34px;
-  border: 1px solid #404040;
-  background: linear-gradient(#737373, #595959);
-  box-shadow: inset 0 1px 0 #999999;
+  border: 1px solid #b3b3b3;
+  background: linear-gradient(#e6e6e6, #cccccc);
+  box-shadow: inset 0 1px 0 white;
   border-radius: 3px;
 }
 .jewel.button:hover {
-  border: 1px solid #333333;
-  background: linear-gradient(#666666, #4d4d4d);
+  border: 1px solid #a6a6a6;
+  background: linear-gradient(#d9d9d9, silver);
 }
 .jewel.button:active {
-  border: 1px solid #1a1a1a;
-  background: linear-gradient(#4d4d4d, #333333);
+  border: 1px solid #8d8d8d;
+  background: linear-gradient(silver, #a6a6a6);
   box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
 }
 .jewel.button:focus {
@@ -173,6 +173,11 @@ span {
   cursor: unset;
 }
 
+.jewel.checkbox {
+  position: absolute;
+  left: -9999px;
+  cursor: pointer;
+}
 .jewel.checkbox .span {
   padding-left: 5px;
 }
@@ -206,6 +211,7 @@ span {
   opacity: 0.7;
   -webkit-transition: 0.2s;
   transition: opacity 0.2s;
+  focus-outline: none;
 }
 .jewel.slider .slider:hover {
   opacity: 1;
@@ -213,17 +219,17 @@ span {
 .jewel.slider .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 25px;
-  height: 25px;
+  width: 15px;
+  height: 15px;
   border-radius: 50%;
-  background: #4CAF50;
+  background: #3CADF1;
   cursor: pointer;
 }
 .jewel.slider .slider::-moz-range-thumb {
-  width: 25px;
-  height: 25px;
+  width: 15px;
+  height: 15px;
   border-radius: 50%;
-  background: #4CAF50;
+  background: #3CADF1;
   cursor: pointer;
 }
 
@@ -234,25 +240,24 @@ span {
   padding: 10px 16px;
   min-width: 74px;
   min-height: 34px;
-  border: 1px solid #404040;
-  background: linear-gradient(#737373, #595959);
-  box-shadow: inset 0 1px 0 #999999;
+  border: 1px solid #b3b3b3;
+  background: linear-gradient(#e6e6e6, #cccccc);
+  box-shadow: inset 0 1px 0 white;
   border-radius: 3px;
   font-family: "Lato", sans-serif;
   font-size: 14px;
   font-weight: bold;
-  color: #FFFFFF;
+  color: #808080;
   text-transform: uppercase;
   text-decoration: none;
-  shadow: 0 1px 0 #d9d9d9;
 }
 .jewel.textbutton:hover {
-  border: 1px solid #333333;
-  background: linear-gradient(#666666, #4d4d4d);
+  border: 1px solid #a6a6a6;
+  background: linear-gradient(#d9d9d9, silver);
 }
 .jewel.textbutton:active {
-  border: 1px solid #1a1a1a;
-  background: linear-gradient(#4d4d4d, #333333);
+  border: 1px solid #8d8d8d;
+  background: linear-gradient(silver, #a6a6a6);
   box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
 }
 .jewel.textbutton:focus {
@@ -407,34 +412,14 @@ span {
   font-family: "Lato", sans-serif;
   font-size: 14px;
   font-weight: normal;
-  color: #FFFFFF;
-  background: linear-gradient(#8c8c8c, gray);
-  border: 1px solid #404040;
+  color: #808080;
+  background: linear-gradient(white, #f3f3f3);
+  border: 1px solid #b3b3b3;
   border-radius: 3px;
   box-shadow: none;
 }
-
-.jewel.textfield.primary {
-  position: relative;
-  display: inline-flex;
-}
-.jewel.textfield.primary .input {
-  margin: 0;
-  padding: 0.67em 1em;
-  max-width: 100%;
-  flex: 1 0 auto;
-  outline: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  text-align: left;
-  line-height: 1.4em;
-  font-family: "Lato", sans-serif;
-  font-size: 14px;
-  font-weight: normal;
-  color: #FFFFFF;
-  background: linear-gradient(#8c8c8c, gray);
+.jewel.textfield .input:focus {
   border: 1px solid #0f88d1;
-  border-radius: 3px;
-  box-shadow: none;
 }
 
 /*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 15c2744..6e38184 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -28,7 +28,7 @@ $textfield-min-width: 74px !default
 
 $textfield-border-radius: 3px
 
-=textfield-theme($textfield-color, $textfield-text-color)
+=textfield-theme($textfield-text-color)
 	position: relative
 	display: inline-flex
 	
@@ -52,24 +52,27 @@ $textfield-border-radius: 3px
 		color: $textfield-text-color
 
 		background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
-		border: 1px solid darken($textfield-color, 15%)
+		border: 1px solid darken($default-color, 15%)
 		border-radius: $textfield-border-radius
 		//transition: transition
 
 		box-shadow: none
 
+		&:focus
+			border: 1px solid darken($primary-color, 15%)
+		
 		//:hover 
 		//    padding: 5px;
 		//    background-color: #DFDFDF;
 
 .jewel.textfield
 	@if $dark
-		+textfield-theme($default-color, $font-dark-color)
+		+textfield-theme($font-dark-color)
 	@else
-		+textfield-theme($default-color, $font-light-color)
+		+textfield-theme($font-light-color)
 
-.jewel.textfield.primary
-	@if $dark
-		+textfield-theme($primary-color, $font-dark-color)
-	@else
-		+textfield-theme($primary-color, $font-light-color)
+// .jewel.textfield.primary
+// 	@if $dark
+// 		+textfield-theme($primary-color, $font-dark-color)
+// 	@else
+// 		+textfield-theme($primary-color, $font-light-color)

-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.

Mime
View raw message