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 17:42:49 UTC
[royale-asjs] branch develop updated: todomvc: update styles to SASS
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 ead1939 todomvc: update styles to SASS
ead1939 is described below
commit ead1939675f20674724899d4ee15b59b660e3607
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Sep 10 19:42:37 2020 +0200
todomvc: update styles to SASS
---
examples/jewel/todomvc/pom.xml | 61 ++--
.../jewel/todomvc/src/main/resources/default.css | 321 +++++++++++++++++++++
.../todomvc/src/main/resources/todomvc-styles.css | 316 --------------------
examples/jewel/todomvc/src/main/royale/App.mxml | 2 +-
examples/jewel/todomvc/src/main/sass/_global.sass | 298 +++++++++++++++++++
examples/jewel/todomvc/src/main/sass/default.sass | 21 ++
6 files changed, 685 insertions(+), 334 deletions(-)
diff --git a/examples/jewel/todomvc/pom.xml b/examples/jewel/todomvc/pom.xml
index b3ce9a0..a196c9b 100644
--- a/examples/jewel/todomvc/pom.xml
+++ b/examples/jewel/todomvc/pom.xml
@@ -1,21 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
-<!--
-
- Licensed to the Apache Software Foundation (ASF) under one or more
- contributor license agreements. See the NOTICE file distributed with
- this work for additional information regarding copyright ownership.
- The ASF licenses this file to You under the Apache License, Version 2.0
- (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
--><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
@@ -47,6 +47,33 @@
</additionalCompilerOptions>
</configuration>
</plugin>
+ <!-- SASS compilation -->
+ <plugin>
+ <groupId>nl.geodienstencentrum.maven</groupId>
+ <artifactId>sass-maven-plugin</artifactId>
+ <version>3.7.2</version>
+ <configuration>
+ <resources>
+ <resource>
+ <source>
+ <directory>${basedir}/src/main/sass</directory>
+ <includes>
+ <include>**/*.sass</include>
+ </includes>
+ </source>
+ <destination>${basedir}/src/main/resources</destination>
+ </resource>
+ </resources>
+ </configuration>
+ <executions>
+ <execution>
+ <id>generate-css-using-sass</id>
+ <goals>
+ <goal>update-stylesheets</goal>
+ </goals>
+ </execution>
+ </executions>
+ </plugin>
</plugins>
</build>
diff --git a/examples/jewel/todomvc/src/main/resources/default.css b/examples/jewel/todomvc/src/main/resources/default.css
new file mode 100644
index 0000000..2d10787
--- /dev/null
+++ b/examples/jewel/todomvc/src/main/resources/default.css
@@ -0,0 +1,321 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@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;
+ 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 {
+ 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 */
+.todoapp h1 {
+ position: absolute;
+ top: -155px;
+ 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-rendering: optimizeLegibility;
+ margin: 0.83em 0;
+}
+
+/* Button */
+.jewel.button {
+ margin: 3px;
+ padding: 3px 7px;
+ background: none;
+ border: 1px solid transparent;
+ box-shadow: none;
+ border-radius: 0.25rem;
+ color: #808080;
+ text-shadow: none;
+ 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;
+ background: none;
+ border: 1px solid transparent;
+ box-shadow: none;
+ border-radius: 0.25rem;
+ color: #808080;
+ text-shadow: none;
+ 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;
+ 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: #4d4d4d;
+ -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;
+}
+
+.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;
+}
+
+/* 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;
+}
+
+.completed {
+ color: #d9d9d9;
+ 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;
+ 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 */
+.info {
+ text-align: center;
+ margin: 65px auto 0;
+ color: #bfbfbf;
+ 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;
+}
+
+/*# sourceMappingURL=default.css.map */
diff --git a/examples/jewel/todomvc/src/main/resources/todomvc-styles.css b/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
deleted file mode 100644
index 580b07f..0000000
--- a/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
+++ /dev/null
@@ -1,316 +0,0 @@
-/*
-////////////////////////////////////////////////////////////////////////////////
-//
-// Licensed to the Apache Software Foundation (ASF) under one or more
-// contributor license agreements. See the NOTICE file distributed with
-// this work for additional information regarding copyright ownership.
-// The ASF licenses this file to You under the Apache License, Version 2.0
-// (the "License"); you may not use this file except in compliance with
-// the License. You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-/* @namespace j "library://ns.apache.org/royale/jewel"; */
-@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;
- 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 {
- 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 */
-.todoapp h1 {
- position: absolute;
- top: -155px;
- 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-rendering: optimizeLegibility;
- margin: 0.83em 0;
-}
-
-/* Button */
-.jewel.button {
- margin: 3px;
- padding: 3px 7px;
- background: none;
- border: 1px solid transparent;
- box-shadow: none;
- border-radius: 0.25rem;
- color: #808080;
- text-shadow: none;
- 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;
- background: none;
- border: 1px solid transparent;
- box-shadow: none;
- border-radius: 0.25rem;
- color: #808080;
- text-shadow: none;
- 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;
-}
-.jewel.togglebutton:focus {
- border: 1px solid #b3b3b3;
- box-shadow: none;
-}
-.jewel.togglebutton.selected {
- background: none;
- border: 1px solid rgba(175,47,47,.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;
- 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;
-}
-
-.jewel.textinput.new-todo input: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;
-}
-
-.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;
-}
-.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;
-}
-
-.completed {
- color: #d9d9d9;
- 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;
- 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 */
-.info {
- text-align: center;
- margin: 65px auto 0;
- color: #bfbfbf;
- font-size: 10px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-}
-
-.info p {
- line-height: 1;
-}
-
-.info a {
- font-weight: 400;
- color: inherit;
- text-decoration: none;
-}
-
-.info a:hover {
- text-decoration: underline;
-}
\ No newline at end of file
diff --git a/examples/jewel/todomvc/src/main/royale/App.mxml b/examples/jewel/todomvc/src/main/royale/App.mxml
index 7220605..46adb57 100644
--- a/examples/jewel/todomvc/src/main/royale/App.mxml
+++ b/examples/jewel/todomvc/src/main/royale/App.mxml
@@ -22,7 +22,7 @@
xmlns:views="jewel.todomvc.views.*"
initialize="setUp()">
- <fx:Style source="../../main/resources/todomvc-styles.css"/>
+ <fx:Style source="../../main/resources/default.css"/>
<j:valuesImpl>
<js:SimpleCSSValuesImpl />
diff --git a/examples/jewel/todomvc/src/main/sass/_global.sass b/examples/jewel/todomvc/src/main/sass/_global.sass
new file mode 100644
index 0000000..d202ee2
--- /dev/null
+++ b/examples/jewel/todomvc/src/main/sass/_global.sass
@@ -0,0 +1,298 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License") you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+@namespace "http://www.w3.org/1999/xhtml"
+// @namespace j "library://ns.apache.org/royale/jewel"
+@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
+ 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
+ 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 */
+.todoapp h1
+ position: absolute
+ top: -155px
+ 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-rendering: optimizeLegibility
+ margin: 0.83em 0
+
+/* Button */
+.jewel.button
+ margin: 3px
+ padding: 3px 7px
+ background: none
+ border: 1px solid transparent
+ box-shadow: none
+ border-radius: 0.25rem
+ color: #808080
+ text-shadow: none
+ 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
+ background: none
+ border: 1px solid transparent
+ box-shadow: none
+ border-radius: 0.25rem
+ color: #808080
+ text-shadow: none
+ 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
+
+.jewel.togglebutton:focus
+ border: 1px solid #b3b3b3
+ box-shadow: none
+
+.jewel.togglebutton.selected
+ background: none
+ border: 1px solid rgba(175,47,47,.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
+ 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
+
+.jewel.textinput.new-todo input: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
+
+
+.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
+
+.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
+
+
+.completed
+ color: #d9d9d9
+ 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
+ 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 */
+.info
+ text-align: center
+ margin: 65px auto 0
+ color: #bfbfbf
+ font-size: 10px
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .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/default.sass b/examples/jewel/todomvc/src/main/sass/default.sass
new file mode 100644
index 0000000..bbad92a
--- /dev/null
+++ b/examples/jewel/todomvc/src/main/sass/default.sass
@@ -0,0 +1,21 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Variables
+
+// Global
+@import "global"
\ No newline at end of file