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 7d4d8b6 changes for alert and its theme, and more work on separation
in themes
7d4d8b6 is described below
commit 7d4d8b6d37ad026801b0ae7c6f0607338aefdbbe
Author: Carlos Rovira <[email protected]>
AuthorDate: Sat Mar 31 21:55:46 2018 +0200
changes for alert and its theme, and more work on separation in themes
---
.../src/main/royale/ButtonPlayGround.mxml | 2 +-
.../projects/Jewel/src/main/resources/defaults.css | 27 +-
.../main/royale/org/apache/royale/jewel/Alert.as | 4 +-
.../jewel/beads/views/AlertTitleBarView.mxml | 12 -
.../apache/royale/jewel/beads/views/AlertView.as | 1 -
.../Jewel/src/main/sass/components/_alert.sass | 94 +++++--
.../JewelBlueTheme/src/main/resources/defaults.css | 300 ++-------------------
.../JewelBlueTheme/src/main/sass/_global.sass | 30 ---
.../JewelBlueTheme/src/main/sass/_variables.sass | 2 +-
.../src/main/sass/components/_button.sass | 10 -
.../src/main/sass/components/_textbutton.sass | 8 -
.../JewelTheme/src/main/resources/defaults.css | 151 ++++++-----
.../src/main/sass/components/_alert.sass | 108 ++++++++
.../src/main/sass/components/_button.sass | 4 +-
.../src/main/sass/components/_textbutton.sass | 4 +-
15 files changed, 282 insertions(+), 475 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 4d71052..6facd75 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -29,7 +29,7 @@ limitations under the License.
private function showAlert(event:MouseEvent):void
{
- var alert:Alert = Alert.show("Are you sure ?",
"Alert Title", Alert.OK | Alert.CANCEL);
+ var alert:Alert = Alert.show("This is an Alert
component example that shows a label text and two buttons.", "Alert Example",
Alert.OK | Alert.CANCEL);
//alert.height = 450;
alert.addEventListener("close", onClose);
}
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 81d048a..f51bc13 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -44,10 +44,10 @@
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- min-width: 350px;
- min-height: 200px;
max-width: 100%;
max-height: 100%;
+ min-width: 350px;
+ min-height: 200px;
border: 0px solid;
border-radius: 3px;
box-shadow: 0px 6px 60px -10px rgba(112, 112, 112, 0.7);
@@ -56,40 +56,29 @@
.jewel.alert .jewel.titlebar {
padding: 14px 14px 0px 14px;
height: 50px;
+ color: #000000;
}
.jewel.alert .jewel.titlebar .jewel.label {
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .jewel.titlebar .closebutton {
- border: 0px;
- min-width: 16px;
- min-height: 16px;
- padding: 4px;
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14 14'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-829,
-278)'><g fill='#555555' transform='translate(825, 274)'><path
d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896 C11,13.05896
6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363 4,16.0506592
C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11 4,6.21037128
4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4.05688477 C6.2043
[...]
- background-repeat: no-repeat;
- background-attachment: fixed;
- box-shadow: none;
-}
-.jewel.alert .jewel.titlebar .closebutton:hover {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14 14'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-829,
-278)'><g fill='#777777' transform='translate(825, 274)'><path
d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896 C11,13.05896
6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363 4,16.0506592
C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11 4,6.21037128
4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4.05688477 C6.2043
[...]
-}
.jewel.alert .Group {
position: absolute;
- width: 100%;
+ padding: 14px;
top: 50px;
bottom: 50px;
+ width: 100%;
overflow-y: auto;
- padding: 14px;
}
.jewel.alert .Group .jewel.label {
+ white-space: normal;
+ color: #000000;
font-size: 1.1em;
+ font-weight: normal;
}
.jewel.alert .jewel.controlbar {
padding: 0px 14px 14px 14px;
position: absolute;
- left: 50%;
- transform: translate(-50%, 0%);
bottom: 0;
height: 50px;
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
index 37b1f5a..f8375f6 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
@@ -241,13 +241,13 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- static public function show(message:String, title:String="",
flags:uint=Alert.OK, parent:Object = null, modal:Boolean = true) : Alert
+ static public function show(message:String, title:String="",
flags:uint=Alert.OK, parent:Object = null, modal:Boolean = true,
showCloseButton:Boolean = false) : Alert
{
var alert:Alert = new Alert();
alert.message = message;
alert.title = title;
alert.flags = flags;
-
+
if(modal)
alert.showModal(parent);
else
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertTitleBarView.mxml
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertTitleBarView.mxml
index 8bd1ef3..46dcf28 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertTitleBarView.mxml
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertTitleBarView.mxml
@@ -32,15 +32,6 @@ limitations under the License.
<fx:Script>
<![CDATA[
import org.apache.royale.core.ITitleBarModel;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.events.CloseEvent;
-
- private function clickHandler():void
- {
- var newEvent:Event = new Event('close');
- //var closeEvent:CloseEvent = new CloseEvent("close", false,
false, buttonFlag);
- IEventDispatcher(_strand).dispatchEvent(newEvent)
- }
]]>
</fx:Script>
@@ -51,7 +42,4 @@ limitations under the License.
<j:Label id="titleLabel" text="{ITitleBarModel(model).title}"/>
- <j:Button id="closeButton" click="clickHandler()" className="closebutton"
- visible="{ITitleBarModel(model).showCloseButton}"/>
-
</js:MXMLBeadView>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
index 9c58e64..cb3133c 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
@@ -129,7 +129,6 @@ package org.apache.royale.jewel.beads.views
titleBar.addBead(new HorizontalLayoutSpaceBetween());
titleBar.addBead(new AlertTitleBarView());
titleBar.title = alertModel.title;
- //titleBar.showCloseButton = true;
IParent(_strand).addElement(titleBar);
// Text
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index 4635740..ffdfd22 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -17,6 +17,30 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel Alert
+
+// Alert variables
+$alert-padding: 14px
+$alert-min-width: 350px
+$alert-min-height: 200px
+$alert-header-height: 50px
+$alert-footer-height: 50px
+$alert-border-radius: 3px
+
+$alert-title-font-size: 1.9em
+$alert-title-font-weight: bold
+$alert-title-color: #000000
+
+$alert-label-font-size: 1.1em
+$alert-label-font-weight: normal
+$alert-label-color: #000000
+
+//$alert-close-button-size: 16px
+
+//$alert-control-bar-align: 'center'
+
+$alert-modal-opacity: .5
+
.jewel.alert
display: block
position: fixed
@@ -25,56 +49,68 @@
transform: translate(-50%, -50%)
margin: 0
padding: 0
- min-width: 350px
- min-height: 200px
max-width: 100%
max-height: 100%
+
+ min-width: $alert-min-width
+ min-height: $alert-min-height
+
border: 0px solid
- border-radius: 3px
+ border-radius: $alert-border-radius
box-shadow: 0px 6px 60px -10px rgba(112,112,112,0.7)
background-color: #FFFFFF
.jewel.titlebar
- padding: 14px 14px 0px 14px
- height: 50px
+ padding: $alert-padding $alert-padding 0px $alert-padding
+ height: $alert-header-height
+ color: $alert-title-color
.jewel.label
font:
- size: 1.9em
- weight: bold
-
- .closebutton
- border: 0px
- min-width: 16px
- min-height: 16px
- padding: 4px
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14 14'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-829,
-278)'><g fill='#555555' transform='translate(825, 274)'><path
d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896 C11,13.05896
6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363 4,16.0506592
C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11 4,6.21037128
4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4.056884 [...]
- background-repeat: no-repeat
- background-attachment: fixed
- box-shadow: none
-
- &:hover
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14
14' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-829, -278)'><g fill='#777777' transform='translate(825,
274)'><path d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896
C11,13.05896 6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363
4,16.0506592 C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11
4,6.21037128 4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4.05 [...]
+ size: $alert-title-font-size
+ weight: $alert-title-font-weight
+
+ // .closebutton
+ // border: 0px
+ // padding: 0px
+ // min-width: $alert-close-button-size
+ // min-height: $alert-close-button-size
+ // background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14
14' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-829, -278)'><g fill='#555555' transform='translate(825,
274)'><path d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896
C11,13.05896 6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363
4,16.0506592 C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11
4,6.21037128 4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4.056
[...]
+ // background-repeat: no-repeat
+ // background-attachment: fixed
+ // box-shadow: none
+
+ // &:hover
+ // background: url("data:image/svg+xml;utf8,<svg viewBox='0 0
14 14' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-829, -278)'><g fill='#777777' transform='translate(825,
274)'><path d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896
C11,13.05896 6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363
4,16.0506592 C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11
4,6.21037128 4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4 [...]
.Group
position: absolute
+ padding: $alert-padding
+ top: $alert-header-height
+ bottom: $alert-footer-height
width: 100%
- top: 50px
- bottom: 50px
overflow-y: auto
- padding: 14px
.jewel.label
+ white-space: normal
+ color: $alert-label-color
font:
- size: 1.1em
+ size: $alert-label-font-size
+ weight: $alert-label-font-weight
.jewel.controlbar
- padding: 0px 14px 14px 14px
+ padding: 0px $alert-padding $alert-padding $alert-padding
position: absolute
- left: 50%
- transform: translate(-50%, 0%)
bottom: 0
- height: 50px
+ height: $alert-footer-height
+
+ // @if $alert-control-bar-align == center
+ // left: 50%
+ // transform: translate(-50%, 0%)
+ // @else if $alert-control-bar-align == right
+ // right: 0
+ // @else if $alert-control-bar-align == left
+ // left: 0
> *:first-child
margin-left: 0px
@@ -82,7 +118,7 @@
margin-left: 6px
+ .backdrop
- background-color: rgba(0, 0, 0, .5)
+ background-color: rgba(0, 0, 0, $alert-modal-opacity)
j|Alert
IBeadModel:
ClassReference("org.apache.royale.html.beads.models.AlertModel")
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
index 66c696c..e864397 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
@@ -16,109 +16,6 @@
*/
@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;
@@ -126,24 +23,24 @@ div {
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: 1px solid #551654;
+ background: linear-gradient(#a62aa4, #7e207c);
+ box-shadow: inset 0 1px 0 #d24bcf;
border-radius: 3px;
}
.jewel.button.secondary:hover {
- border: 1px solid #a6320d;
- background: linear-gradient(#EF5A2A, #d64010);
+ border: 1px solid #411040;
+ background: linear-gradient(#922590, #691b68);
}
.jewel.button.secondary:active {
- border: 1px solid #772409;
- background: linear-gradient(#d64010, #a6320d);
+ border: 1px solid #180618;
+ background: linear-gradient(#691b68, #411040);
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);
+ border: 1px solid #551654;
+ box-shadow: inset 0px 0px 0px 1px rgba(240, 198, 240, 0.5), inset 0 1px 0
rgba(246, 218, 245, 0.6);
}
.jewel.button.secondary[disabled] {
border: 1px solid #c6c6c6;
@@ -152,39 +49,6 @@ div {
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;
@@ -348,91 +212,6 @@ div {
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;
@@ -440,9 +219,9 @@ div {
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: 1px solid #551654;
+ background: linear-gradient(#a62aa4, #7e207c);
+ box-shadow: inset 0 1px 0 #d24bcf;
border-radius: 3px;
font-family: "Lato", sans-serif;
font-size: 14px;
@@ -453,18 +232,18 @@ div {
shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.secondary:hover {
- border: 1px solid #a6320d;
- background: linear-gradient(#EF5A2A, #d64010);
+ border: 1px solid #411040;
+ background: linear-gradient(#922590, #691b68);
}
.jewel.textbutton.secondary:active {
- border: 1px solid #772409;
- background: linear-gradient(#d64010, #a6320d);
+ border: 1px solid #180618;
+ background: linear-gradient(#691b68, #411040);
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);
+ border: 1px solid #551654;
+ box-shadow: inset 0px 0px 0px 1px rgba(240, 198, 240, 0.5), inset 0 1px 0
rgba(246, 218, 245, 0.6);
}
.jewel.textbutton.secondary[disabled] {
border: 1px solid #c6c6c6;
@@ -476,49 +255,6 @@ div {
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;
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
index f0a1623..be93742 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
@@ -20,33 +20,3 @@
@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: $font-stack
- color: $default-font-color
-
-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/_variables.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
index 974be28..5b5fa04 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
@@ -56,7 +56,7 @@ $default-color: $light-color
$default-color: $dark-color
$primary-color: $blue
-$secondary-color: $topaz
+$secondary-color: $amethyst
$emphasized-color: $green
$default-font-color: $font-light-color
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
index 7824b40..aba1d66 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
@@ -81,15 +81,5 @@ $button-border-radius: 3px
box-shadow: none
cursor: unset
-.jewel.button
- +button-theme($default-color)
-
-.jewel.button.primary
- +button-theme($primary-color)
-
.jewel.button.secondary
+button-theme($secondary-color)
-
-.jewel.button.emphasized
- +button-theme($emphasized-color)
-
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
index 70b9345..02edd71 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
@@ -94,14 +94,6 @@ $textbutton-min-width: 74px !default
text:
shadow: unset
-.jewel.textbutton
- +textbutton-theme($default-color, $default-font-color)
-
-.jewel.textbutton.primary
- +textbutton-theme($primary-color, $font-theme-color)
.jewel.textbutton.secondary
+textbutton-theme($secondary-color, $font-theme-color)
-
-.jewel.textbutton.emphasized
- +textbutton-theme($emphasized-color, $font-theme-color)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 66c696c..5c08d9d 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -53,6 +53,81 @@ div {
word-wrap: break-word;
}
+.jewel.alert {
+ display: block;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ margin: 0;
+ padding: 0;
+ max-width: 100%;
+ max-height: 100%;
+ min-width: 420px;
+ min-height: 240px;
+ border: 0px solid;
+ border-radius: 3px;
+ box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.8);
+ background-color: #FFFFFF;
+}
+.jewel.alert .jewel.titlebar {
+ padding: 20px 20px 0px 20px;
+ height: 50px;
+ color: #0c69a2;
+}
+.jewel.alert .jewel.titlebar .jewel.label {
+ font-size: 1.9em;
+ font-weight: bold;
+}
+.jewel.alert .Group {
+ position: absolute;
+ padding: 20px;
+ top: 50px;
+ bottom: 80px;
+ width: 100%;
+ overflow-y: auto;
+}
+.jewel.alert .Group .jewel.label {
+ white-space: normal;
+ color: #808080;
+ font-size: 1.1em;
+ font-weight: normal;
+}
+.jewel.alert .jewel.controlbar {
+ border-top: 1px solid #b3b3b3;
+ background: linear-gradient(#e6e6e6, #cccccc);
+ box-shadow: inset 0 1px 0 white;
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ padding: 20px;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 80px;
+ display: flex;
+ justify-content: flex-end;
+}
+.jewel.alert .jewel.controlbar > * {
+ flex: 1 1 auto;
+}
+.jewel.alert + .backdrop {
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+j|Alert {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
+ IBeadController:
ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
+}
+
+@media -royale-swf {
+ j|Alert {
+ IBackgroundBead:
ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
+ IBorderBead:
ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
+ }
+}
.jewel.button {
cursor: pointer;
display: inline-block;
@@ -119,39 +194,6 @@ div {
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;
@@ -433,49 +475,6 @@ div {
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;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass
index a4257b5..2352aed 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass
@@ -20,5 +20,113 @@
// Jewel Alert
// Alert variables
+$alert-padding: 20px
+$alert-min-width: 420px
+$alert-min-height: 240px
+$alert-header-height: 50px
+$alert-footer-height: 80px
+$alert-border-radius: 3px
+
+$alert-title-font-size: 1.9em
+$alert-title-font-weight: bold
+$alert-title-color: darken($primary-color, 25%)
+
+$alert-label-font-size: 1.1em
+$alert-label-font-weight: normal
+$alert-label-color: $font-light-color
+
+$alert-control-bar-align: 'left'
+
+$alert-modal-opacity: .5
.jewel.alert
+ display: block
+ position: fixed
+ top: 50%
+ left: 50%
+ transform: translate(-50%, -50%)
+ margin: 0
+ padding: 0
+ max-width: 100%
+ max-height: 100%
+
+ min-width: $alert-min-width
+ min-height: $alert-min-height
+
+ border: 0px solid
+ border-radius: $alert-border-radius
+ box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.8)
+ background-color: #FFFFFF
+
+ .jewel.titlebar
+ padding: $alert-padding $alert-padding 0px $alert-padding
+ height: $alert-header-height
+ color: $alert-title-color
+
+ .jewel.label
+ font:
+ size: $alert-title-font-size
+ weight: $alert-title-font-weight
+
+ .Group
+ position: absolute
+ padding: $alert-padding
+ top: $alert-header-height
+ bottom: $alert-footer-height
+ width: 100%
+ overflow-y: auto
+
+ .jewel.label
+ white-space: normal
+ color: $alert-label-color
+ font:
+ size: $alert-label-font-size
+ weight: $alert-label-font-weight
+
+ .jewel.controlbar
+ @if $flat
+ border: 0px solid
+ background: $default-color
+ @else
+ border-top: 1px solid darken($default-color, 15%)
+ background: linear-gradient(lighten($default-color, 5%),
darken($default-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($default-color, 20%)
+ border-top-left-radius: 0px
+ border-top-right-radius: 0px
+ border-bottom-left-radius: $alert-border-radius
+ border-bottom-right-radius: $alert-border-radius
+
+ padding: $alert-padding
+ position: absolute
+ bottom: 0
+ width: 100%
+ height: $alert-footer-height
+
+ display: flex
+ justify-content: flex-end
+ // @if $alert-control-bar-align == 'center'
+ // left: 50%
+ // transform: translate(-50%, 0%)
+ // @else if $alert-control-bar-align == 'right'
+ // right: 0
+ // @else if $alert-control-bar-align == 'left'
+ // left: 0
+
+ // > *:first-child
+ // margin-left: 0px
+ > *
+ flex: 1 1 auto
+ //margin-left: 6px
+
+ + .backdrop
+ background-color: rgba(0, 0, 0, $alert-modal-opacity)
+
+j|Alert
+ IBeadModel:
ClassReference("org.apache.royale.html.beads.models.AlertModel")
+ IBeadController:
ClassReference("org.apache.royale.jewel.beads.controllers.AlertController")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView")
+
+@media -royale-swf
+ j|Alert
+ IBackgroundBead:
ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+ IBorderBead:
ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index ab78b51..c91d9cd 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -87,8 +87,8 @@ $button-border-radius: 3px
.jewel.button.primary
+button-theme($primary-color)
-.jewel.button.secondary
- +button-theme($secondary-color)
+//.jewel.button.secondary
+// +button-theme($secondary-color)
.jewel.button.emphasized
+button-theme($emphasized-color)
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index 70b9345..097860e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -100,8 +100,8 @@ $textbutton-min-width: 74px !default
.jewel.textbutton.primary
+textbutton-theme($primary-color, $font-theme-color)
-.jewel.textbutton.secondary
- +textbutton-theme($secondary-color, $font-theme-color)
+//.jewel.textbutton.secondary
+// +textbutton-theme($secondary-color, $font-theme-color)
.jewel.textbutton.emphasized
+textbutton-theme($emphasized-color, $font-theme-color)
--
To stop receiving notification emails like this one, please contact
[email protected].
