You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/06/03 12:45:38 UTC
[royale-asjs] branch develop updated: Jewel theme updates for Card
component and remove some temporal styles not needed now that we have a
Card component
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 2df15bb Jewel theme updates for Card component and remove some temporal styles not needed now that we have a Card component
2df15bb is described below
commit 2df15bb8bb550a355e28632b9d5c9f5a18889680
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Jun 3 14:45:34 2018 +0200
Jewel theme updates for Card component and remove some temporal styles not needed now that we have a Card component
---
.../JewelTheme/src/main/resources/defaults.css | 32 +++++-----
.../themes/JewelTheme/src/main/sass/_global.sass | 19 ------
.../_card.sass} | 47 +-------------
.../src/main/sass/components-primary/_alert.sass | 2 -
.../_card.sass} | 74 ++++++++--------------
.../_card.sass} | 47 +-------------
.../themes/JewelTheme/src/main/sass/defaults.sass | 3 +
7 files changed, 51 insertions(+), 173 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index a73d8e9..1490f0b 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -22,10 +22,6 @@ j|Application {
color: #808080;
}
-j|Application *, .royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
h1 {
font-size: 2em;
}
@@ -50,18 +46,7 @@ div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
-}
-
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
-}
-
.jewel.alert {
- display: block;
position: fixed;
top: 50%;
left: 50%;
@@ -110,7 +95,6 @@ div {
bottom: 0;
width: 100%;
height: 80px;
- display: flex;
justify-content: flex-end;
}
.jewel.alert .jewel.controlbar > *:first-child {
@@ -209,6 +193,22 @@ div {
text-shadow: unset;
}
+.jewel.card {
+ flex-direction: column;
+ min-width: 300px;
+ min-height: 100px;
+ font-size: 14px;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
+}
+
+j|Card {
+ gap: 10;
+}
+
.jewel.checkbox {
display: inline-block;
margin: 0;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index b7180cf..f713728 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -26,9 +26,6 @@ j|Application
family: $font-stack
color: $default-font-color
-j|Application *, .royale *, .royale *:before, .royale *:after
- box-sizing: border-box
-
h1
font-size: 2em
@@ -47,19 +44,3 @@ span
div
font-size: 14px
-
-//temporal
-.container
- @if $dark
- background: lighten($background-color, 10%)
- @else
- background: darken($background-color, 8%)
-
- border-radius: 10px
- padding: 20px
-
-
-// Firefox
-// remove dotted outline
-::-moz-focus-inner, ::-moz-focus-outer
- border: 0
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_card.sass
similarity index 59%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_card.sass
index b7180cf..6f19be4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_card.sass
@@ -17,49 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
+// Jewel Card
-j|Application
- background: $background-color
- font:
- family: $font-stack
- color: $default-font-color
-
-j|Application *, .royale *, .royale *:before, .royale *:after
- box-sizing: border-box
-
-h1
- font-size: 2em
-
-h2
- font-size: 1.5em
-
-h3
- font-size: 1.17em
-
-h4
- font-size: 15px
-
-span
- font-size: 14px
-
-div
- font-size: 14px
-
-
-//temporal
-.container
- @if $dark
- background: lighten($background-color, 10%)
- @else
- background: darken($background-color, 8%)
-
- border-radius: 10px
- padding: 20px
-
-
-// Firefox
-// remove dotted outline
-::-moz-focus-inner, ::-moz-focus-outer
- border: 0
\ No newline at end of file
+// Card variables
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
index 5ed5fdf..e6752fc 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
@@ -40,7 +40,6 @@ $alert-control-bar-align: 'left'
$alert-modal-opacity: .5
.jewel.alert
- display: block
position: fixed
top: 50%
@@ -102,7 +101,6 @@ $alert-modal-opacity: .5
width: 100%
height: $alert-footer-height
- display: flex
justify-content: flex-end
> *:first-child
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
similarity index 59%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
index b7180cf..2ec1ae9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
@@ -17,49 +17,31 @@
//
////////////////////////////////////////////////////////////////////////////////
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
-
-j|Application
- background: $background-color
- font:
- family: $font-stack
- color: $default-font-color
-
-j|Application *, .royale *, .royale *:before, .royale *:after
- box-sizing: border-box
-
-h1
- font-size: 2em
-
-h2
- font-size: 1.5em
-
-h3
- font-size: 1.17em
-
-h4
- font-size: 15px
-
-span
- font-size: 14px
-
-div
- font-size: 14px
-
-
-//temporal
-.container
- @if $dark
- background: lighten($background-color, 10%)
- @else
- background: darken($background-color, 8%)
-
- border-radius: 10px
- padding: 20px
-
-
-// Firefox
-// remove dotted outline
-::-moz-focus-inner, ::-moz-focus-outer
- border: 0
\ No newline at end of file
+// Jewel Card
+
+// Card variables
+.jewel.card
+ flex-direction: column
+
+ min-width: 300px
+ min-height: 100px
+
+ //overflow: hidden
+ //position: relative
+ //z-index: 1
+
+ font:
+ size: $font-size
+ weight: 400
+
+ @if $dark
+ background: lighten($background-color, 10%)
+ @else
+ background: darken($background-color, 8%)
+
+ border: 0px
+ border-radius: 10px
+ padding: 20px
+
+j|Card
+ gap: 10
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_card.sass
similarity index 59%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-secondary/_card.sass
index b7180cf..2a08931 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_card.sass
@@ -17,49 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
+// Jewel Card
-j|Application
- background: $background-color
- font:
- family: $font-stack
- color: $default-font-color
-
-j|Application *, .royale *, .royale *:before, .royale *:after
- box-sizing: border-box
-
-h1
- font-size: 2em
-
-h2
- font-size: 1.5em
-
-h3
- font-size: 1.17em
-
-h4
- font-size: 15px
-
-span
- font-size: 14px
-
-div
- font-size: 14px
-
-
-//temporal
-.container
- @if $dark
- background: lighten($background-color, 10%)
- @else
- background: darken($background-color, 8%)
-
- border-radius: 10px
- padding: 20px
-
-
-// Firefox
-// remove dotted outline
-::-moz-focus-inner, ::-moz-focus-outer
- border: 0
\ No newline at end of file
+// Card variables
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index f197bc8..9e34a61 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "components-primary/alert"
@import "components-primary/button"
+@import "components-primary/card"
@import "components-primary/checkbox"
@import "components-primary/controlbar"
@import "components-primary/dropdownlist"
@@ -41,6 +42,7 @@
@import "components-secondary/alert"
@import "components-secondary/button"
+@import "components-secondary/card"
@import "components-secondary/checkbox"
@import "components-secondary/controlbar"
@import "components-secondary/dropdownlist"
@@ -54,6 +56,7 @@
@import "components-emphasized/alert"
@import "components-emphasized/button"
+@import "components-emphasized/card"
@import "components-emphasized/checkbox"
@import "components-emphasized/controlbar"
@import "components-emphasized/dropdownlist"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.