Remove bootstrap Modal feature for improved transition effects (in future might use <dialog>)

This commit is contained in:
djmaze 2020-09-02 17:06:35 +02:00
parent 0309879d6b
commit 7135cc38fe
82 changed files with 1767 additions and 3990 deletions

View file

@ -40,7 +40,6 @@
@import "Components.less";
@import "SystemDropDown.less";
@import "Login.less";
@import "WelcomPage.less";
@import "Ask.less";
@import "Shortcuts.less";
@import "FolderList.less";
@ -70,7 +69,6 @@
@import "AdminPlugins.less";
@import "AdminPlugin.less";
@import "AdminAbout.less";
@import "Activate.less";
@import "Settings.less";
@import "SettingsGeneral.less";

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-account-add-content {
.modal-header {
background-color: #fff;

View file

@ -1,14 +0,0 @@
.popups {
.b-activate-content {
width: 700px;
.modal-header {
background-color: #fff;
}
.help-inline {
padding-left: 0px;
}
}
}

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-advanced-search-content {
&.modal {
width: 750px;

View file

@ -142,19 +142,17 @@ html.no-mobile {
}
}
&.rl-modal.rl-modal-animation .popups {
overflow: hidden;
#rl-popups > .rl-view-model .modal {
transition: all .2s ease-out;
}
& .modal.fade {
.transition(all 200ms ease-out);
/*transform: scale(0.95);*/
transform: translateY(-20px);
&.show {
transform: none;
}
#rl-popups > .rl-view-model:not(.show) .modal {
top: -25%;
}
#rl-popups > .rl-view-model .modal.fade {
opacity: 1;
}
#rl-popups > .rl-view-model:not(.show) .modal.fade {
opacity: 0;
}
& .b-compose.loading .b-header-toolbar {
@ -164,6 +162,13 @@ html.no-mobile {
}
}
#rl-popups > .rl-view-model {
transition: background-color 0.2s linear;
}
#rl-popups > .rl-view-model:not(.show) {
background-color: rgba(0,0,0,0);
}
.textLoadingAnimationD1, .textLoadingAnimationD2, .textLoadingAnimationD3 {
animation: textLoadingAnimationKeyFrame 1s linear infinite 0s;
}

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-ask-content {
.modal-header {

View file

@ -22,7 +22,6 @@
width: 900px;
min-height: 300px;
max-height: 700px;
margin: auto;
.modal-body {
overflow: auto;

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-filter-content {
width: 750px;

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-folder-clear-content {
.modal-header {
background-color: #fff;

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-folder-create-content {
.modal-header {
background-color: #fff;

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-folder-system-content {
.modal-header {
background-color: #fff;

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-identity-content {
&.modal {

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-languages-content {
&.modal {
@ -43,4 +43,4 @@ html.rl-mobile {
.b-languages-content .lang-item {
width: calc(~'100% - 40px');
}
}
}

View file

@ -168,6 +168,26 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
}
}
/*
#rl-popups > dialog {
top: 0;
margin: 10px auto;
padding: 0;
border: 0;
}
*/
#rl-popups > .rl-view-model {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1100;
overflow: auto;
background-color: rgba(0,0,0,0.3);
// -webkit-overflow-scrolling: touch;
}
html.ssm-state-desktop-large {
#rl-left {

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content, .b-open-pgp-key-add-content, .b-compose-open-pgp-content, .b-message-open-pgp-content {
.modal-header {
@ -137,9 +137,7 @@
}
}
}
}
.popups {
.b-open-pgp-key-add-content {
&.modal {

View file

@ -1,4 +1,4 @@
.popups {
.rl-view-model {
.b-shortcuts-content {
&.modal {
width: 700px;

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-template-add-content {
&.modal {

View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-two-factor-content {

View file

@ -6,17 +6,6 @@
// touch-callout: none;
}
.g-ui-user-select-allow {
webkit-touch-callout: inherit;
user-select: inherit;
standard-user-select: inherit;
touch-callout: inherit;
}
.g-ui-clearfix {
.clearfix();
}
.g-ui-link {
color: #336699;
text-decoration: underline;
@ -33,10 +22,6 @@
min-height: 300px;
}
.g-ui-100-proc-height {
height: 100%;
}
.g-ui-absolute-reset {
position: absolute;
top: 0;
@ -99,10 +84,6 @@
}
}
.g-ui-height-100proc {
height: 100%;
}
.e-pagenator {
.e-page {
@ -171,15 +152,11 @@
}
}
.display-none {
display: none;
}
.e-spinner {
display: none;
}
.e-powered, .e-mobile-switcher {
.e-mobile-switcher {
margin-top: 8px;
color: #333;
a {

View file

@ -1,9 +0,0 @@
.popups {
.b-welcom-page-content {
.modal-header {
background-color: #fff;
}
}
}

View file

@ -287,47 +287,6 @@ html.no-rgba .modal {
border-width: 0px !important;
}
.modal-backdrop, .modal-backdrop.fade.show {
.opacity(20);
transform: none;
}
.popups {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1100;
overflow: auto;
background-color: rgba(0,0,0,0.3);
// -webkit-overflow-scrolling: touch;
.modal {
position: static;
z-index: 1101;
margin: 5% auto;
background-color: transparent;
overflow: hidden;
.modal-body {
background-color: #fff;
max-height: none;
}
box-shadow: 0 5px 80px rgba(0,0,0,0.3);
}
}
.modal.fade {
transition: none;
}
.modal-backdrop {
.g-ui-user-select-none();
}
.modal.loginContent .modal-body, .modal.loginAdminContent .modal-body {
background-color: transparent !important;
}
@ -355,7 +314,7 @@ html.no-rgba .modal {
html.rl-mobile {
.popups .modal {
#rl-popups .modal {
width: 100% !important;
width: calc(~'100% - 20px') !important;
}