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 2020/07/18 17:06:02 UTC
[royale-asjs] branch develop updated: jewel-text: starting fluid
text responsiveness to get fit apps in mobile devices.
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 09d9dd0 jewel-text: starting fluid text responsiveness to get fit apps in mobile devices.
09d9dd0 is described below
commit 09d9dd04e3f36eb5e4ff2433c394ccf553060530
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Jul 18 19:05:50 2020 +0200
jewel-text: starting fluid text responsiveness to get fit apps in mobile devices.
---
.../projects/Jewel/src/main/resources/defaults.css | 8 +--
.../projects/Jewel/src/main/sass/_variables.sass | 3 +-
.../JewelTheme/src/main/resources/defaults.css | 75 ++++++++++++++++++++++
.../JewelTheme/src/main/sass/_variables.sass | 1 +
.../src/main/sass/components-primary/_text.sass | 45 ++++++++++++-
5 files changed, 126 insertions(+), 6 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 00ec11b..df35bc0 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -1954,7 +1954,7 @@ j|Label {
width: 100%;
}
}
-@media (min-width: 1200px) {
+@media (min-width: 1600px) {
.layout.grid .widescreen-col-1-1 {
width: 100%;
}
@@ -2901,7 +2901,7 @@ j|Label {
width: calc(100% - 10px);
}
}
-@media (min-width: 1200px) {
+@media (min-width: 1600px) {
.layout.grid.gap .widescreen-col-1-1 {
width: calc(100% - 10px);
}
@@ -3210,7 +3210,7 @@ j|Label {
display: none !important;
}
}
-@media (min-width: 992px) and (max-width: 1199px) {
+@media (min-width: 992px) and (max-width: 1599px) {
.visible-desktop {
display: block !important;
}
@@ -3219,7 +3219,7 @@ j|Label {
display: none !important;
}
}
-@media (min-width: 1200px) {
+@media (min-width: 1600px) {
.visible-widescreen {
display: block !important;
}
diff --git a/frameworks/projects/Jewel/src/main/sass/_variables.sass b/frameworks/projects/Jewel/src/main/sass/_variables.sass
index 0ca169c..61b4a6e 100644
--- a/frameworks/projects/Jewel/src/main/sass/_variables.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_variables.sass
@@ -29,9 +29,10 @@ $phone: 0px
$tablet: 768px
$desktop: 992px
$widescreen: 1200px
+$full: 1600px
$devices: (phone: $phone, tablet: $tablet) !default
-$computers: (desktop: $desktop, widescreen: $widescreen) !default
+$computers: (desktop: $desktop, widescreen: $full) !default
$sizes: map-merge($devices, $computers)
$size-names: map-keys($sizes)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index b8ac749..8beba8e 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1358,6 +1358,81 @@ div {
font-size: 14px;
}
+@media (min-width: 992px) and (max-width: 1200px) {
+ .jewel {
+ font-size: 100%;
+ }
+
+ h1 {
+ font-size: 2em;
+ }
+
+ h2 {
+ font-size: 2em;
+ }
+
+ h3 {
+ font-size: 1.5em;
+ }
+
+ h4 {
+ font-size: 1.25em;
+ }
+
+ h5 {
+ font-size: 1em;
+ }
+}
+@media (min-width: 768px) and (max-width: 992px) {
+ .jewel {
+ font-size: 99%;
+ }
+
+ h1 {
+ font-size: 1.9em;
+ }
+
+ h2 {
+ font-size: 1.9em;
+ }
+
+ h3 {
+ font-size: 1.4em;
+ }
+
+ h4 {
+ font-size: 1.1em;
+ }
+
+ h5 {
+ font-size: 0.98em;
+ }
+}
+@media (min-width: 0px) and (max-width: 768px) {
+ .jewel {
+ font-size: 97%;
+ }
+
+ h1 {
+ font-size: 1.7em;
+ }
+
+ h2 {
+ font-size: 1.7em;
+ }
+
+ h3 {
+ font-size: 1.3em;
+ }
+
+ h4 {
+ font-size: 1em;
+ }
+
+ h5 {
+ font-size: 0.97em;
+ }
+}
.jewel.textinput {
font-weight: 400;
color: #808080;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 2d03134..1ca4ff1 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -22,6 +22,7 @@ $phone: 0px
$tablet: 768px
$desktop: 992px
$widescreen: 1200px
+$full: 1600px
// TRANSITIONS
$transitions-enable: false
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_text.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_text.sass
index 5be149b..76d8eb0 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_text.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_text.sass
@@ -73,4 +73,47 @@ span
font-size: 1em
div
- font-size: 14px
\ No newline at end of file
+ font-size: 14px
+
+@media (min-width: $desktop) and (max-width: $widescreen)
+ .jewel
+ font-size: 100%
+ h1
+ font-size: 2em
+ h2
+ font-size: 2em
+ h3
+ font-size: 1.5em
+ h4
+ font-size: 1.25em
+ h5
+ font-size: 1em
+
+
+@media (min-width: $tablet) and (max-width: $desktop)
+ .jewel
+ font-size: 99%
+ h1
+ font-size: 1.9em
+ h2
+ font-size: 1.9em
+ h3
+ font-size: 1.4em
+ h4
+ font-size: 1.1em
+ h5
+ font-size: .98em
+
+@media (min-width: $phone) and (max-width: $tablet)
+ .jewel
+ font-size: 97%
+ h1
+ font-size: 1.7em
+ h2
+ font-size: 1.7em
+ h3
+ font-size: 1.3em
+ h4
+ font-size: 1em
+ h5
+ font-size: .97em
\ No newline at end of file