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 2019/01/15 09:06:47 UTC
[royale-asjs] branch develop updated: make popup use themes
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 04cfb97 make popup use themes
04cfb97 is described below
commit 04cfb97347238d5e5e335d8a0e54f71511094a69
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jan 15 10:06:40 2019 +0100
make popup use themes
---
.../Jewel/src/main/sass/components/_popup.sass | 32 ++--------------------
.../src/main/sass/components-primary/_popup.sass | 26 ++++++++++++++++++
2 files changed, 28 insertions(+), 30 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_popup.sass b/frameworks/projects/Jewel/src/main/sass/components/_popup.sass
index 6d96943..a272e16 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_popup.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_popup.sass
@@ -21,8 +21,6 @@
// PopUp variables
$popup-content-margin-offset: 10px
-$popup-content-overlay-color: #000 !default
-$popup-content-overlay-opacity: .65 !default
.jewel.popup
display: inline-flex
@@ -42,8 +40,6 @@ $popup-content-overlay-opacity: .65 !default
z-index: 5
- // color: rgba(0, 0, 0, 0.8)
-
&::before
position: absolute
display: block
@@ -55,19 +51,9 @@ $popup-content-overlay-opacity: .65 !default
height: 100%
content: ""
- // opacity: 0
-
- background-color: rgba($popup-content-overlay-color, $popup-content-overlay-opacity)
- will-change: opacity
- transition: animation-standard(opacity, .4s)
-
.jewel.popupcontent
display: inline-flex
- border: 0px
- border-radius: 10px
- padding: 20px
- background: white
position: relative
transform: translate(-50%, 100%)
@@ -78,8 +64,7 @@ $popup-content-overlay-opacity: .65 !default
top: calc(100% - #{$popup-content-margin-offset})
left: 50%
touch-action: none
- box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7) !important
-
+
opacity: 0
&.open
@@ -105,24 +90,11 @@ $popup-content-overlay-opacity: .65 !default
@media (min-width: $desktop)
.popup-content
- // &::before
- // background-color: rgba($popup-content-overlay-color, 0)
.jewel.popupcontent
- // transform: translate(100%, 40%)
transform: translate(-50%, -60%)
- // transition: none
- box-shadow: none !important
-
+
&.open
.jewel.popupcontent
- //transform: translate(100%, 50%)
- // margin: auto
- // top: 0
- // bottom: 0
- // left: 0
- // right: 0
- // position: absolute
- // position: absolute
top: 50%
left: 50%
margin-right: -50%
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_popup.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_popup.sass
index 9e6e4da..de92923 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_popup.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_popup.sass
@@ -20,8 +20,34 @@
// Jewel PopUp
// PopUp variables
+$popup-content-overlay-color: #000 !default
+$popup-content-overlay-opacity: .65 !default
.jewel.popup
.popup-content
+ &::before
+
+ background-color: rgba($popup-content-overlay-color, $popup-content-overlay-opacity)
+ will-change: opacity
+ transition: animation-standard(opacity, .4s)
+
+ .jewel.popupcontent
+ border: 0px
+ border-radius: 10px
+ padding: 20px
+ background: white
+
+ box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7) !important
+
+ &.open
+
+ &::before
+
+ .jewel.popupcontent
+
+@media (min-width: $desktop)
+ .popup-content
+ .jewel.popupcontent
+ box-shadow: none !important
\ No newline at end of file