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 2020/09/10 22:51:18 UTC
[royale-asjs] branch develop updated: todomvc: clean,
order and optimize styles
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new ba1c396 todomvc: clean, order and optimize styles
ba1c396 is described below
commit ba1c3962096cffe57cc0898beefb1cd510be86df
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Sep 11 00:51:08 2020 +0200
todomvc: clean, order and optimize styles
---
.../jewel/todomvc/src/main/resources/default.css | 72 +++++------
.../jewel/todomvc/renderers/TodoItemRenderer.mxml | 2 +-
.../royale/jewel/todomvc/views/TodoFooter.mxml | 2 +-
examples/jewel/todomvc/src/main/sass/_global.sass | 141 +++++++++++----------
4 files changed, 107 insertions(+), 110 deletions(-)
diff --git a/examples/jewel/todomvc/src/main/resources/default.css b/examples/jewel/todomvc/src/main/resources/default.css
index a00b977..f8eabc9 100644
--- a/examples/jewel/todomvc/src/main/resources/default.css
+++ b/examples/jewel/todomvc/src/main/resources/default.css
@@ -24,15 +24,15 @@ todomvc|TodoListSection {
.jewel.application {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
+ font-weight: 300;
+ color: #4d4d4d;
line-height: 1.4em;
background: #f5f5f5;
- color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- font-weight: 300;
}
.todoapp {
@@ -48,10 +48,8 @@ todomvc|TodoListSection {
width: 100%;
font-size: 100px;
font-weight: 100;
- text-align: center;
color: rgba(175, 47, 47, 0.15);
- -webkit-text-rendering: optimizeLegibility;
- -moz-text-rendering: optimizeLegibility;
+ text-align: center;
text-rendering: optimizeLegibility;
margin: 0.83em 0;
}
@@ -64,8 +62,8 @@ todomvc|TodoListSection {
box-shadow: none;
border-radius: 0.25rem;
color: #808080;
- text-shadow: none;
font-weight: normal;
+ text-shadow: none;
text-transform: initial;
}
.jewel.button:hover, .jewel.button:hover:focus {
@@ -81,6 +79,9 @@ todomvc|TodoListSection {
border: 1px solid transparent;
box-shadow: none;
}
+.jewel.button.clear-completed {
+ text-decoration: underline;
+}
.jewel.togglebutton {
margin: 3px;
@@ -90,8 +91,8 @@ todomvc|TodoListSection {
box-shadow: none;
border-radius: 0.25rem;
color: #808080;
- text-shadow: none;
font-weight: normal;
+ text-shadow: none;
text-transform: initial;
}
.jewel.togglebutton:hover, .jewel.togglebutton:hover:focus {
@@ -134,10 +135,29 @@ todomvc|TodoListSection {
color: #737373;
}
+.jewel.textinput input {
+ background: none;
+ border-radius: 0px;
+ padding: 12px;
+ font-size: 24px;
+ font-family: inherit;
+ font-weight: 300;
+ line-height: 1.4em;
+ color: inherit;
+ outline: 0;
+ border: 1px solid #999;
+ box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+}
+.jewel.textinput input:focus {
+ border: 1px solid darkgrey;
+}
.jewel.textinput.new-todo input {
padding: 16px 16px 16px 60px !important;
border-radius: 0px;
border: none;
+ border: 0;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
font-size: 24px;
@@ -146,9 +166,7 @@ todomvc|TodoListSection {
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
- font-weight: 300;
line-height: 1.4em;
- border: 0;
color: #4d4d4d;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -160,30 +178,6 @@ todomvc|TodoListSection {
font-style: italic;
}
-.jewel.item .jewel.textinput {
- margin-left: 46px;
-}
-
-.jewel.textinput input {
- background: none;
- border-radius: 0px;
- font-weight: 300;
- padding: 12px;
- font-size: 24px;
- font-family: inherit;
- font-weight: 300;
- line-height: 1.4em;
- outline: 0;
- color: inherit;
- border: 1px solid #999;
- box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
-}
-.jewel.textinput input:focus {
- border: 1px solid darkgrey;
-}
-
.todo-list {
IItemRenderer: ClassReference("jewel.todomvc.renderers.TodoItemRenderer");
}
@@ -199,6 +193,10 @@ todomvc|TodoListSection {
border-bottom: none;
}
+.jewel.item .jewel.textinput {
+ margin-left: 46px;
+}
+
.jewel.checkbox {
margin: 8px;
}
@@ -236,8 +234,8 @@ todomvc|TodoListSection {
}
.footer {
- color: #777;
padding: 10px 15px;
+ color: #777;
text-align: center;
border-top: 1px solid #e6e6e6;
}
@@ -252,15 +250,11 @@ todomvc|TodoListSection {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
-.jewel.button.clearCompleted {
- text-decoration: underline;
-}
-
.info {
- text-align: center;
margin: 65px auto 0;
color: #bfbfbf;
font-size: 10px;
+ text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.info p {
diff --git a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
index 5d7c209..644eb40 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
@@ -149,7 +149,7 @@ limitations under the License.
<j:Label localId="description" width="84%"
text="{item ? item.label : ''}" multiline="true"
visible.normal="true" visible.editing="false"
- className="{item ? (item.done ? 'todolabel completed' : 'todolabel') : 'todolabel' }"
+ className="{item ? (item.done ? 'completed' : '') : '' }"
doubleClick="goToEditMode(event)"/>
<j:TextInput localId="editfield" width="100%"
diff --git a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml
index fc70186..62c772b 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml
@@ -77,7 +77,7 @@ limitations under the License.
</j:BarSection>
<j:BarSection width="15%" gap="3" itemsHorizontalAlign="itemsRight">
- <j:Button localId="clearCompleted" text="Clear Completed" className="clearCompleted"
+ <j:Button localId="clearCompleted" text="Clear Completed" className="clear-completed"
visible="{todoModel.clearCompletedVisibility}" click="removeCompleted()"/>
</j:BarSection>
diff --git a/examples/jewel/todomvc/src/main/sass/_global.sass b/examples/jewel/todomvc/src/main/sass/_global.sass
index 8eb00c8..1d22493 100644
--- a/examples/jewel/todomvc/src/main/sass/_global.sass
+++ b/examples/jewel/todomvc/src/main/sass/_global.sass
@@ -17,8 +17,8 @@
//
////////////////////////////////////////////////////////////////////////////////
-@namespace "http://www.w3.org/1999/xhtml"
// @namespace j "library://ns.apache.org/royale/jewel"
+@namespace "http://www.w3.org/1999/xhtml"
@namespace todomvc "jewel.todomvc.views.*"
// Add Controller and Model beads to TodoListSectionComponent
@@ -30,15 +30,16 @@ todomvc|TodoListSection
.jewel.application
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
font-size: 14px
+ font-weight: 300
+ color: #4d4d4d
line-height: 1.4em
background: #f5f5f5
- color: #4d4d4d
min-width: 230px
max-width: 550px
margin: 0 auto
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
- font-weight: 300
+
// Main Section
.todoapp
@@ -47,6 +48,7 @@ todomvc|TodoListSection
position: relative
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)
+
// Main Title
.todoapp h1
position: absolute
@@ -54,13 +56,12 @@ todomvc|TodoListSection
width: 100%
font-size: 100px
font-weight: 100
- text-align: center
color: rgba(175, 47, 47, 0.15)
- -webkit-text-rendering: optimizeLegibility
- -moz-text-rendering: optimizeLegibility
+ text-align: center
text-rendering: optimizeLegibility
margin: 0.83em 0
+
// Button
.jewel.button
margin: 3px
@@ -70,8 +71,8 @@ todomvc|TodoListSection
box-shadow: none
border-radius: 0.25rem
color: #808080
- text-shadow: none
font-weight: normal
+ text-shadow: none
text-transform: initial
&:hover, &:hover:focus
@@ -87,6 +88,11 @@ todomvc|TodoListSection
border: 1px solid transparent
box-shadow: none
+ // Clear Completed Button
+ &.clear-completed
+ text-decoration: underline
+
+
// ToggleButton
.jewel.togglebutton
margin: 3px
@@ -96,8 +102,8 @@ todomvc|TodoListSection
box-shadow: none
border-radius: 0.25rem
color: #808080
- text-shadow: none
font-weight: normal
+ text-shadow: none
text-transform: initial
&:hover, &:hover:focus
@@ -117,7 +123,8 @@ todomvc|TodoListSection
background: none
border: 1px solid rgba(175,47,47,.2)
box-shadow: none
-
+
+ // Toggle All Button
&.toggleAll
.fonticon
font-size: 1.8em
@@ -140,59 +147,54 @@ todomvc|TodoListSection
&.selected .fonticon
color: #737373
-// TextInput
-.jewel.textinput.new-todo input
- padding: 16px 16px 16px 60px !important
- border-radius: 0px
- border: none
-
- background: rgba(0, 0, 0, 0.003)
- box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03)
- font-size: 24px
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
- font-weight: 300
- font-stretch: normal
- font-style: normal
- font-variant-caps: normal
- font-weight: 300
- line-height: 1.4em
- border: 0
- color: rgb(77, 77, 77)
- -webkit-font-smoothing: antialiased
- -moz-osx-font-smoothing: grayscale
-
- &:focus
- border: none
-
- &::placeholder, &:-ms-input-placeholder
- color:rgb(230, 230, 230)
- font-style: italic
-
-
-.jewel.item
- .jewel.textinput
- margin-left: 46px
-
-.jewel.textinput input
- background: none
- border-radius: 0px
- font-weight: 300
- padding: 12px
- font-size: 24px
- font-family: inherit
- font-weight: 300
- line-height: 1.4em
- outline: 0
- color: inherit
- border: 1px solid #999
- box-shadow: inset 0 -1px 5px 0 rgba(0,0,0,.2)
- -webkit-font-smoothing: antialiased
- -moz-font-smoothing: antialiased
-
- &:focus
- border: 1px solid darkgrey
+// TextInput
+.jewel.textinput
+ input
+ background: none
+ border-radius: 0px
+ padding: 12px
+ font-size: 24px
+ font-family: inherit
+ font-weight: 300
+ line-height: 1.4em
+ color: inherit
+ outline: 0
+ border: 1px solid #999
+ box-shadow: inset 0 -1px 5px 0 rgba(0,0,0,.2)
+ -webkit-font-smoothing: antialiased
+ -moz-font-smoothing: antialiased
+ &:focus
+ border: 1px solid darkgrey
+
+ &.new-todo
+ input
+ padding: 16px 16px 16px 60px !important
+ border-radius: 0px
+ border: none
+ border: 0
+
+ background: rgba(0, 0, 0, 0.003)
+ box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03)
+
+ font-size: 24px
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+ font-weight: 300
+ font-stretch: normal
+ font-style: normal
+ font-variant-caps: normal
+ line-height: 1.4em
+ color: rgb(77, 77, 77)
+ -webkit-font-smoothing: antialiased
+ -moz-osx-font-smoothing: grayscale
+
+ &:focus
+ border: none
+
+ &::placeholder, &:-ms-input-placeholder
+ color:rgb(230, 230, 230)
+ font-style: italic
// Data Container
.todo-list
@@ -209,8 +211,12 @@ todomvc|TodoListSection
&.editing
border-bottom: none
+// ItemRenderer TextInput
+.jewel.item
+ .jewel.textinput
+ margin-left: 46px
-// CheckBox
+// ItemRenderer CheckBox
.jewel.checkbox
margin: 8px
@@ -237,19 +243,20 @@ todomvc|TodoListSection
padding-left: 3px
font-size: 16px
-
+// ItemRenderer Label complete
.completed
color: #d9d9d9
text-decoration: line-through
-// ItemRenderer destroy button
+// ItemRenderer IconButton destroy
.destroy
color: #af5b5e !important
+
// Footer
.footer
- color: #777
padding: 10px 15px
+ color: #777
text-align: center
border-top: 1px solid #e6e6e6
@@ -263,16 +270,12 @@ todomvc|TodoListSection
overflow: hidden
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2)
-// Clear Completed Button
-.jewel.button.clearCompleted
- text-decoration: underline
-
// Footer Info
.info
- text-align: center
margin: 65px auto 0
color: #bfbfbf
font-size: 10px
+ text-align: center
text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
& p