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:21:26 UTC
[royale-asjs] branch develop updated: todomvc: use sass syntax
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 7ab41fc todomvc: use sass syntax
7ab41fc is described below
commit 7ab41fcb1ce73bb622b365d6f62756586ff15d48
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Sep 11 00:21:13 2020 +0200
todomvc: use sass syntax
---
.../jewel/todomvc/src/main/resources/default.css | 43 ----
examples/jewel/todomvc/src/main/sass/_global.sass | 219 ++++++++++-----------
2 files changed, 104 insertions(+), 158 deletions(-)
diff --git a/examples/jewel/todomvc/src/main/resources/default.css b/examples/jewel/todomvc/src/main/resources/default.css
index 2d10787..a00b977 100644
--- a/examples/jewel/todomvc/src/main/resources/default.css
+++ b/examples/jewel/todomvc/src/main/resources/default.css
@@ -16,13 +16,11 @@
*/
@namespace "http://www.w3.org/1999/xhtml";
@namespace todomvc "jewel.todomvc.views.*";
-/* Add Controller and Model beads to TodoListSectionComponent */
todomvc|TodoListSection {
IBeadController: ClassReference("jewel.todomvc.controllers.TodoController");
IBeadModel: ClassReference("jewel.todomvc.models.TodoModel");
}
-/* Application */
.jewel.application {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
@@ -37,7 +35,6 @@ todomvc|TodoListSection {
font-weight: 300;
}
-/* Main Section */
.todoapp {
background: #fff;
margin: 130px 0 40px 0;
@@ -45,7 +42,6 @@ todomvc|TodoListSection {
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;
top: -155px;
@@ -60,7 +56,6 @@ todomvc|TodoListSection {
margin: 0.83em 0;
}
-/* Button */
.jewel.button {
margin: 3px;
padding: 3px 7px;
@@ -73,24 +68,20 @@ todomvc|TodoListSection {
font-weight: normal;
text-transform: initial;
}
-
.jewel.button:hover, .jewel.button:hover:focus {
background: none;
border: 1px solid transparent;
}
-
.jewel.button:active, .jewel.button:active:focus {
background: none;
border: 1px solid transparent;
box-shadow: none;
}
-
.jewel.button:focus {
border: 1px solid transparent;
box-shadow: none;
}
-/* ToggleButton */
.jewel.togglebutton {
margin: 3px;
padding: 3px 7px;
@@ -103,59 +94,46 @@ todomvc|TodoListSection {
font-weight: normal;
text-transform: initial;
}
-
.jewel.togglebutton:hover, .jewel.togglebutton:hover:focus {
background: none;
border: 1px solid rgba(175, 47, 47, 0.1);
}
-
.jewel.togglebutton:active, .jewel.togglebutton:active:focus {
background: none;
border: 1px solid rgba(175, 47, 47, 0.2);
box-shadow: none;
}
-
.jewel.togglebutton:focus {
border: 1px solid #b3b3b3;
box-shadow: none;
}
-
.jewel.togglebutton.selected {
background: none;
border: 1px solid rgba(175, 47, 47, 0.2);
box-shadow: none;
}
-
-/* Toggle All */
.jewel.togglebutton.toggleAll .fonticon {
font-size: 1.8em;
}
-
.jewel.togglebutton.toggleAll:hover, .jewel.togglebutton.toggleAll:hover:focus {
border: 1px solid transparent;
}
-
.jewel.togglebutton.toggleAll:active, .jewel.togglebutton.toggleAll:active:focus {
border: 1px solid transparent;
}
-
.jewel.togglebutton.toggleAll:focus {
border: 1px solid transparent;
}
-
.jewel.togglebutton.toggleAll.selected {
border: 1px solid transparent;
}
-
.jewel.togglebutton.toggleAll .fonticon {
color: #e6e6e6;
}
-
.jewel.togglebutton.toggleAll.selected .fonticon {
color: #737373;
}
-/* TextInput */
.jewel.textinput.new-todo input {
padding: 16px 16px 16px 60px !important;
border-radius: 0px;
@@ -175,11 +153,9 @@ todomvc|TodoListSection {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-
.jewel.textinput.new-todo input:focus {
border: none;
}
-
.jewel.textinput.new-todo input::placeholder, .jewel.textinput.new-todo input:-ms-input-placeholder {
font-style: italic;
}
@@ -204,58 +180,47 @@ todomvc|TodoListSection {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
-
.jewel.textinput input:focus {
border: 1px solid darkgrey;
}
-/* Data Container */
.todo-list {
IItemRenderer: ClassReference("jewel.todomvc.renderers.TodoItemRenderer");
}
-/* ItemRenderer */
.todo-list li {
font-size: 24px;
border-bottom: 1px solid #ededed;
}
-
.todo-list li:last-child {
border-bottom: none;
}
-
.todo-list li.editing {
border-bottom: none;
}
-/* CheckBox */
.jewel.checkbox {
margin: 8px;
}
-
.jewel.checkbox input + span::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135' xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='%23ededed' stroke-width='3'/%3E%3C/svg%3E") no-repeat center center;
border: none;
border-radius: 50%;
}
-
.jewel.checkbox input + span::after {
background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135' xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='%23bddad5' stroke-width='3'/%3E%3Cpath fill='%235dc2af' d='M72 25L42 71 27 56l-4 4 20 20 34-52z'/%3E%3C/svg%3E") no-repeat center center;
border: none;
transition: none;
transform: none;
}
-
.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
transform: none;
}
-
.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
background: none;
border: none;
border-radius: 50%;
}
-
.jewel.checkbox span {
padding-left: 3px;
font-size: 16px;
@@ -266,19 +231,16 @@ todomvc|TodoListSection {
text-decoration: line-through;
}
-/* ItemRenderer destroy button */
.destroy {
color: #af5b5e !important;
}
-/* Footer */
.footer {
color: #777;
padding: 10px 15px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
-
.footer:before {
content: "";
position: absolute;
@@ -290,12 +252,10 @@ 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);
}
-/* Clear Completed Button */
.jewel.button.clearCompleted {
text-decoration: underline;
}
-/* Footer Info */
.info {
text-align: center;
margin: 65px auto 0;
@@ -303,17 +263,14 @@ todomvc|TodoListSection {
font-size: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
-
.info p {
line-height: 1;
}
-
.info a {
font-weight: 400;
color: inherit;
text-decoration: none;
}
-
.info a:hover {
text-decoration: underline;
}
diff --git a/examples/jewel/todomvc/src/main/sass/_global.sass b/examples/jewel/todomvc/src/main/sass/_global.sass
index d202ee2..8eb00c8 100644
--- a/examples/jewel/todomvc/src/main/sass/_global.sass
+++ b/examples/jewel/todomvc/src/main/sass/_global.sass
@@ -21,12 +21,12 @@
// @namespace j "library://ns.apache.org/royale/jewel"
@namespace todomvc "jewel.todomvc.views.*"
-/* Add Controller and Model beads to TodoListSectionComponent */
+// Add Controller and Model beads to TodoListSectionComponent
todomvc|TodoListSection
IBeadController: ClassReference("jewel.todomvc.controllers.TodoController")
IBeadModel: ClassReference("jewel.todomvc.models.TodoModel")
-/* Application */
+// Application
.jewel.application
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
font-size: 14px
@@ -40,14 +40,14 @@ todomvc|TodoListSection
-moz-osx-font-smoothing: grayscale
font-weight: 300
-/* Main Section */
+// Main Section
.todoapp
background: #fff
margin: 130px 0 40px 0
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 */
+// Main Title
.todoapp h1
position: absolute
top: -155px
@@ -61,7 +61,7 @@ todomvc|TodoListSection
text-rendering: optimizeLegibility
margin: 0.83em 0
-/* Button */
+// Button
.jewel.button
margin: 3px
padding: 3px 7px
@@ -74,20 +74,20 @@ todomvc|TodoListSection
font-weight: normal
text-transform: initial
-.jewel.button:hover, .jewel.button:hover:focus
- background: none
- border: 1px solid transparent
+ &:hover, &:hover:focus
+ background: none
+ border: 1px solid transparent
-.jewel.button:active, .jewel.button:active:focus
- background: none
- border: 1px solid transparent
- box-shadow: none
+ &:active, &:active:focus
+ background: none
+ border: 1px solid transparent
+ box-shadow: none
-.jewel.button:focus
- border: 1px solid transparent
- box-shadow: none
+ &:focus
+ border: 1px solid transparent
+ box-shadow: none
-/* ToggleButton */
+// ToggleButton
.jewel.togglebutton
margin: 3px
padding: 3px 7px
@@ -100,47 +100,47 @@ todomvc|TodoListSection
font-weight: normal
text-transform: initial
-.jewel.togglebutton:hover, .jewel.togglebutton:hover:focus
- background: none
- border: 1px solid rgba(175, 47, 47, .1)
-
-.jewel.togglebutton:active, .jewel.togglebutton:active:focus
- background: none
- border: 1px solid rgba(175,47,47,.2)
- box-shadow: none
+ &:hover, &:hover:focus
+ background: none
+ border: 1px solid rgba(175, 47, 47, .1)
-.jewel.togglebutton:focus
- border: 1px solid #b3b3b3
- box-shadow: none
+ &:active, &:active:focus
+ background: none
+ border: 1px solid rgba(175,47,47,.2)
+ box-shadow: none
-.jewel.togglebutton.selected
- background: none
- border: 1px solid rgba(175,47,47,.2)
- box-shadow: none
+ &:focus
+ border: 1px solid #b3b3b3
+ box-shadow: none
-/* Toggle All */
-.jewel.togglebutton.toggleAll .fonticon
- font-size: 1.8em
+ &.selected
+ background: none
+ border: 1px solid rgba(175,47,47,.2)
+ box-shadow: none
+
+ &.toggleAll
+ .fonticon
+ font-size: 1.8em
-.jewel.togglebutton.toggleAll:hover, .jewel.togglebutton.toggleAll:hover:focus
- border: 1px solid transparent
+ &:hover, &:hover:focus
+ border: 1px solid transparent
-.jewel.togglebutton.toggleAll:active, .jewel.togglebutton.toggleAll:active:focus
- border: 1px solid transparent
+ &:active, &:active:focus
+ border: 1px solid transparent
-.jewel.togglebutton.toggleAll:focus
- border: 1px solid transparent
+ &:focus
+ border: 1px solid transparent
-.jewel.togglebutton.toggleAll.selected
- border: 1px solid transparent
+ &.selected
+ border: 1px solid transparent
-.jewel.togglebutton.toggleAll .fonticon
- color: #e6e6e6
+ & .fonticon
+ color: #e6e6e6
-.jewel.togglebutton.toggleAll.selected .fonticon
- color: #737373
+ &.selected .fonticon
+ color: #737373
-/* TextInput */
+// TextInput
.jewel.textinput.new-todo input
padding: 16px 16px 16px 60px !important
border-radius: 0px
@@ -162,16 +162,17 @@ todomvc|TodoListSection
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-.jewel.textinput.new-todo input:focus
- border: none
+ &:focus
+ border: none
-.jewel.textinput.new-todo input::placeholder, .jewel.textinput.new-todo input:-ms-input-placeholder
- color:rgb(230, 230, 230)
- font-style: italic
+ &::placeholder, &:-ms-input-placeholder
+ color:rgb(230, 230, 230)
+ font-style: italic
-.jewel.item .jewel.textinput
- margin-left: 46px
+.jewel.item
+ .jewel.textinput
+ margin-left: 46px
.jewel.textinput input
background: none
@@ -189,93 +190,84 @@ todomvc|TodoListSection
-webkit-font-smoothing: antialiased
-moz-font-smoothing: antialiased
-.jewel.textinput input:focus
- border: 1px solid darkgrey
+ &:focus
+ border: 1px solid darkgrey
-/* Data Container */
+// Data Container
.todo-list
IItemRenderer: ClassReference("jewel.todomvc.renderers.TodoItemRenderer")
-
-/* ItemRenderer */
+// ItemRenderer
.todo-list li
font-size: 24px
border-bottom: 1px solid #ededed
+ &:last-child
+ border-bottom: none
-.todo-list li:last-child
- border-bottom: none
+ &.editing
+ border-bottom: none
-.todo-list li.editing
- border-bottom: none
-
-
-/* CheckBox */
+// CheckBox
.jewel.checkbox
margin: 8px
+ & input + span::before
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135' xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='%23ededed' stroke-width='3'/%3E%3C/svg%3E") no-repeat center center
+ border: none
+ border-radius: 50%
-.jewel.checkbox input + span::before
- background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135' xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='%23ededed' stroke-width='3'/%3E%3C/svg%3E") no-repeat center center
- border: none
- border-radius: 50%
-
-.jewel.checkbox input + span::after
- background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135' xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='%23bddad5' stroke-width='3'/%3E%3Cpath fill='%235dc2af' d='M72 25L42 71 27 56l-4 4 20 20 34-52z'/%3E%3C/svg%3E") no-repeat center center
- border: none
- transition: none
- transform: none
+ & input + span::after
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135' xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='%23bddad5' stroke-width='3'/%3E%3Cpath fill='%235dc2af' d='M72 25L42 71 27 56l-4 4 20 20 34-52z'/%3E%3C/svg%3E") no-repeat center center
+ border: none
+ transition: none
+ transform: none
-.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after
- transform: none
+ & input:checked + span::after, & input:checked:active + span::after
+ transform: none
-.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before
- background: none
- border: none
- border-radius: 50%
+ & input:focus + span::before, & input:checked:focus + span::before, & input:checked:active:focus + span::before
+ background: none
+ border: none
+ border-radius: 50%
-.jewel.checkbox span
- padding-left: 3px
- font-size: 16px
+ & span
+ padding-left: 3px
+ font-size: 16px
.completed
color: #d9d9d9
text-decoration: line-through
-
-/* ItemRenderer destroy button */
+// ItemRenderer destroy button
.destroy
color: #af5b5e !important
-
-/* Footer */
+// Footer
.footer
color: #777
padding: 10px 15px
text-align: center
border-top: 1px solid #e6e6e6
-
-.footer:before
- content: ''
- position: absolute
- right: 0
- bottom: 0
- left: 0
- height: 50px
- 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 */
+ &:before
+ content: ''
+ position: absolute
+ right: 0
+ bottom: 0
+ left: 0
+ height: 50px
+ 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 */
+// Footer Info
.info
text-align: center
margin: 65px auto 0
@@ -283,16 +275,13 @@ todomvc|TodoListSection
font-size: 10px
text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
+ & p
+ line-height: 1
-.info p
- line-height: 1
-
+ & a
+ font-weight: 400
+ color: inherit
+ text-decoration: none
-.info a
- font-weight: 400
- color: inherit
- text-decoration: none
-
-
-.info a:hover
- text-decoration: underline
+ & a:hover
+ text-decoration: underline