You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/27 08:32:23 UTC
[royale-asjs] 28/49: 12 Color Palette Plan Almost done and working
for Button, but only one project theme for now
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 38be443c5ff9c9d9799bf6679efe44feffa63d9d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 00:32:23 2018 +0100
12 Color Palette Plan Almost done and working for Button, but only one project theme for now
---
examples/royale/JewelExample/pom.xml | 4 +-
.../src/main/royale/ButtonPlayGround.mxml | 6 +-
.../JewelTheme/src/main/resources/defaults.css | 276 ++++++++++++++-------
.../src/main/sass/_default-color-palette.sass | 32 ++-
.../themes/JewelTheme/src/main/sass/_mixins.sass | 19 +-
.../JewelTheme/src/main/sass/_variables.sass | 10 +-
.../src/main/sass/components/_button.sass | 42 ++--
.../src/main/sass/components/_textbutton.sass | 68 +++--
.../src/main/sass/components/_textfield.sass | 9 +-
9 files changed, 295 insertions(+), 171 deletions(-)
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index 5427bc4..b2b08f8 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -120,13 +120,13 @@
<scope>theme</scope>
<classifier>js</classifier>
</dependency>
- <dependency>
+ <!-- <dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>JewelBlueTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<scope>theme</scope>
- </dependency>
+ </dependency> -->
</dependencies>
</project>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index f89ecaa..51b95e5 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -53,10 +53,10 @@ limitations under the License.
</j:beads>
</j:TextButton>
<j:Label text="Jewel Button Sizing (respect min values)"/>
- <j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
+ <j:Slider id="slider" width="250" value="120" minimum="100" maximum="500"
valueChange="onValueChange(event)"/>
- <j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
+ <j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300"
valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Button" width="100" height="40" primary="true"/>
+ <j:TextButton id="button" text="Button" width="120" height="40" primary="true"/>
</js:Group>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index cc10a23..6e720c5 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -27,10 +27,7 @@
margin: 10px;
}
-/**
- * Jewel Button
- */
-.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
+.jewel.button {
cursor: pointer;
display: inline-block;
margin: 0;
@@ -38,194 +35,299 @@
min-width: 74px;
min-height: 34px;
/* Background: */
- border: none;
border-radius: 3px;
-}
-
-.jewel.button {
- background-color: rgba(0, 0, 0, 0.3);
- transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.4);
+ border: 1px solid #b3b3b3;
+ background: linear-gradient(#e6e6e6, #cccccc);
+ box-shadow: inset 0 1px 0 white;
}
.jewel.button:hover {
- background-color: rgba(15, 15, 15, 0.3);
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
}
.jewel.button:active {
- background-color: rgba(0, 0, 0, 0.3);
+ border: 1px solid #8d8d8d;
+ background: linear-gradient(silver, #a6a6a6);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.button:focus {
outline: 0;
}
.jewel.button[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
cursor: unset;
}
.jewel.button.primary {
- background-color: #dedede;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #0f88d1;
+ background: linear-gradient(#54b7f3, #24a3ef);
+ box-shadow: inset 0 1px 0 #9bd5f8;
}
.jewel.button.primary:hover {
- background-color: #ededed;
+ border: 1px solid #0d79ba;
+ background: linear-gradient(#3CADF1, #1198e9);
}
.jewel.button.primary:active {
- background-color: #cfcfcf;
+ border: 1px solid #0a5a8a;
+ background: linear-gradient(#1198e9, #0d79ba);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.button.primary:focus {
outline: 0;
}
.jewel.button.primary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
cursor: unset;
}
.jewel.button.secondary {
- background-color: #011833;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #be390e;
+ background: linear-gradient(#f16c42, #ed4812);
+ box-shadow: inset 0 1px 0 #f6a389;
}
.jewel.button.secondary:hover {
- background-color: #022651;
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
}
.jewel.button.secondary:active {
- background-color: #000a15;
+ border: 1px solid #772409;
+ background: linear-gradient(#d64010, #a6320d);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.button.secondary:focus {
outline: 0;
}
.jewel.button.secondary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
cursor: unset;
}
.jewel.button.emphasized {
- background-color: #1FD348;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #277b32;
+ background: linear-gradient(#45c354, #34a241);
+ box-shadow: inset 0 1px 0 #7fd68a;
}
.jewel.button.emphasized:hover {
- background-color: #30e158;
+ border: 1px solid #21682a;
+ background: linear-gradient(#3AB549, #2e8e39);
}
.jewel.button.emphasized:active {
- background-color: #1bb83f;
+ border: 1px solid #15411a;
+ background: linear-gradient(#2e8e39, #21682a);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.button.emphasized:focus {
outline: 0;
}
.jewel.button.emphasized[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
cursor: unset;
}
-/**
- * Jewel TextButton
- */
-.jewel.textbutton, .jewel.textbutton:hover {
- /* TextField */
+.jewel.label {
font-family: "Lato", sans-serif;
- font-style: bold;
- font-size: 0.75rem;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton [disabled] {
- text-shadow: unset;
+ font-size: 14px;
}
.jewel.textbutton {
- background-color: rgba(0, 0, 0, 0.3);
- transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.4);
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #b3b3b3;
+ background: linear-gradient(#e6e6e6, #cccccc);
+ box-shadow: inset 0 1px 0 white;
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ color: #808080;
+ text-transform: uppercase;
+ text-decoration: none;
}
.jewel.textbutton:hover {
- background-color: rgba(15, 15, 15, 0.3);
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
}
.jewel.textbutton:active {
- background-color: rgba(0, 0, 0, 0.3);
+ border: 1px solid #8d8d8d;
+ background: linear-gradient(silver, #a6a6a6);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.textbutton:focus {
outline: 0;
}
.jewel.textbutton[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #b9b9b9;
+ box-shadow: none;
cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
}
.jewel.textbutton.primary {
- background-color: #dedede;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #0f88d1;
+ background: linear-gradient(#54b7f3, #24a3ef);
+ box-shadow: inset 0 1px 0 #9bd5f8;
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ color: #FFFFFF;
+ text-transform: uppercase;
+ text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.primary:hover {
- background-color: #ededed;
+ border: 1px solid #0d79ba;
+ background: linear-gradient(#3CADF1, #1198e9);
}
.jewel.textbutton.primary:active {
- background-color: #cfcfcf;
+ border: 1px solid #0a5a8a;
+ background: linear-gradient(#1198e9, #0d79ba);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.textbutton.primary:focus {
outline: 0;
}
.jewel.textbutton.primary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #b9b9b9;
+ box-shadow: none;
cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
}
.jewel.textbutton.secondary {
- background-color: #011833;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #be390e;
+ background: linear-gradient(#f16c42, #ed4812);
+ box-shadow: inset 0 1px 0 #f6a389;
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ color: #FFFFFF;
+ text-transform: uppercase;
+ text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.secondary:hover {
- background-color: #022651;
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
}
.jewel.textbutton.secondary:active {
- background-color: #000a15;
+ border: 1px solid #772409;
+ background: linear-gradient(#d64010, #a6320d);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.textbutton.secondary:focus {
outline: 0;
}
.jewel.textbutton.secondary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #b9b9b9;
+ box-shadow: none;
cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
}
.jewel.textbutton.emphasized {
- background-color: #1FD348;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #277b32;
+ background: linear-gradient(#45c354, #34a241);
+ box-shadow: inset 0 1px 0 #7fd68a;
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ color: #FFFFFF;
+ text-transform: uppercase;
+ text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.emphasized:hover {
- background-color: #30e158;
+ border: 1px solid #21682a;
+ background: linear-gradient(#3AB549, #2e8e39);
}
.jewel.textbutton.emphasized:active {
- background-color: #1bb83f;
+ border: 1px solid #15411a;
+ background: linear-gradient(#2e8e39, #21682a);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.textbutton.emphasized:focus {
outline: 0;
}
.jewel.textbutton.emphasized[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #b9b9b9;
+ box-shadow: none;
cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
}
-.jewel.label {
- font-family: "Lato", sans-serif;
- font-size: 0.75rem;
-}
-
-/**
- * Jewel TextField
- */
-TextField {
+.jewel.textfield {
position: relative;
display: inline-block;
box-sizing: border-box;
@@ -234,7 +336,7 @@ TextField {
margin: 0;
}
-.vTextField--input {
+.jewel.textfield > input {
font-size: 16px;
font-family: "Lato", sans-serif;
border: none;
@@ -250,7 +352,7 @@ TextField {
outline: none;
}
-.vTextField--label {
+.jewel.textfield > label {
bottom: 0;
color: #ff0000;
font-size: 13px;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
index 1b331d7..a4cfa7c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
@@ -16,11 +16,29 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,.3)
-$primary-color: #dedede
-$secondary-color: #011833
-$emphasized-color: #1FD348
-$default-font-color: rgba(0, 0, 0, .4)
-$font-color: #000000
\ No newline at end of file
+// 12 Color Themes (this will go to one separate project each one)
+$red: #EC1C24
+$amethyst: #922590
+$violet: #662C90
+$Sapphire: #2C74BE
+$blue: #3CADF1
+$turquoise: #29A89F
+$green: #3AB549
+$emerald: #8CC63C
+$yellow: #FCEF0A
+$sunflower: #F8B13F
+$orange: #F7941D
+$topaz: #EF5A2A
+
+// Common Colors
+$font-color: #FFFFFF
+$default-color: #d9d9d9
+$default-font-color: #808080
+$disabled-color: #F9F9F9
+
+// Var Colors
+$default-color: $default-color
+$primary-color: $blue
+$secondary-color: $topaz
+$emphasized-color: $green
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index f4e7302..22b1b05 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -17,24 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
-=button-theme($button-color, $text-color)
- //border-color: darken($button-color, 20%)
- background-color: $button-color
- transition:
- duration: 0.4s
- color: $text-color
- &:hover
- background-color: lighten($button-color, 6%)
- //box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%)
- &:active
- background-color: darken($button-color, 6%)
- //box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%)
- &:focus
- outline: 0
- &[disabled]
- background-color: $disabled-color
- color: $font-disabled-color
- cursor: unset
+
//=trans($val...)
// -webkit-transition: $val
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 3a6b64b..9a5fef9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -18,14 +18,12 @@
////////////////////////////////////////////////////////////////////////////////
$font-stack: 'Lato', sans-serif
-$font-size: 0.75rem
-
-// Common Colors
-$white: rgba(white,.9)
-$disabled-color: #CCCCCC
-$font-disabled-color: #888888
+$font-size: 14px//0.75rem
// Button variables
+$button-margin: 0 !default
+$button-padding: 10px 16px !default
+$button-min-height: 34px !default
$button-min-width: 74px !default
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index f8c5952..fc76a5a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -17,34 +17,46 @@
//
////////////////////////////////////////////////////////////////////////////////
-%button-def
+=button-theme($button-color)
cursor: pointer
-
display: inline-block
- margin: 0 //1rem
- padding: 10px 16px //.938em 1.875em
+ margin: $button-margin //1rem
+ padding: $button-padding //.938em 1.875em
min-width: $button-min-width
- min-height: 34px
-
+ min-height: $button-min-height
/* Background: */
- border: none // .094em solid
border-radius: 3px //.625em
- //box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15)
-
-.jewel.button, .jewel.button:hover
- @extend %button-def
+ border: 1px solid darken($button-color, 15%)// .094em solid
+ background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+ //transition:
+ // duration: 0.4s
+ &:hover
+ border: 1px solid darken($button-color, 20%)// .094em solid
+ background: linear-gradient($button-color, darken($button-color, 10%))
+ &:active
+ border: 1px solid darken($button-color, 30%)// .094em solid
+ background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75)
+ &:focus
+ outline: 0
+ &[disabled]
+ border: 1px solid darken($disabled-color, 20%)// .094em solid
+ background: $disabled-color
+ box-shadow: none
+ cursor: unset
.jewel.button
- +button-theme($default-color, $default-font-color)
+ +button-theme($default-color)
.jewel.button.primary
- +button-theme($primary-color, $font-color)
+ +button-theme($primary-color)
.jewel.button.secondary
- +button-theme($secondary-color, $font-color)
+ +button-theme($secondary-color)
.jewel.button.emphasized
- +button-theme($emphasized-color, $font-color)
+ +button-theme($emphasized-color)
//SVGs
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index eb82343..d081579 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -17,45 +17,59 @@
//
////////////////////////////////////////////////////////////////////////////////
-%textbutton-def
- @extend %button-def
- /* TextField */
+
+=textbutton-theme($button-color, $text-color)
+ cursor: pointer
+ display: inline-block
+ margin: $button-margin //1rem
+ padding: $button-padding //.938em 1.875em
+ min-width: $button-min-width
+ min-height: $button-min-height
+ /* Background: */
+ border-radius: 3px //.625em
+ border: 1px solid darken($button-color, 15%)// .094em solid
+ background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+ //transition:
+ // duration: 0.4s
font:
family: $font-stack
- style: bold
- size: $font-size
- //+trans(0.2s ease-in-out)
+ size: $font-size//+trans(0.2s ease-in-out)
+ weight: bold
+ color: $text-color
text:
transform: uppercase
decoration: none
- //shadow: 0 -1px 0 rgba(0,0,0,0.70) //0 .063em
- [disabled]
+ @if $text-color == $font-color
+ shadow: 0 1px 0 darken($text-color, 15%) //0 .063em
+ &:hover
+ border: 1px solid darken($button-color, 20%)// .094em solid
+ background: linear-gradient($button-color, darken($button-color, 10%))
+ &:active
+ border: 1px solid darken($button-color, 30%)// .094em solid
+ background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75)
+ &:focus
+ outline: 0
+ &[disabled]
+ border: 1px solid darken($disabled-color, 20%)// .094em solid
+ background: $disabled-color
+ color: darken($disabled-color, 25%)
+ box-shadow: none
+ cursor: unset
+ font:
+ weight: normal
text:
shadow: unset
-.jewel.textbutton, .jewel.textbutton:hover
- @extend %textbutton-def
-
.jewel.textbutton
- +button-theme($default-color, $default-font-color)
+ +textbutton-theme($default-color, $default-font-color)
.jewel.textbutton.primary
- +button-theme($primary-color, $font-color)
+ +textbutton-theme($primary-color, $font-color)
.jewel.textbutton.secondary
- +button-theme($secondary-color, $font-color)
+ +textbutton-theme($secondary-color, $font-color)
.jewel.textbutton.emphasized
- +button-theme($emphasized-color, $font-color)
-
-// /* TextField: */
-// font-family: $font-stack
-// font-size: 14px
-// font-weight: bold
-// color: $font-normal-color
-// text-shadow: 0 1px 0 #555
-
-// padding: 10px 0px
-// display: inline-block
-// min-width: 80px
-
+ +textbutton-theme($emphasized-color, $font-color)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 84b696c..952e7c5 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -17,10 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
-/**
- * Jewel TextField
- */
-TextField
+.jewel.textfield
position: relative
display: inline-block
box-sizing: border-box
@@ -28,7 +25,7 @@ TextField
max-width: 100%
margin: 0
-.vTextField--input
+.jewel.textfield > input
font-size: 16px
font-family: 'Lato', sans-serif
@@ -44,7 +41,7 @@ TextField
color: inherit
outline: none
-.vTextField--label
+.jewel.textfield > label
bottom: 0
color: #ff0000
font-size: 13px
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.