openrat-cms

OpenRat Content Management System
git clone http://git.code.weiherhei.de/openrat-cms.git
Log | Files | Refs | README

commit 208ee537b87ef3f8a1ba1fdb8790139c06800726
parent 1e419a055b010d94e4b9c4866c2806f7ba723087
Author: Jan Dankert <develop@jandankert.de>
Date:   Wed, 21 Apr 2021 21:41:28 +0200

New: Using transitions for dialog popup

Diffstat:
Mmodules/cms/ui/themes/default/style/openrat-dialog.less | 18++++++++++++++----
Mmodules/cms/ui/themes/default/style/openrat.css | 19++++++++++++++-----
Mmodules/cms/ui/themes/default/style/openrat.min.css | 2+-
3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/modules/cms/ui/themes/default/style/openrat-dialog.less b/modules/cms/ui/themes/default/style/openrat-dialog.less @@ -36,19 +36,29 @@ Basis-Style for Openrat. z-index: 2; top: 0; left: 0; - width:100%; + width:0; + opacity: 0; + visibility: hidden; + overflow: hidden; + display: flex; - display: none; + //display: none; height: 100%; flex-direction: row; &--is-open { - display: flex; + visibility: visible; + overflow-y: auto; + opacity: 1; + width:100%; + .or-dialog-filler { + width: 15%; + } } &-filler { height: 100%; - width: 12em; + width: 100%; opacity: 0.6; filter: blur(10em); diff --git a/modules/cms/ui/themes/default/style/openrat.css b/modules/cms/ui/themes/default/style/openrat.css @@ -141,17 +141,26 @@ Basis-Style for Openrat. z-index: 2; top: 0; left: 0; - width: 100%; - display: none; + width: 0; + opacity: 0; + visibility: hidden; + overflow: hidden; + display: flex; height: 100%; flex-direction: row; } .or-dialog--is-open { - display: flex; + visibility: visible; + overflow-y: auto; + opacity: 1; + width: 100%; +} +.or-dialog--is-open .or-dialog-filler { + width: 15%; } .or-dialog-filler { height: 100%; - width: 12em; + width: 100%; opacity: 0.6; filter: blur(10em); } @@ -176,7 +185,7 @@ Basis-Style for Openrat. .or-dialog-content .or-view { height: 100%; } -/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22mnt%5C%2Fdata%5C%2Fdankert%5C%2FEntwicklung%5C%2FProjekte%5C%2Fopenrat-cms%5C%2Fmodules%5C%2Fcms%5C%2Fui%5C%2Fthemes%5C%2Fdefault%5C%2Fstyle%5C%2Fopenrat-dialog.less%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3BAAgCI%2CGAAC%3BCAEC%3BCACA%3BCACA%3BCACA%3BCACA%3BCAEA%3BCACA%3BCACA%3B%3BAAEA%2CGAZD%2COAYE%3BCACC%3B%3BAAGF%2CGAhBD%2COAgBE%3BCACC%3BCACA%3BCACA%3BCACA%2CQAAQ%2CUAAR%3B%3BAAMA%3BCAAA%2CGA1BH%2COAgBE%3BEAOG%3B%3B%3BAAGF%2CGA1BH%2COAgBE%2COAUE%3BCACC%3BCACA%3BCACA%3BCACA%3BCACA%3B%3BAAIJ%2CGAnCD%2COAmCE%3BCAEG%3BCACA%3BCAMA%3BCAIA%3B%3BAAbJ%2CGAnCD%2COAmCE%2CQAeG%3BCACE%22%7D */ +/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22mnt%5C%2Fdata%5C%2Fdankert%5C%2FEntwicklung%5C%2FProjekte%5C%2Fopenrat-cms%5C%2Fmodules%5C%2Fcms%5C%2Fui%5C%2Fthemes%5C%2Fdefault%5C%2Fstyle%5C%2Fopenrat-dialog.less%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3BAAgCI%2CGAAC%3BCAEC%3BCACA%3BCACA%3BCACA%3BCACA%3BCACA%3BCACA%3BCACA%3BCACA%3BCAGA%3BCACA%3B%3BAAEA%2CGAhBD%2COAgBE%3BCACC%3BCACA%3BCACA%3BCACA%3B%3BAAJF%2CGAhBD%2COAgBE%2CSAKC%3BCACE%3B%3BAAIJ%2CGA1BD%2COA0BE%3BCACC%3BCACA%3BCACA%3BCACA%2CQAAQ%2CUAAR%3B%3BAAMA%3BCAAA%2CGApCH%2COA0BE%3BEAOG%3B%3B%3BAAGF%2CGApCH%2COA0BE%2COAUE%3BCACC%3BCACA%3BCACA%3BCACA%3BCACA%3B%3BAAIJ%2CGA7CD%2COA6CE%3BCAEG%3BCACA%3BCAMA%3BCAIA%3B%3BAAbJ%2CGA7CD%2COA6CE%2CQAeG%3BCACE%22%7D */ /* Include style: /default/style/openrat-diff */ .or-diff-line { text-align: right; diff --git a/modules/cms/ui/themes/default/style/openrat.min.css b/modules/cms/ui/themes/default/style/openrat.min.css @@ -1,7 +1,7 @@ .or-breadcrumb{margin-left: 0;margin-right: 0.5em}.or-breadcrumb > *{vertical-align: middle;display: inline;margin-right: 0.3em}@media only screen and (min-width: 100rem){.or-breadcrumb-parent{display: none}}.or-breadcrumb-path{display: none}@media only screen and (min-width: 100rem){.or-breadcrumb-path{display: inline}}.or-breadcrumb-text{font-weight: bold;width: 12em;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: inline-block}@media only screen and (max-width: 55rem){.or-breadcrumb-text{width: 5.5em}} .or-button{z-index: 4}.or-button-knob{margin: 0.5em}.or-button--is-active .or-button-value,.or-button--active-on-hover:hover .or-button-value{display: initial}.or-button-value{display: none;position: absolute;right: 1em} .or-collapsible .or-collapsible-act-switch{cursor: pointer}.or-collapsible .or-collapsible-value{max-height: 0;overflow: hidden;opacity: 0}.or-collapsible .or-collapsible-title{padding-bottom: 0.1em}.or-collapsible .or-collapsible--on-closed{display: inline}.or-collapsible .or-collapsible--on-open{display: none}.or-collapsible--is-open .or-collapsible--on-closed{display: none}.or-collapsible--is-open .or-collapsible--on-open{display: inline}.or-collapsible--is-open .or-collapsible-value{max-height: initial;overflow: auto}.or-collapsible--is-visible .or-collapsible-value{opacity: 1} -.or-dialog{position: absolute;z-index: 2;top: 0;left: 0;width: 100%;display: none;height: 100%;flex-direction: row}.or-dialog--is-open{display: flex}.or-dialog-filler{height: 100%;width: 12em;opacity: 0.6;filter: blur(10em)}@media only screen and (max-width: 55rem){.or-dialog-filler{width: 0}}.or-dialog-filler-icon{opacity: 1;font-size: 3em;position: absolute;right: 20px;top: 20px}.or-dialog-content{flex: 1;overflow: auto;height: 100%;z-index: 3}.or-dialog-content .or-view{height: 100%} +.or-dialog{position: absolute;z-index: 2;top: 0;left: 0;width: 0;opacity: 0;visibility: hidden;overflow: hidden;display: flex;height: 100%;flex-direction: row}.or-dialog--is-open{visibility: visible;overflow-y: auto;opacity: 1;width: 100%}.or-dialog--is-open .or-dialog-filler{width: 15%}.or-dialog-filler{height: 100%;width: 100%;opacity: 0.6;filter: blur(10em)}@media only screen and (max-width: 55rem){.or-dialog-filler{width: 0}}.or-dialog-filler-icon{opacity: 1;font-size: 3em;position: absolute;right: 20px;top: 20px}.or-dialog-content{flex: 1;overflow: auto;height: 100%;z-index: 3}.or-dialog-content .or-view{height: 100%} .or-diff-line{text-align: right}.or-diff-text--old{background-color: #f88989;color: black}.or-diff-text--new{background-color: #7bad7b;color: black}.or-diff-text--notequal{background-color: #cbcb16;color: black} .or-dropdown{display: none;overflow: hidden;z-index: 4;min-width: 17em;position: absolute;padding: .5em 0;font-style: normal;font-weight: normal;text-decoration: none}.or-dropdown--is-open{display: block}.or-dropdown--on-right{right: 1em}@media only screen and (max-width: 55rem){.or-dropdown-key{display: none}}.or-dropdown-entry{padding: 0}.or-dropdown-entry > .or-link{display: flex;align-items: center;padding: 0 .5em}.or-dropdown-entry > .or-link *{margin: 0.25em}.or-dropdown-entry > .or-link .or-dropdown-text{flex: 1}.or-dropdown-entry--inactive{opacity: 0.5} > .or-dropdown-text{display: block;margin: 1em}.or-dropdown-divide{height: 1px;width: 100%;margin-top: 0.5em;margin-bottom: 0.5em} .or-fieldset{border: 0;display: flex;flex-direction: row;align-items: start;margin-top: 1em}.or-fieldset-label{flex: 1;font-size: 1em;text-align: right;padding-right: 1em;font-weight: normal}.or-fieldset-value{flex: 3}.or-fieldset-value > *{display: block;padding: 0.8em}@media only screen and (max-width: 65rem){.or-fieldset{flex-direction: column}.or-fieldset-label{flex: 1;width: 100%;text-align: left}.or-fieldset-value{flex: 1;width: 100%}}