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 <carlosrov...@apache.org> 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 carlosrov...@apache.org.