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
The following commit(s) were added to refs/heads/feature/jewel-ui-set by this
push:
new b75820a preparing blue theme to make separations of primary colors
b75820a is described below
commit b75820ac352046cc04272f6efcd36012b844b8ef
Author: Carlos Rovira <[email protected]>
AuthorDate: Sat Mar 31 17:34:21 2018 +0200
preparing blue theme to make separations of primary colors
---
examples/royale/JewelExample/pom.xml | 4 +-
frameworks/themes/JewelBlueTheme/pom.xml | 4 +-
.../src/main/resources/assets/JewelButton2.svg | 44 --
.../src/main/resources/assets/jewel-button.svg | 37 --
.../JewelBlueTheme/src/main/resources/defaults.css | 562 +++++++++++++++++++++
.../src/main/resources/royale-jewel-blue.css | 271 ----------
.../JewelBlueTheme/src/main/sass/_global.sass | 28 +-
.../JewelBlueTheme/src/main/sass/_mixins.sass | 24 +-
.../JewelBlueTheme/src/main/sass/_variables.sass | 51 +-
.../_alert.sass} | 12 +-
.../src/main/sass/components/_button.sass | 104 ++--
.../src/main/sass/components/_checkbox.sass | 105 ++++
.../components/{_label.sass => _controlbar.sass} | 13 +-
.../src/main/sass/components/_label.sass | 8 +-
.../src/main/sass/components/_radiobutton.sass | 101 ++++
.../{_variables.sass => components/_slider.sass} | 39 +-
.../src/main/sass/components/_textbutton.sass | 103 ++--
.../src/main/sass/components/_textfield.sass | 120 +++--
.../components/{_label.sass => _titlebar.sass} | 13 +-
.../sass/{royale-jewel-blue.sass => defaults.sass} | 9 +-
20 files changed, 1115 insertions(+), 537 deletions(-)
diff --git a/examples/royale/JewelExample/pom.xml
b/examples/royale/JewelExample/pom.xml
index b2b08f8..5427bc4 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/frameworks/themes/JewelBlueTheme/pom.xml
b/frameworks/themes/JewelBlueTheme/pom.xml
index 30632ff..c37e7e4 100644
--- a/frameworks/themes/JewelBlueTheme/pom.xml
+++ b/frameworks/themes/JewelBlueTheme/pom.xml
@@ -50,8 +50,8 @@
<path>../src/main/resources/assets/*</path>
</include-file>
<include-file>
- <name>royale-jewel-blue.css</name>
- <path>../src/main/resources/royale-jewel-blue.css</path>
+ <name>defaults.css</name>
+ <path>../src/main/resources/defaults.css</path>
</include-file>
</includeFiles>
</configuration>
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg
b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg
deleted file mode 100644
index ad0c128..0000000
---
a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg
+++ /dev/null
@@ -1,44 +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.
-
--->
-
-<svg width="152px" height="42px" viewBox="0 0 152 42" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
- <defs>
- <linearGradient x1="50%" y1="3.10307717%" x2="50%" y2="98.2081246%"
id="linearGradient-1">
- <stop stop-color="#3BB0FF" offset="0%"></stop>
- <stop stop-color="#1E36FA" offset="100%"></stop>
- </linearGradient>
- <rect id="path-2" x="0" y="0" width="150" height="40" rx="3"></rect>
- <linearGradient x1="50%" y1="0%" x2="50%" y2="98.2362085%"
id="linearGradient-3">
- <stop stop-color="#8EDEFF" offset="0%"></stop>
- <stop stop-color="#1D89E6" offset="100%"></stop>
- </linearGradient>
- </defs>
- <g id="Page-1" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
- <g id="JewelButton">
- <g id="Background" transform="translate(1.000000, 1.000000)">
- <g>
- <use fill="url(#linearGradient-1)" fill-rule="evenodd"
xlink:href="#path-2"></use>
- <rect stroke="#244084" stroke-width="1" x="-0.5" y="-0.5"
width="151" height="41" rx="3"></rect>
- </g>
- <rect stroke="url(#linearGradient-3)" x="0.5" y="0.5"
width="149" height="39" rx="3"></rect>
- </g>
- </g>
- </g>
-</svg>
\ No newline at end of file
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg
b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg
deleted file mode 100644
index 63bfc72..0000000
---
a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg
+++ /dev/null
@@ -1,37 +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.
-
--->
-<svg viewBox="0 0 126 48" version="1.1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
- <defs>
- <rect id="path-1" x="0" y="0" width="126" height="48" rx="4"></rect>
- </defs>
- <g id="Jewel" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
- <g id="button/large">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="mask" fill="#009EF5" fill-rule="evenodd"
xlink:href="#path-1"></use>
- <g id="colors/primary" mask="url(#mask-2)" fill="#006CEB"
fill-rule="evenodd">
- <rect x="0" y="0" width="126" height="48"></rect>
- </g>
- <text id="CTA" mask="url(#mask-2)" font-family="Lato-Bold, Lato"
font-size="18" font-weight="bold" line-spacing="24"
letter-spacing="-0.225000009"></text>
- </g>
- </g>
-</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
new file mode 100644
index 0000000..66c696c
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
@@ -0,0 +1,562 @@
+/**
+ * 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 j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";;
+.royale *, .royale *:before, .royale *:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+j|Application {
+ font-family: "Lato", sans-serif;
+ color: #808080;
+}
+
+h1 {
+ font-size: 22px;
+}
+
+h2 {
+ font-size: 19px;
+}
+
+h3 {
+ font-size: 17px;
+}
+
+h4 {
+ font-size: 15px;
+}
+
+span {
+ font-size: 14px;
+}
+
+div {
+ font-size: 14px;
+ white-space: normal;
+ word-wrap: break-word;
+}
+
+.jewel.button {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 8px;
+ min-width: 34px;
+ min-height: 34px;
+ 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 #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
+}
+.jewel.button:active {
+ 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 {
+ outline: none;
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+}
+.jewel.button[disabled] {
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
+ cursor: unset;
+}
+
+.jewel.button.primary {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 8px;
+ min-width: 34px;
+ min-height: 34px;
+ border: 1px solid #0f88d1;
+ background: linear-gradient(#54b7f3, #24a3ef);
+ box-shadow: inset 0 1px 0 #9bd5f8;
+ border-radius: 3px;
+}
+.jewel.button.primary:hover {
+ border: 1px solid #0d79ba;
+ background: linear-gradient(#3CADF1, #1198e9);
+}
+.jewel.button.primary:active {
+ border: 1px solid #0a5a8a;
+ background: linear-gradient(#1198e9, #0d79ba);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.primary:focus {
+ outline: none;
+ border: 1px solid #0f88d1;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+}
+.jewel.button.primary[disabled] {
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
+ cursor: unset;
+}
+
+.jewel.button.secondary {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 8px;
+ min-width: 34px;
+ min-height: 34px;
+ border: 1px solid #be390e;
+ background: linear-gradient(#f16c42, #ed4812);
+ box-shadow: inset 0 1px 0 #f6a389;
+ border-radius: 3px;
+}
+.jewel.button.secondary:hover {
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
+}
+.jewel.button.secondary:active {
+ border: 1px solid #772409;
+ background: linear-gradient(#d64010, #a6320d);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+ outline: none;
+ border: 1px solid #be390e;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
+ cursor: unset;
+}
+
+.jewel.button.emphasized {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 8px;
+ min-width: 34px;
+ min-height: 34px;
+ border: 1px solid #277b32;
+ background: linear-gradient(#45c354, #34a241);
+ box-shadow: inset 0 1px 0 #7fd68a;
+ border-radius: 3px;
+}
+.jewel.button.emphasized:hover {
+ border: 1px solid #21682a;
+ background: linear-gradient(#3AB549, #2e8e39);
+}
+.jewel.button.emphasized:active {
+ border: 1px solid #15411a;
+ background: linear-gradient(#2e8e39, #21682a);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.emphasized:focus {
+ outline: none;
+ border: 1px solid #277b32;
+ box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+}
+.jewel.button.emphasized[disabled] {
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
+ cursor: unset;
+}
+
+.jewel.checkbox {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ vertical-align: middle;
+ width: 100%;
+ height: 22px;
+}
+.jewel.checkbox input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ width: 22px;
+ height: 22px;
+ line-height: 22px;
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
+}
+.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763,
-290)'><g transform='translate(760, 285)'><polygon fill='#3CADF1' points='3 13
9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
+ background-repeat: no-repeat;
+ background-size: 90%;
+ background-position: center;
+ background-attachment: fixed;
+}
+.jewel.checkbox input:focus {
+ outline: none;
+ border: 1px solid #0f88d1;
+}
+.jewel.checkbox input[disabled] {
+ cursor: unset;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+}
+.jewel.checkbox input[disabled] + span {
+ cursor: unset;
+ color: #c6c6c6;
+}
+.jewel.checkbox input[disabled]:checked {
+ border: 1px solid #c6c6c6;
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763,
-290)'><g transform='translate(760, 285)'><polygon fill='lightgray' points='3
13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #F9F9F9;
+ background-size: 90%;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+}
+.jewel.checkbox span {
+ cursor: pointer;
+ position: absolute;
+ margin: 0;
+ padding-left: 6px;
+ font-size: 16px;
+ line-height: 22px;
+}
+
+.jewel.label {
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+}
+
+.jewel.radiobutton {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ vertical-align: middle;
+ width: 100%;
+ height: 22px;
+}
+.jewel.radiobutton input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ width: 22px;
+ height: 22px;
+ line-height: 22px;
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 50%;
+}
+.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616,
-350)'><g transform='translate(611, 345)'><circle fill='#3CADF1' cx='11'
cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
+ background-repeat: no-repeat;
+ background-size: 60%;
+ background-position: center;
+ background-attachment: fixed;
+}
+.jewel.radiobutton input:focus {
+ outline: none;
+ border: 1px solid #0f88d1;
+}
+.jewel.radiobutton input[disabled] {
+ cursor: unset;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+}
+.jewel.radiobutton input[disabled] + span {
+ cursor: unset;
+ color: #c6c6c6;
+}
+.jewel.radiobutton input[disabled]:checked {
+ border: 1px solid #c6c6c6;
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616,
-350)'><g transform='translate(611, 345)'><circle fill='lightgray' cx='11'
cy='11' r='6'></circle></g></g></svg>"), #F9F9F9;
+ background-size: 60%;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+}
+.jewel.radiobutton span {
+ cursor: pointer;
+ position: absolute;
+ margin: 0;
+ padding-left: 6px;
+ font-size: 16px;
+ line-height: 22px;
+}
+
+.jewel.slider input {
+ -webkit-appearance: none;
+ width: 100%;
+ height: 15px;
+ border-radius: 5px;
+ background: #d3d3d3;
+ outline: none;
+ opacity: 0.7;
+ -webkit-transition: 0.2s;
+ transition: opacity 0.2s;
+}
+.jewel.slider input:hover {
+ opacity: 1;
+}
+.jewel.slider input:focus {
+ outline: none;
+}
+.jewel.slider input::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ background: #3CADF1;
+ cursor: pointer;
+}
+.jewel.slider input::-moz-range-thumb {
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ background: #3CADF1;
+ cursor: pointer;
+}
+
+.jewel.textbutton {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ 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: #808080;
+ text-transform: uppercase;
+ text-decoration: none;
+}
+.jewel.textbutton:hover {
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
+}
+.jewel.textbutton:active {
+ 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 {
+ outline: none;
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+}
+.jewel.textbutton[disabled] {
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #c6c6c6;
+ box-shadow: none;
+ cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
+}
+
+.jewel.textbutton.primary {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ border: 1px solid #0f88d1;
+ background: linear-gradient(#54b7f3, #24a3ef);
+ box-shadow: inset 0 1px 0 #9bd5f8;
+ border-radius: 3px;
+ 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 {
+ border: 1px solid #0d79ba;
+ background: linear-gradient(#3CADF1, #1198e9);
+}
+.jewel.textbutton.primary:active {
+ border: 1px solid #0a5a8a;
+ background: linear-gradient(#1198e9, #0d79ba);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.textbutton.primary:focus {
+ outline: none;
+ border: 1px solid #0f88d1;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+}
+.jewel.textbutton.primary[disabled] {
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #c6c6c6;
+ box-shadow: none;
+ cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
+}
+
+.jewel.textbutton.secondary {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ border: 1px solid #be390e;
+ background: linear-gradient(#f16c42, #ed4812);
+ box-shadow: inset 0 1px 0 #f6a389;
+ border-radius: 3px;
+ 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 {
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
+}
+.jewel.textbutton.secondary:active {
+ border: 1px solid #772409;
+ background: linear-gradient(#d64010, #a6320d);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.textbutton.secondary:focus {
+ outline: none;
+ border: 1px solid #be390e;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+}
+.jewel.textbutton.secondary[disabled] {
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #c6c6c6;
+ box-shadow: none;
+ cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
+}
+
+.jewel.textbutton.emphasized {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ border: 1px solid #277b32;
+ background: linear-gradient(#45c354, #34a241);
+ box-shadow: inset 0 1px 0 #7fd68a;
+ border-radius: 3px;
+ 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 {
+ border: 1px solid #21682a;
+ background: linear-gradient(#3AB549, #2e8e39);
+}
+.jewel.textbutton.emphasized:active {
+ border: 1px solid #15411a;
+ background: linear-gradient(#2e8e39, #21682a);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.textbutton.emphasized:focus {
+ outline: none;
+ border: 1px solid #277b32;
+ box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+}
+.jewel.textbutton.emphasized[disabled] {
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #c6c6c6;
+ box-shadow: none;
+ cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
+}
+
+.jewel.textfield {
+ position: relative;
+ display: inline-flex;
+}
+.jewel.textfield 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: #808080;
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textfield input:focus {
+ border: 1px solid #0f88d1;
+}
+.jewel.textfield input::placeholder {
+ color: #a6a6a6;
+}
+.jewel.textfield input[disabled] {
+ cursor: unset;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
+ color: #c6c6c6;
+}
+.jewel.textfield input[disabled]::placeholder {
+ color: #c6c6c6;
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
b/frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
deleted file mode 100644
index 32894c4..0000000
--- a/frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
+++ /dev/null
@@ -1,271 +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 j "library://ns.apache.org/royale/jewel";
-@namespace "http://www.w3.org/1999/xhtml";;
-.royale *, .royale *:before, .royale *:after {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.royale {
- padding: 10px;
- margin: 10px;
-}
-
-/**
- * Jewel Button
- */
-.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover
{
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- 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);
-}
-.jewel.button:hover {
- background-color: rgba(15, 15, 15, 0.3);
-}
-.jewel.button:active {
- background-color: rgba(0, 0, 0, 0.3);
-}
-.jewel.button:focus {
- outline: 0;
-}
-.jewel.button[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.button.primary {
- background-color: #006CEB;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.button.primary:hover {
- background-color: #0b7bff;
-}
-.jewel.button.primary:active {
- background-color: #005ecc;
-}
-.jewel.button.primary:focus {
- outline: 0;
-}
-.jewel.button.primary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.button.secondary {
- background-color: #011833;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.button.secondary:hover {
- background-color: #022651;
-}
-.jewel.button.secondary:active {
- background-color: #000a15;
-}
-.jewel.button.secondary:focus {
- outline: 0;
-}
-.jewel.button.secondary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.button.emphasized {
- background-color: #1FD348;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.button.emphasized:hover {
- background-color: #30e158;
-}
-.jewel.button.emphasized:active {
- background-color: #1bb83f;
-}
-.jewel.button.emphasized:focus {
- outline: 0;
-}
-.jewel.button.emphasized[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-/**
- * Jewel TextButton
- */
-.jewel.textbutton, .jewel.textbutton:hover {
- /* TextField */
- font-family: "Lato", sans-serif;
- font-style: bold;
- font-size: 0.75rem;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton [disabled] {
- text-shadow: unset;
-}
-
-.jewel.textbutton {
- background-color: rgba(0, 0, 0, 0.3);
- transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.4);
-}
-.jewel.textbutton:hover {
- background-color: rgba(15, 15, 15, 0.3);
-}
-.jewel.textbutton:active {
- background-color: rgba(0, 0, 0, 0.3);
-}
-.jewel.textbutton:focus {
- outline: 0;
-}
-.jewel.textbutton[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.textbutton.primary {
- background-color: #006CEB;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.textbutton.primary:hover {
- background-color: #0b7bff;
-}
-.jewel.textbutton.primary:active {
- background-color: #005ecc;
-}
-.jewel.textbutton.primary:focus {
- outline: 0;
-}
-.jewel.textbutton.primary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.textbutton.secondary {
- background-color: #011833;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.textbutton.secondary:hover {
- background-color: #022651;
-}
-.jewel.textbutton.secondary:active {
- background-color: #000a15;
-}
-.jewel.textbutton.secondary:focus {
- outline: 0;
-}
-.jewel.textbutton.secondary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.textbutton.emphasized {
- background-color: #1FD348;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.textbutton.emphasized:hover {
- background-color: #30e158;
-}
-.jewel.textbutton.emphasized:active {
- background-color: #1bb83f;
-}
-.jewel.textbutton.emphasized:focus {
- outline: 0;
-}
-.jewel.textbutton.emphasized[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-/**
- * Jewel Label
- */
-.jewel.label {
- font-family: "Lato", sans-serif;
- font-size: 0.75rem;
-}
-
-/**
- * Jewel TextField
- */
-TextField {
- position: relative;
- display: inline-block;
- box-sizing: border-box;
- width: 300px;
- max-width: 100%;
- margin: 0;
-}
-
-.vTextField--input {
- font-size: 16px;
- font-family: "Lato", sans-serif;
- border: none;
- border-bottom: 2px solid;
- border-bottom-color: #ff0000;
- display: block;
- margin: 0;
- padding: 4 0;
- width: 100px;
- background: transparent;
- text-align: left;
- color: inherit;
- outline: none;
-}
-
-.vTextField--label {
- bottom: 0;
- color: #ff0000;
- font-size: 13px;
- left: 0;
- right: 0;
- pointer-events: none;
- position: absolute;
- display: block;
- width: 100%;
- overflow: hidden;
- white-space: nowrap;
- text-align: left;
-}
-
-/*# sourceMappingURL=royale-jewel-blue.css.map */
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
index febf662..f0a1623 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
@@ -25,8 +25,28 @@
-moz-box-sizing: border-box
-webkit-box-sizing: border-box
box-sizing: border-box
- //fonts:
ClassReference("org.apache.royale.jewel.JewelBlueThemeFontInject")
+
+j|Application
+ font:
+ family: $font-stack
+ color: $default-font-color
-.royale
- padding: 10px
- margin: 10px
+h1
+ font-size: 22px
+
+h2
+ font-size: 19px
+
+h3
+ font-size: 17px
+
+h4
+ font-size: 15px
+
+span
+ font-size: 14px
+
+div
+ font-size: 14px
+ white-space: normal
+ word-wrap: break-word
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
index f4e7302..a0a4045 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
@@ -17,24 +17,12 @@
//
////////////////////////////////////////////////////////////////////////////////
-=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
+
+=appear($val)
+ -webkit-appearance: $val
+ -moz-appearance: $val
+ -o-appearance: $val
+ appearance: $val
//=trans($val...)
// -webkit-transition: $val
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
index 3a6b64b..974be28 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
@@ -17,16 +17,53 @@
//
////////////////////////////////////////////////////////////////////////////////
+// CONSTANTS
+// 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
+$font-theme-color: #FFFFFF
+
+$light-color: #d9d9d9
+$font-light-color: #808080
+
+$dark-color: #666666
+$font-dark-color: #FFFFFF
+
+//Theme Style (Flat or Gradient)
+$flat: false
+$dark: false
+$transitions-enable: false
+$transition-duration: .3s
+$transition-timing: easein
+
+// FONTS
$font-stack: 'Lato', sans-serif
-$font-size: 0.75rem
+$font-size: 14px//0.75rem
+
+// VARIABLES
+$default-color: $light-color
+@if $dark
+ $default-color: $dark-color
+
+$primary-color: $blue
+$secondary-color: $topaz
+$emphasized-color: $green
-// Common Colors
-$white: rgba(white,.9)
-$disabled-color: #CCCCCC
-$font-disabled-color: #888888
+$default-font-color: $font-light-color
+@if $dark
+ $default-font-color: $font-dark-color
-// Button variables
-$button-min-width: 74px !default
+$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/_blue-color-palette.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_alert.sass
similarity index 84%
rename from
frameworks/themes/JewelBlueTheme/src/main/sass/_blue-color-palette.sass
rename to frameworks/themes/JewelBlueTheme/src/main/sass/components/_alert.sass
index 3bdf08e..a4257b5 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_blue-color-palette.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_alert.sass
@@ -16,11 +16,9 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,.3)
-$primary-color: #006CEB
-$secondary-color: #011833
-$emphasized-color: #1FD348
-$default-font-color: rgba(0, 0, 0, .4)
-$font-color: white
\ No newline at end of file
+// Jewel Alert
+
+// Alert variables
+
+.jewel.alert
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
index d04d186..7824b40 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
@@ -17,57 +17,79 @@
//
////////////////////////////////////////////////////////////////////////////////
-/**
- * Jewel Button
- */
-%button-def
+// Jewel Button
+
+// Button variables
+$button-margin: 0 !default
+$button-padding: 8px !default
+$button-min-height: 34px !default
+$button-min-width: 34px !default
+
+$button-border-radius: 3px
+
+=button-theme($button-color)
cursor: pointer
-
display: inline-block
- margin: 0 //1rem
- padding: 10px 16px //.938em 1.875em
- min-width: $button-min-width
- min-height: 34px
- /* 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)
+ margin: $button-margin //1rem
+ padding: $button-padding //.938em 1.875em
+
+ min-width: $button-min-width
+ min-height: $button-min-height
+
+ @if $flat
+ border: 0px solid
+ background: $button-color
+ @else
+ border: 1px solid darken($button-color, 15%)// .094em
+ background: linear-gradient(lighten($button-color, 5%),
darken($button-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($button-color, 20%) //0px 0px
0px 4px rgba($light-color,.3),
+ border-radius: $button-border-radius //.625em
+
+ @if $transitions-enable
+ transition:
+ duration: $transition-duration
+ timing-function: $transition-timing
+
+ &:hover
+ @if $flat
+ background: darken($button-color, 5%)
+ @else
+ border: 1px solid darken($button-color, 20%)// .094em
+ background: linear-gradient($button-color,
darken($button-color, 10%))
+
+ &:active
+ @if $flat
+ background: darken($button-color, 15%)
+ @else
+ border: 1px solid darken($button-color, 30%)// .094em
solid
+ background: linear-gradient(darken($button-color, 10%),
darken($button-color, 20%))
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+
+ &:focus
+ outline: none
+ @if $flat
+ border: 1px solid $button-color
+ box-shadow: inset 0px 0px 0px 1px
rgba(lighten($button-color, 50%), .5)
+ @else
+ border: 1px solid darken($button-color, 15%)
+ box-shadow: inset 0px 0px 0px 1px
rgba(lighten($button-color, 50%), .5), inset 0 1px 0
rgba(lighten($button-color, 55%), .6)
-.jewel.button, .jewel.button:hover
- @extend %button-def
+ &[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)
-
-
-//SVGs
-//border:1px; /*without this svg shows scaled and bigger*/
-//border-image-source: url(assets/jewel-button.svg) ;
-//border-image-slice: 4;
-//border-image-width: 4;
-
-//background-image: linear-gradient(#3BB0FF, #1E36FA);
-
-//background-color: #006CEB;
-//background-size: cover;
-//background-repeat: no-repeat;
-//background-clip: padding-box;
-
-//background: url(assets/4slicewithpattern.svg);
-//background-size: cover;
-//width: fit-content;
-//height: fit-content;
+ +button-theme($emphasized-color)
-//.button:active
-//box-shadow: #E6431D 0 1px 0 inset;
-//text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_checkbox.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_checkbox.sass
new file mode 100644
index 0000000..a52e126
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_checkbox.sass
@@ -0,0 +1,105 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel CheckBox
+
+// CheckBox variables
+$checkbox-button-size: 22px
+$checkbox-border-radius: 3px
+$checkbox-label-separation: 6px
+$checkbox-label-font-size: 16px
+
+.jewel.checkbox
+ //cursor: pointer
+ display: inline-block
+
+ margin: 0
+ padding: 0
+
+ position: relative
+ vertical-align: middle
+
+ width: 100%
+ height: $checkbox-button-size
+
+ // -- INPUT
+ input
+ +appear(none)
+ cursor: pointer
+ display: inline-block
+
+ margin: 0
+ padding: 0
+
+ width: $checkbox-button-size
+ height: $checkbox-button-size
+
+ line-height: $checkbox-button-size
+
+ @if $flat
+ border: 0px solid
+ background: $default-color
+ @else
+ background: linear-gradient(lighten($default-color, 15%),
lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ border-radius: $checkbox-border-radius
+
+ &:checked, &:checked:active
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763,
-290)'><g transform='translate(760, 285)'><polygon fill='#{$primary-color}'
points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"),
lighten($primary-color, 25%)
+ background-repeat: no-repeat
+ background-size: 90%
+ background-position: center
+ background-attachment: fixed
+ // @if $flat
+ // background: lighten($primary-color, 25%)
+ // @else
+ // border: 1px solid darken($primary-color, 15%)
+
+ &:focus
+ outline: none
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
+
+ &[disabled]
+ cursor: unset
+ border: 1px solid darken($disabled-color, 20%)
+ background: $disabled-color
+
+ & + span
+ cursor: unset
+ color: darken($disabled-color, 20%)
+
+ &:checked
+ border: 1px solid darken($disabled-color, 20%)
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16
13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon
fill='#{darken($disabled-color, 15%)}' points='3 13 9 18 19 7 16 5 9 13 6
10'></polygon></g></g></svg>"), $disabled-color
+ background-size: 90%
+ background-position: center
+ background-repeat: no-repeat
+ background-attachment: fixed
+
+ // -- LABEL
+ span
+ cursor: pointer
+ position: absolute
+ margin: 0
+ padding-left: $checkbox-label-separation
+ font-size: $checkbox-label-font-size
+ line-height: $checkbox-button-size
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_controlbar.sass
similarity index 86%
copy from frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
copy to
frameworks/themes/JewelBlueTheme/src/main/sass/components/_controlbar.sass
index 63b60c9..49bc0db 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_controlbar.sass
@@ -17,11 +17,8 @@
//
////////////////////////////////////////////////////////////////////////////////
-/**
- * Jewel Label
- */
-.jewel.label
- //IBeadView:
ClassReference("org.apache.royale.html.beads.TextFieldView")
- font:
- family: $font-stack
- size: $font-size
\ No newline at end of file
+// Jewel ControlBar
+
+// ControlBar variables
+
+.jewel.controlbar
\ No newline at end of file
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
index 63b60c9..7887e00 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
@@ -17,11 +17,11 @@
//
////////////////////////////////////////////////////////////////////////////////
-/**
- * Jewel Label
- */
-.jewel.label
+j|Label
//IBeadView:
ClassReference("org.apache.royale.html.beads.TextFieldView")
+ //IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.LabelViewBead")
+
+.jewel.label
font:
family: $font-stack
size: $font-size
\ No newline at end of file
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_radiobutton.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_radiobutton.sass
new file mode 100644
index 0000000..a7b4ff0
--- /dev/null
+++
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_radiobutton.sass
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel RadioButton
+
+// RadioButton variables
+$radiobutton-button-size: 22px
+$radiobutton-border-radius: 50%
+$radiobutton-label-separation: 6px
+$radiobutton-label-font-size: 16px
+
+.jewel.radiobutton
+ //cursor: pointer
+ display: inline-block
+
+ margin: 0
+ padding: 0
+
+ position: relative
+ vertical-align: middle
+
+ width: 100%
+ height: $radiobutton-button-size
+
+ // -- INPUT
+ input
+ +appear(none)
+ cursor: pointer
+ display: inline-block
+
+ margin: 0
+ padding: 0
+
+ width: $radiobutton-button-size
+ height: $radiobutton-button-size
+
+ line-height: $radiobutton-button-size
+
+ @if $flat
+ border: 0px solid
+ background: $default-color
+ @else
+ background: linear-gradient(lighten($default-color, 15%),
lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ border-radius: $radiobutton-border-radius
+
+ &:checked, &:checked:active
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616,
-350)'><g transform='translate(611, 345)'><circle fill='#{$primary-color}'
cx='11' cy='11' r='6'></circle></g></g></svg>"), lighten($primary-color, 25%)
+ background-repeat: no-repeat
+ background-size: 60%
+ background-position: center
+ background-attachment: fixed
+
+ &:focus
+ outline: none
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
+
+ &[disabled]
+ cursor: unset
+ border: 1px solid darken($disabled-color, 20%)
+ background: $disabled-color
+
+ & + span
+ cursor: unset
+ color: darken($disabled-color, 20%)
+
+ &:checked
+ border: 1px solid darken($disabled-color, 20%)
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12
12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle
fill='#{darken($disabled-color, 15%)}' cx='11' cy='11'
r='6'></circle></g></g></svg>"), $disabled-color
+ background-size: 60%
+ background-position: center
+ background-repeat: no-repeat
+ background-attachment: fixed
+
+ // -- LABEL
+ span
+ cursor: pointer
+ position: absolute
+ margin: 0
+ padding-left: $radiobutton-label-separation
+ font-size: $radiobutton-label-font-size
+ line-height: $radiobutton-button-size
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_slider.sass
similarity index 56%
copy from frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/components/_slider.sass
index 3a6b64b..115df2c 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_slider.sass
@@ -17,16 +17,37 @@
//
////////////////////////////////////////////////////////////////////////////////
-$font-stack: 'Lato', sans-serif
-$font-size: 0.75rem
+.jewel.slider
-// Common Colors
-$white: rgba(white,.9)
-$disabled-color: #CCCCCC
-$font-disabled-color: #888888
-
-// Button variables
-$button-min-width: 74px !default
+ input
+ -webkit-appearance: none
+ width: 100%
+ height: 15px
+ border-radius: 5px
+ background: #d3d3d3
+ outline: none
+ opacity: 0.7
+ -webkit-transition: .2s
+ transition: opacity .2s
+ &:hover
+ opacity: 1
+ &:focus
+ outline: none
+ &::-webkit-slider-thumb
+ -webkit-appearance: none
+ appearance: none
+ width: 15px
+ height: 15px
+ border-radius: 50%
+ background: $primary-color
+ cursor: pointer
+
+ &::-moz-range-thumb
+ width: 15px
+ height: 15px
+ border-radius: 50%
+ background: $primary-color
+ cursor: pointer
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
index b02123a..70b9345 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
@@ -16,49 +16,92 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Jewel TextButton
- */
-%textbutton-def
- @extend %button-def
- /* TextField */
+
+// Jewel TextButton
+
+// TextButton variables
+$textbutton-margin: 0 !default
+$textbutton-padding: 10px 16px !default
+$textbutton-min-height: 34px !default
+$textbutton-min-width: 74px !default
+
+=textbutton-theme($textbutton-color, $text-color)
+ cursor: pointer
+ display: inline-block
+
+ margin: $textbutton-margin //1rem
+ padding: $textbutton-padding //.938em 1.875em
+
+ min-width: $textbutton-min-width
+ min-height: $textbutton-min-height
+
+ @if $flat
+ border: 0px solid
+ background: $textbutton-color
+ @else
+ border: 1px solid darken($textbutton-color, 15%)// .094em solid
+ background: linear-gradient(lighten($textbutton-color, 5%),
darken($textbutton-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($textbutton-color, 20%)
+ border-radius: $button-border-radius //.625em
+
+ @if $transitions-enable
+ transition:
+ duration: $transition-duration
+ timing-function: $transition-timing
+
font:
family: $font-stack
- style: bold
size: $font-size
- //+trans(0.2s ease-in-out)
+ weight: bold
+ color: $text-color
text:
transform: uppercase
decoration: none
- //shadow: 0 .063em rgba(black,.3)
- [disabled]
+ @if not $flat and $text-color == $font-theme-color
+ shadow: 0 1px 0 darken($text-color, 15%) //0 .063em
+
+ &:hover
+ @if $flat
+ background: darken($textbutton-color, 5%)
+ @else
+ border: 1px solid darken($textbutton-color, 20%)//
.094em solid
+ background: linear-gradient($textbutton-color,
darken($textbutton-color, 10%))
+ &:active
+ @if $flat
+ background: darken($textbutton-color, 15%)
+ @else
+ border: 1px solid darken($textbutton-color, 30%)//
.094em solid
+ background: linear-gradient(darken($textbutton-color,
10%), darken($textbutton-color, 20%))
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+
+ &:focus
+ outline: none
+ @if $flat
+ border: 1px solid $textbutton-color
+ box-shadow: inset 0px 0px 0px 1px
rgba(lighten($textbutton-color, 50%), .5)
+ @else
+ border: 1px solid darken($textbutton-color, 15%)
+ box-shadow: inset 0px 0px 0px 1px
rgba(lighten($textbutton-color, 50%), .5), inset 0 1px 0
rgba(lighten($textbutton-color, 55%), .6)
+
+ &[disabled]
+ border: 1px solid darken($disabled-color, 20%)// .094em solid
+ background: $disabled-color
+ color: darken($disabled-color, 20%)
+ 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-theme-color)
.jewel.textbutton.secondary
- +button-theme($secondary-color, $font-color)
+ +textbutton-theme($secondary-color, $font-theme-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-theme-color)
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
index 84b696c..3e04d9a 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
@@ -17,51 +17,85 @@
//
////////////////////////////////////////////////////////////////////////////////
-/**
- * Jewel TextField
- */
-TextField
+// Jewel Textfield
+
+// Textfield variables
+$textfield-margin: 0 !default
+$textfield-padding: .67em 1em !default
+//10px 16px
+$textfield-min-height: 34px !default
+$textfield-min-width: 74px !default
+
+$textfield-border-radius: 3px
+
+=textfield-theme($textfield-text-color)
position: relative
- display: inline-block
- box-sizing: border-box
- width: 300px
- max-width: 100%
- margin: 0
+ display: inline-flex
+
+ input
+ margin: $textfield-margin
+ padding: $textfield-padding
+
+ 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: $font-stack
+ size: $font-size
+ weight: normal
+ color: $textfield-text-color
+
+ @if $flat
+ border: 0px solid
+ background: $default-color
+ @else
+ background: linear-gradient(lighten($default-color,
15%), lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ //box-shadow: none
+ border-radius: $textfield-border-radius
+
+ @if $transitions-enable
+ transition:
+ duration: $transition-duration
+ timing-function: $transition-timing
+
+ &:focus
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
+
+ //&:hover
+ // padding: 5px;
+ // background-color: #DFDFDF;
-.vTextField--input
- font-size: 16px
- font-family: 'Lato', sans-serif
+ &::placeholder
+ color: lighten($textfield-text-color, 15%)
- border: none
- border-bottom: 2px solid
- border-bottom-color: #ff0000
- display: block
- margin: 0
- padding: 4 0
- width: 100px
- background: transparent
- text-align: left
- color: inherit
- outline: none
+ &[disabled]
+ cursor: unset
+ border: 1px solid darken($disabled-color, 20%)
+ background: $disabled-color
+ box-shadow: none
+ color: darken($disabled-color, 20%)
+
+ &::placeholder
+ color: darken($disabled-color, 20%)
-.vTextField--label
- bottom: 0
- color: #ff0000
- font-size: 13px
- left: 0
- right: 0
- pointer-events: none
- position: absolute
- display: block
- width: 100%
- overflow: hidden
- white-space: nowrap
- text-align: left
+.jewel.textfield
+ @if $dark
+ +textfield-theme($font-dark-color)
+ @else
+ +textfield-theme($font-light-color)
-// padding: 5px;
-// border: solid 1px #666666;
-// border-radius: 6px;
-// color: #333333;
-//:hover
-// padding: 5px;
-// background-color: #DFDFDF;
+// .jewel.textfield.primary
+// @if $dark
+// +textfield-theme($primary-color, $font-dark-color)
+// @else
+// +textfield-theme($primary-color, $font-light-color)
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_titlebar.sass
similarity index 86%
copy from frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/components/_titlebar.sass
index 63b60c9..047d4d4 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_titlebar.sass
@@ -17,11 +17,8 @@
//
////////////////////////////////////////////////////////////////////////////////
-/**
- * Jewel Label
- */
-.jewel.label
- //IBeadView:
ClassReference("org.apache.royale.html.beads.TextFieldView")
- font:
- family: $font-stack
- size: $font-size
\ No newline at end of file
+// Jewel TitleBAr
+
+// TitleBar variables
+
+.jewel.titlebar
\ No newline at end of file
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/defaults.sass
similarity index 85%
rename from
frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
rename to frameworks/themes/JewelBlueTheme/src/main/sass/defaults.sass
index f92a6ae..b4f6a8f 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/defaults.sass
@@ -16,7 +16,6 @@
*/
// Variables
-@import "blue-color-palette"
@import "variables"
@import "mixins"
@import "functions"
@@ -25,7 +24,13 @@
@import "global"
// Components
+@import "components/alert"
@import "components/button"
-@import "components/textbutton"
+@import "components/checkbox"
+@import "components/controlbar"
@import "components/label"
+@import "components/radiobutton"
+@import "components/slider"
+@import "components/textbutton"
@import "components/textfield"
+@import "components/titlebar"
--
To stop receiving notification emails like this one, please contact
[email protected].
