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 65082c3 more changes on Alert, and a bit refactor to
button/textbutton styles due to closeButton
65082c3 is described below
commit 65082c306afb713c3a7afaf3b5bae6c6dd153b6c
Author: Carlos Rovira <[email protected]>
AuthorDate: Thu Mar 29 09:55:50 2018 +0200
more changes on Alert, and a bit refactor to button/textbutton styles due
to closeButton
---
.../projects/Jewel/src/main/resources/defaults.css | 21 +++-
.../projects/Jewel/src/main/royale/JewelClasses.as | 1 -
.../royale/org/apache/royale/jewel/TitleBar.as | 87 +---------------
.../beads/measurements/TitleBarMeasurementBead.as | 109 ---------------------
.../apache/royale/jewel/beads/views/AlertView.as | 82 +++++-----------
.../royale/jewel/beads/views/TitleBarView.mxml | 22 ++---
.../Jewel/src/main/sass/components/_alert.sass | 21 +++-
.../src/main/sass/components/_controlbar.sass | 2 +-
.../Jewel/src/main/sass/components/_titlebar.sass | 5 +-
.../JewelTheme/src/main/resources/defaults.css | 16 +--
.../src/main/sass/components/_button.sass | 4 +-
.../src/main/sass/components/_textbutton.sass | 45 +++++----
12 files changed, 107 insertions(+), 308 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index c60a0b6..3e86f3f 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -44,11 +44,23 @@
border: 0px solid;
border-radius: 10px;
}
-.jewel.alert .jewel.titleBar {
+.jewel.alert .jewel.titlebar {
+ padding: 20px 20px 0px 20px;
+}
+.jewel.alert .jewel.titlebar .jewel.label {
font-size: 2em;
+ font-weight: bold;
+}
+.jewel.alert .jewel.titlebar .closebutton {
+ min-width: 24px;
+ min-height: 24px;
+ padding: 4px;
}
.jewel.alert .Group {
- padding: 20px;
+ padding: 10px 20px 20px 20px;
+}
+.jewel.alert .Group .jewel.label {
+ font-size: 1.5em;
}
.jewel.alert .jewel.controlbar {
display: flex;
@@ -83,7 +95,7 @@ j|Alert {
j|ControlBar {
IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
- IBeadLayout:
ClassReference("org.apache.royale.html.beads.layouts.HorizontalFlexLayout");
+ IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
}
@media -royale-swf {
@@ -147,7 +159,7 @@ j|TextField {
j|TitleBar {
IBeadModel:
ClassReference("org.apache.royale.html.beads.models.TitleBarModel");
- IMeasurementBead:
ClassReference("org.apache.royale.jewel.beads.measurements.TitleBarMeasurementBead");
+ IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.TitleBarView");
}
@@ -155,7 +167,6 @@ j|TitleBar {
j|TitleBar {
IBorderBead:
ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
IBackgroundBead:
ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- border: 1px solid #333333;
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index d498f59..35c5454 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -35,7 +35,6 @@ package
import org.apache.royale.jewel.beads.controllers.AlertController;
AlertController;
import org.apache.royale.jewel.beads.views.AlertView; AlertView;
import org.apache.royale.jewel.beads.views.TitleBarView; TitleBarView;
- import
org.apache.royale.jewel.beads.measurements.TitleBarMeasurementBead;
TitleBarMeasurementBead;
COMPILE::SWF
{
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as
index e165e8a..a9c7b57 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as
@@ -18,20 +18,11 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.Group;
- import org.apache.royale.core.IBead;
- import org.apache.royale.core.IBeadLayout;
- import org.apache.royale.core.IChrome;
- import org.apache.royale.core.ITitleBarModel;
+ import org.apache.royale.html.TitleBar;
import org.apache.royale.core.ValuesManager;
- import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.utils.MXMLDataInterpreter;
+ import org.apache.royale.events.Event;
- COMPILE::JS
- {
- import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.html.util.addElementToWrapper;
- }
-
/**
* The TitleBar class is a Container component that displays a title
and an
* optional close button. The TitleBar uses the following bead types:
@@ -49,7 +40,7 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public class TitleBar extends Group implements IChrome
+ public class TitleBar extends org.apache.royale.html.TitleBar
{
/**
* constructor.
@@ -65,75 +56,5 @@ package org.apache.royale.jewel
typeNames = "jewel titlebar";
}
-
- /**
- * The title string to display.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function get title():String
- {
- return ITitleBarModel(model).title;
- }
- public function set title(value:String):void
- {
- ITitleBarModel(model).title = value;
- }
-
- /**
- * The HTML title to display.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function get htmlTitle():String
- {
- return ITitleBarModel(model).htmlTitle;
- }
- public function set htmlTitle(value:String):void
- {
- ITitleBarModel(model).htmlTitle = value;
- }
-
- /**
- * Whether or not to show a org.apache.royale.html.Button that
indicates the component
- * may be closed.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function get showCloseButton():Boolean
- {
- return ITitleBarModel(model).showCloseButton;
- }
- public function set showCloseButton(value:Boolean):void
- {
- ITitleBarModel(model).showCloseButton = value;
- }
-
- /**
- * @private
- */
- override public function addedToParent():void
- {
- super.addedToParent();
- loadBeadFromValuesManager(IBeadLayout, "iBeadLayout",
this);
- }
-
- /**
- * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
- */
- COMPILE::JS
- override protected function createElement():WrappedHTMLElement
- {
- return addElementToWrapper(this,'div');
- }
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/measurements/TitleBarMeasurementBead.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/measurements/TitleBarMeasurementBead.as
deleted file mode 100644
index 1e14af0..0000000
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/measurements/TitleBarMeasurementBead.as
+++ /dev/null
@@ -1,109 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel.beads.measurements
-{
- import org.apache.royale.core.IMeasurementBead;
- import org.apache.royale.core.IStrand;
- import org.apache.royale.core.ValuesManager;
- import org.apache.royale.jewel.TitleBar;
- import org.apache.royale.jewel.beads.views.TitleBarView;
-
- /**
- * The TitleBarMeasurementBead class measures the overall size of a
- * org.apache.royale.jewel.TitleBar.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public class TitleBarMeasurementBead implements IMeasurementBead
- {
- /**
- * constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function TitleBarMeasurementBead()
- {
- }
-
- /**
- * The overall width of the org.apache.royale.html.TitleBar.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function get measuredWidth():Number
- {
- var mwidth:Number = 0;
- var titleBar:TitleBar = _strand as TitleBar;
- var titleView:TitleBarView =
_strand.getBeadByType(TitleBarView) as TitleBarView;
- var labelMeasure:IMeasurementBead =
titleView.titleLabel.measurementBead;
- mwidth = labelMeasure.measuredWidth;
- if( titleBar.showCloseButton ) {
- var buttonMeasure:IMeasurementBead =
titleView.closeButton.measurementBead;
- mwidth += buttonMeasure.measuredWidth;
- }
- return mwidth;
- }
-
- /**
- * The overall height of the org.apache.royale.html.TitleBar.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function get measuredHeight():Number
- {
- var mheight:Number = 0;
- var titleBar:TitleBar = _strand as TitleBar;
- var titleView:TitleBarView =
_strand.getBeadByType(TitleBarView) as TitleBarView;
- var labelMeasure:IMeasurementBead =
titleView.titleLabel.measurementBead;
- mheight = labelMeasure.measuredHeight;
- if( titleBar.showCloseButton ) {
- var buttonMeasure:IMeasurementBead =
titleView.closeButton.measurementBead;
- mheight =
Math.max(mheight,buttonMeasure.measuredHeight);
- }
- return mheight;
- }
-
- private var _strand:IStrand;
-
- /**
- * @copy org.apache.royale.core.IBead#strand
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function set strand(value:IStrand):void
- {
- _strand = value;
- }
- }
-}
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 04a2131..8719a27 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
@@ -18,10 +18,8 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.views
{
- import org.apache.royale.core.BeadViewBase;
import org.apache.royale.core.IAlertModel;
import org.apache.royale.core.IBead;
- import org.apache.royale.core.IBeadView;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.IParent;
import org.apache.royale.core.IStrand;
@@ -34,8 +32,6 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.events.MouseEvent;
import org.apache.royale.html.Group;
import org.apache.royale.html.beads.GroupView;
-
-
import org.apache.royale.jewel.Alert;
import org.apache.royale.jewel.Label;
import org.apache.royale.jewel.TextButton;
@@ -48,7 +44,6 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.html.beads.IBorderBead;
import org.apache.royale.core.IMeasurementBead;
import org.apache.royale.core.ValuesManager;
- import org.apache.royale.geom.Rectangle;
import org.apache.royale.utils.loadBeadFromValuesManager;
}
@@ -60,7 +55,7 @@ package org.apache.royale.jewel.beads.views
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public class AlertView extends GroupView
{
@@ -70,7 +65,7 @@ package org.apache.royale.jewel.beads.views
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public function AlertView()
{
@@ -94,7 +89,7 @@ package org.apache.royale.jewel.beads.views
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
override public function set strand(value:IStrand):void
{
@@ -132,7 +127,6 @@ package org.apache.royale.jewel.beads.views
if (alertModel.title)
{
titleBar = new TitleBar();
- //titleBar.height = 25;
titleBar.title = alertModel.title;
IParent(_strand).addElement(titleBar);
}
@@ -141,23 +135,13 @@ package org.apache.royale.jewel.beads.views
label.text = alertModel.message;
labelContent = new Group();
- labelContent.percentWidth = 100;
- labelContent.percentHeight = 100;
-
+ //labelContent.percentWidth = 100;
+ //labelContent.percentHeight = 100;
labelContent.addElement(label);
IParent(_strand).addElement(labelContent);
- /*COMPILE::JS
- {
- label.element.style["white-space"] = "unset";
- labelContent.element.style["minHeight"] =
"30px";
- controlBar.element.style["flex-direction"] =
"row";
- controlBar.element.style["justify-content"] =
"flex-end";
- controlBar.element.style["border"] = "none";
- controlBar.element.style["background-color"] =
"#FFFFFF";
- }*/
- IParent(_strand).addElement(controlBar);
+ IParent(_strand).addElement(controlBar);
COMPILE::SWF
{
@@ -178,61 +162,41 @@ package org.apache.royale.jewel.beads.views
}
var flags:uint = alertModel.flags;
- if( flags & Alert.OK )
- {
- okButton = new TextButton();
- okButton.text = alertModel.okLabel;
- okButton.addEventListener("click",handleOK);
- controlBar.addElement(okButton);
-
- /*COMPILE::JS
- {
- okButton.element.style["margin-left"] = "2px";
- okButton.element.style["margin-right"] = "2px";
- }*/
- }
- if( flags & Alert.CANCEL )
+ if( flags & Alert.CANCEL )
{
cancelButton = new TextButton();
cancelButton.text = alertModel.cancelLabel;
cancelButton.addEventListener("click",handleCancel);
controlBar.addElement(cancelButton);
-
- /*COMPILE::JS
- {
- cancelButton.element.style["margin-left"] = "2px";
- cancelButton.element.style["margin-right"] = "2px";
- }*/
}
- if( flags & Alert.YES )
- {
- yesButton = new TextButton();
- yesButton.text = alertModel.yesLabel;
- yesButton.addEventListener("click",handleYes);
- controlBar.addElement(yesButton);
+ if( flags & Alert.OK )
+ {
+ okButton = new TextButton();
+ okButton.text = alertModel.okLabel;
+ okButton.addEventListener("click",handleOK);
- /*COMPILE::JS
- {
- yesButton.element.style["margin-left"] = "2px";
- yesButton.element.style["margin-right"] = "2px";
- }*/
+ controlBar.addElement(okButton);
}
- if( flags & Alert.NO )
+
+ if( flags & Alert.NO )
{
noButton = new TextButton();
noButton.text = alertModel.noLabel;
noButton.addEventListener("click",handleNo);
controlBar.addElement(noButton);
+ }
- /*COMPILE::JS
- {
- noButton.element.style["margin-left"] = "2px";
- noButton.element.style["margin-right"] = "2px";
- }*/
+ if( flags & Alert.YES )
+ {
+ yesButton = new TextButton();
+ yesButton.text = alertModel.yesLabel;
+ yesButton.addEventListener("click",handleYes);
+
+ controlBar.addElement(yesButton);
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml
index debf93d..d5ddfcd 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml
@@ -18,26 +18,26 @@ limitations under the License.
-->
<!---
- The TitleBarView is the view for a Panel's TitleBar written in MXML
+ The TitleBarView is the view for a Jewel TitleBar written in MXML
@langversion 3.0
@playerversion Flash 10.2
@playerversion AIR 2.6
- @productversion Royale 0.0
+ @productversion Royale 0.9.3
-->
<js:MXMLBeadView xmlns:fx="http://ns.adobe.com/mxml/2009";
- xmlns:js="library://ns.apache.org/royale/basic">
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:j="library://ns.apache.org/royale/jewel">
<fx:Script>
<![CDATA[
- import org.apache.royale.jewel.TitleBar;
import org.apache.royale.core.ITitleBarModel;
import org.apache.royale.core.UIBase;
import org.apache.royale.events.Event;
private function clickHandler():void
{
- var newEvent:org.apache.royale.events.Event = new
org.apache.royale.events.Event('close');
+ var newEvent:Event = new Event('close');
UIBase(_strand).dispatchEvent(newEvent)
}
]]>
@@ -48,12 +48,8 @@ limitations under the License.
<js:LayoutChangeNotifier watchedProperty="{titleLabel.text}" />
</js:beads>
- <js:Label id="titleLabel" text="{ITitleBarModel(model).title}"
className="TitleBarTitle" >
- <js:style>
- <js:SimpleCSSStyles fontWeight="inherit" marginRight="5"
marginLeft="5" />
- </js:style>
- </js:Label>
- <js:CloseButton id="closeButton" click="clickHandler()"
className="TitleBarCloseButton"
- visible="{ITitleBarModel(model).showCloseButton}"/>
-
+ <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/sass/components/_alert.sass
b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index b4ea905..158303a 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -33,12 +33,25 @@
border: 0px solid
border-radius: 10px
- .jewel.titleBar
- font:
- size: 2em
+ .jewel.titlebar
+ padding: 20px 20px 0px 20px
+
+ .jewel.label
+ font:
+ size: 2em
+ weight: bold
+
+ .closebutton
+ min-width: 24px
+ min-height: 24px
+ padding: 4px
.Group
- padding: 20px
+ padding: 10px 20px 20px 20px
+
+ .jewel.label
+ font:
+ size: 1.5em
.jewel.controlbar
display: flex
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
b/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
index c832ea1..5ca8797 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
@@ -24,7 +24,7 @@
j|ControlBar
IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
- IBeadLayout:
ClassReference("org.apache.royale.html.beads.layouts.HorizontalFlexLayout")
+ IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
@media -royale-swf
j|ControlBar
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
b/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
index a3ce0db..ad90019 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
@@ -24,12 +24,11 @@
j|TitleBar
IBeadModel:
ClassReference("org.apache.royale.html.beads.models.TitleBarModel")
- IMeasurementBead:
ClassReference("org.apache.royale.jewel.beads.measurements.TitleBarMeasurementBead")
- //IBeadLayout:
ClassReference("org.apache.royale.html.beads.layouts.FlexibleFirstChildHorizontalLayout")
+ IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.TitleBarView")
@media -royale-swf
j|TitleBar
IBorderBead:
ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
IBackgroundBead:
ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
- border: 1px solid #333333
\ No newline at end of file
+ //border: 1px solid #333333
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index d32f737..b2e08e9 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -57,8 +57,8 @@ div {
cursor: pointer;
display: inline-block;
margin: 0;
- padding: 10px 16px;
- min-width: 74px;
+ padding: 8px;
+ min-width: 34px;
min-height: 34px;
border: 1px solid #b3b3b3;
background: linear-gradient(#e6e6e6, #cccccc);
@@ -90,8 +90,8 @@ div {
cursor: pointer;
display: inline-block;
margin: 0;
- padding: 10px 16px;
- min-width: 74px;
+ padding: 8px;
+ min-width: 34px;
min-height: 34px;
border: 1px solid #0f88d1;
background: linear-gradient(#54b7f3, #24a3ef);
@@ -123,8 +123,8 @@ div {
cursor: pointer;
display: inline-block;
margin: 0;
- padding: 10px 16px;
- min-width: 74px;
+ padding: 8px;
+ min-width: 34px;
min-height: 34px;
border: 1px solid #be390e;
background: linear-gradient(#f16c42, #ed4812);
@@ -156,8 +156,8 @@ div {
cursor: pointer;
display: inline-block;
margin: 0;
- padding: 10px 16px;
- min-width: 74px;
+ padding: 8px;
+ min-width: 34px;
min-height: 34px;
border: 1px solid #277b32;
background: linear-gradient(#45c354, #34a241);
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index fc7e11f..ab78b51 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -21,9 +21,9 @@
// Button variables
$button-margin: 0 !default
-$button-padding: 10px 16px !default
+$button-padding: 8px !default
$button-min-height: 34px !default
-$button-min-width: 74px !default
+$button-min-width: 34px !default
$button-border-radius: 3px
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index 1609be9..70b9345 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -18,25 +18,30 @@
////////////////////////////////////////////////////////////////////////////////
// Jewel TextButton
-// Note: Use Button variables
-=textbutton-theme($button-color, $text-color)
+// 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: $button-margin //1rem
- padding: $button-padding //.938em 1.875em
+ margin: $textbutton-margin //1rem
+ padding: $textbutton-padding //.938em 1.875em
- min-width: $button-min-width
- min-height: $button-min-height
+ min-width: $textbutton-min-width
+ min-height: $textbutton-min-height
@if $flat
border: 0px solid
- background: $button-color
+ background: $textbutton-color
@else
- border: 1px solid darken($button-color, 15%)// .094em solid
- background: linear-gradient(lighten($button-color, 5%),
darken($button-color, 5%))
- box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+ 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
@@ -57,26 +62,26 @@
&:hover
@if $flat
- background: darken($button-color, 5%)
+ background: darken($textbutton-color, 5%)
@else
- border: 1px solid darken($button-color, 20%)// .094em
solid
- background: linear-gradient($button-color,
darken($button-color, 10%))
+ border: 1px solid darken($textbutton-color, 20%)//
.094em solid
+ background: linear-gradient($textbutton-color,
darken($textbutton-color, 10%))
&:active
@if $flat
- background: darken($button-color, 15%)
+ background: darken($textbutton-color, 15%)
@else
- border: 1px solid darken($button-color, 30%)// .094em
solid
- background: linear-gradient(darken($button-color, 10%),
darken($button-color, 20%))
+ 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 $button-color
- box-shadow: inset 0px 0px 0px 1px
rgba(lighten($button-color, 50%), .5)
+ border: 1px solid $textbutton-color
+ box-shadow: inset 0px 0px 0px 1px
rgba(lighten($textbutton-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)
+ 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
--
To stop receiving notification emails like this one, please contact
[email protected].
