552 lines
13 KiB
Plaintext
552 lines
13 KiB
Plaintext
/* === Modals === */
|
|
@modalBgColor:#fff;
|
|
@modalButonColor : #4285f4;
|
|
@modalButonBg: @modalBgColor;
|
|
@modalDuration:400ms;
|
|
@actionsModalDuration:300ms;
|
|
@popoverDuration: 300ms;
|
|
@popupDuration: 400ms;
|
|
.modal-overlay, .preloader-indicator-overlay, .popup-overlay, .picker-modal-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.4);
|
|
z-index: 13000;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
.transition(@modalDuration);
|
|
&.modal-overlay-visible {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.popup-overlay {
|
|
z-index: 10500;
|
|
}
|
|
.picker-modal-overlay {
|
|
z-index: 12000;
|
|
}
|
|
.modal {
|
|
width: 280px;
|
|
position: absolute;
|
|
z-index: 13500;
|
|
left: 50%;
|
|
margin-left: -140px;
|
|
margin-top: 0;
|
|
top: 50%;
|
|
border-radius: 3px;
|
|
opacity: 0;
|
|
.transform(translate3d(0,0,0) scale(1.185));
|
|
-webkit-transition-property: -webkit-transform, opacity;
|
|
-moz-transition-property: -moz-transform, opacity;
|
|
-ms-transition-property: -ms-transform, opacity;
|
|
-o-transition-property: -o-transform, opacity;
|
|
transition-property: transform, opacity;
|
|
color:#757575;
|
|
display: none;
|
|
background: #fff;
|
|
font-size: 16px;
|
|
.depth(5);
|
|
&.modal-in {
|
|
opacity: 1;
|
|
.transition(@modalDuration);
|
|
.transform(translate3d(0,0,0) scale(1));
|
|
}
|
|
&.modal-out {
|
|
opacity: 0;
|
|
z-index: 13500-1;
|
|
.transition(@modalDuration);
|
|
.transform(translate3d(0,0,0) scale(0.815));
|
|
}
|
|
}
|
|
.modal-inner {
|
|
padding: 24px 24px 20px;
|
|
position: relative;
|
|
}
|
|
.modal-title {
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
color:#212121;
|
|
line-height: 1.3;
|
|
+.modal-text {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.modal-text {
|
|
line-height: 1.5;
|
|
}
|
|
.modal-buttons {
|
|
height: 48px;
|
|
padding: 6px 8px;
|
|
overflow: hidden;
|
|
box-sizing:border-box;
|
|
.flexbox();
|
|
.justify-content(flex-end);
|
|
&.modal-buttons-vertical {
|
|
display: block;
|
|
height: auto;
|
|
padding: 0 0 8px 0;
|
|
.modal-button {
|
|
margin-left: 0;
|
|
text-align: right;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
border-radius: 0;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
}
|
|
}
|
|
.modal-button, .modal-buttons .button {
|
|
.button;
|
|
&.modal-button-bold {
|
|
font-weight: 700;
|
|
}
|
|
+ .modal-button {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
.modal-no-buttons {
|
|
.modal-buttons {
|
|
display: none;
|
|
}
|
|
}
|
|
// Action sheet
|
|
.actions-modal {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 13500;
|
|
width: 100%;
|
|
background: #fff;
|
|
.transform(translate3d(0,100%,0));
|
|
max-height: 100%;
|
|
.scrollable();
|
|
&.modal-in {
|
|
.transition(@actionsModalDuration);
|
|
.transform(translate3d(0,0,0));
|
|
}
|
|
&.modal-out {
|
|
z-index: 13500-1;
|
|
.transition(@actionsModalDuration);
|
|
.transform(translate3d(0,100%,0));
|
|
}
|
|
}
|
|
.actions-modal-group {
|
|
position: relative;
|
|
.hairline(bottom, #d2d2d6);
|
|
&:last-child {
|
|
.hairline-remove(bottom);
|
|
}
|
|
}
|
|
.actions-modal-button, .actions-modal-label {
|
|
width: 100%;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: relative;
|
|
padding: 0 16px;
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: block;
|
|
}
|
|
b {
|
|
font-weight: 500;
|
|
}
|
|
&.actions-modal-button-bold {
|
|
font-weight: 500;
|
|
}
|
|
&.actions-modal-button-red {
|
|
color: @red;
|
|
}
|
|
&.disabled {
|
|
opacity: 0.95;
|
|
color:@gray;
|
|
}
|
|
}
|
|
.actions-modal-button {
|
|
cursor: pointer;
|
|
line-height: 48px;
|
|
font-size: 16px;
|
|
color: rgba(0,0,0,0.87);
|
|
.transition(300ms);
|
|
a, & {
|
|
position: relative;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
html:not(.watch-active-state) &:active, &.active-state {
|
|
background: rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
.actions-modal-label {
|
|
font-size: 16px;
|
|
color: rgba(0,0,0,0.54);
|
|
min-height: 56px;
|
|
line-height: 1.3;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
.flexbox();
|
|
.justify-content(flex-start);
|
|
.align-items(center);
|
|
}
|
|
// Prompt
|
|
input.modal-text-input {
|
|
box-sizing:border-box;
|
|
height: 36px;
|
|
background: #fff;
|
|
margin: 0;
|
|
margin-top: 15px;
|
|
padding: 0;
|
|
border: none;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
font-family: inherit;
|
|
display: block;
|
|
box-shadow: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-ms-appearance: none;
|
|
appearance: none;
|
|
.transition(200ms);
|
|
&::-webkit-input-placeholder {
|
|
color: rgba(0,0,0,0.35);
|
|
}
|
|
+ input.modal-text-input {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
// Popover
|
|
.popover {
|
|
width: 320px;
|
|
background: #fff;
|
|
z-index: 13500;
|
|
margin: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
left: 0;
|
|
border-radius: 3px;
|
|
position: absolute;
|
|
display: none;
|
|
.depth(2);
|
|
.transform(scale(0.85, 0.6));
|
|
-webkit-transition-property: opacity, -webkit-transform, border-radius;
|
|
-moz-transition-property: opacity, -moz-transform, border-radius;
|
|
transition-property: opacity, transform, border-radius;
|
|
&.popover-on-top {
|
|
.transform-origin(center bottom);
|
|
}
|
|
&.popover-on-bottom {
|
|
.transform-origin(center top);
|
|
}
|
|
&.modal-in {
|
|
.transform(scale(1));
|
|
.transition(@popoverDuration);
|
|
opacity: 1;
|
|
}
|
|
&.modal-out {
|
|
.transform(scale(1));
|
|
.transition(@popoverDuration);
|
|
opacity: 0;
|
|
}
|
|
.list-block {
|
|
margin: 0;
|
|
&:first-child:last-child ul {
|
|
.hairline-remove(top);
|
|
.hairline-remove(bottom);
|
|
}
|
|
ul {
|
|
background: none;
|
|
.hairline-remove(top);
|
|
}
|
|
&:first-child {
|
|
ul {
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
li:first-child a {
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
}
|
|
&:last-child {
|
|
ul {
|
|
.hairline-remove(bottom);
|
|
border-radius: 0 0 3px 3px;
|
|
}
|
|
li:last-child a {
|
|
border-radius: 0 0 3px 3px;
|
|
}
|
|
}
|
|
&:first-child:last-child {
|
|
li:first-child:last-child a, ul:first-child:last-child {
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
&.popover-floating-button {
|
|
.transform-origin(center center);
|
|
.transform(scale(0.7));
|
|
border-radius: 50%;
|
|
box-shadow: none;
|
|
.depth(3);
|
|
&.modal-in {
|
|
border-radius: 0%;
|
|
.transform(scale(1));
|
|
.delay(200ms);
|
|
.transition(200ms);
|
|
}
|
|
&.modal-out {
|
|
border-radius: 50%;
|
|
.transform(scale(0.7));
|
|
.delay(0ms);
|
|
.transition(100ms);
|
|
}
|
|
.list-block {
|
|
margin: 0;
|
|
&:first-child {
|
|
ul {
|
|
border-radius: 0;
|
|
}
|
|
li:first-child a {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
&:last-child {
|
|
ul {
|
|
border-radius: 0;
|
|
}
|
|
li:last-child a {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
&:first-child:last-child {
|
|
li:first-child:last-child a, ul:first-child:last-child {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.popover-inner {
|
|
.scrollable();
|
|
}
|
|
.actions-popover {
|
|
.list-block {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.actions-popover-label {
|
|
padding: 8px 16px;
|
|
color:rgba(0,0,0,0.54);
|
|
font-size: 16px;
|
|
line-height: 1.3;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
position: relative;
|
|
.hairline(bottom, #d2d2d6);
|
|
&:last-child {
|
|
.hairline-remove(bottom);
|
|
}
|
|
}
|
|
// Popup
|
|
.popup, .login-screen {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 11000;
|
|
background: #fff;
|
|
box-sizing:border-box;
|
|
display: none;
|
|
.scrollable();
|
|
-webkit-transition-property: -webkit-transform;
|
|
-moz-transition-property: -moz-transform;
|
|
-ms-transition-property: -ms-transform;
|
|
-o-transition-property: -o-transform;
|
|
transition-property: transform;
|
|
.translate3d(0,100%,0);
|
|
&.modal-in, &.modal-out {
|
|
.transition(@popupDuration);
|
|
}
|
|
&.modal-in {
|
|
.translate3d(0,0,0);
|
|
}
|
|
&.modal-out {
|
|
.translate3d(0,100%,0);
|
|
}
|
|
}
|
|
.login-screen.modal-in, .login-screen.modal-out {
|
|
display: block;
|
|
}
|
|
// iPad Popup
|
|
@media all and (min-width:630px) and (min-height:630px) {
|
|
.popup:not(.tablet-fullscreen) {
|
|
width: 630px;
|
|
height: 630px;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -315px;
|
|
margin-top: -315px;
|
|
box-shadow: 0px 20px 44px rgba(0,0,0,0.5);
|
|
border-radius: 3px;
|
|
.translate3d(0,1024px,0);
|
|
&.modal-in {
|
|
.translate3d(0,0,0);
|
|
}
|
|
&.modal-out {
|
|
.translate3d(0,1024px,0);
|
|
}
|
|
}
|
|
}
|
|
html.with-statusbar-overlay {
|
|
// iPhone with statusbar overlay
|
|
@media all and (max-width:629px), (max-height:629px) {
|
|
.popup {
|
|
height: ~"-webkit-calc(100% - 20px)";
|
|
height: ~"calc(100% - 20px)";
|
|
top: 20px;
|
|
}
|
|
.popup-overlay {
|
|
z-index: 9500;
|
|
}
|
|
}
|
|
.login-screen, .popup.tablet-fullscreen {
|
|
height: ~"-webkit-calc(100% - 20px)";
|
|
height: ~"calc(100% - 20px)";
|
|
top: 20px;
|
|
}
|
|
}
|
|
|
|
//Preloaders modals
|
|
.modal-preloader {
|
|
.modal-title, .modal-inner {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.preloader-indicator-overlay {
|
|
visibility: visible;
|
|
opacity: 0;
|
|
background: none;
|
|
}
|
|
.preloader-indicator-modal {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
padding: 8px;
|
|
margin-left: -24px;
|
|
margin-top: -24px;
|
|
background: rgba(0,0,0,0.8);
|
|
z-index: 13500;
|
|
border-radius: 4px;
|
|
.preloader {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// Picker Modal
|
|
.picker-modal {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 260px;
|
|
z-index: 12000;
|
|
display: none;
|
|
-webkit-transition-property: -webkit-transform;
|
|
-moz-transition-property: -moz-transform;
|
|
-ms-transition-property: -ms-transform;
|
|
-o-transition-property: -o-transform;
|
|
transition-property: transform;
|
|
background: #fff;
|
|
.translate3d(0,100%,0);
|
|
&.modal-in, &.modal-out {
|
|
.transition(400ms);
|
|
}
|
|
&.modal-in {
|
|
.translate3d(0,0,0);
|
|
}
|
|
&.modal-out {
|
|
.translate3d(0,100%,0);
|
|
}
|
|
.picker-modal-inner {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.toolbar {
|
|
position: relative;
|
|
width: 100%;
|
|
top: 0;
|
|
+ .picker-modal-inner {
|
|
height: ~"-webkit-calc(100% - @{toolbarSize})";
|
|
height: ~"-moz-calc(100% - @{toolbarSize})";
|
|
height: ~"calc(100% - @{toolbarSize})";
|
|
}
|
|
a.link {
|
|
.flex-shrink(0);
|
|
}
|
|
}
|
|
.picker-header, .picker-footer {
|
|
height: @toolbarSize;
|
|
}
|
|
.picker-header {
|
|
background: @themeColor;
|
|
+ .toolbar .toolbar-inner {
|
|
overflow: visible;
|
|
}
|
|
+ .picker-footer + .toolbar + .picker-modal-inner {
|
|
height: ~"-webkit-calc(100% - @{toolbarSize} * 3)";
|
|
height: ~"-moz-calc(100% - @{toolbarSize} * 3)";
|
|
height: ~"calc(100% - @{toolbarSize} * 3)";
|
|
}
|
|
}
|
|
.picker-footer {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
.modal-buttons;
|
|
|
|
}
|
|
.picker-header, .picker-footer {
|
|
+ .picker-modal-inner {
|
|
height: ~"-webkit-calc(100% - @{toolbarSize})";
|
|
height: ~"-moz-calc(100% - @{toolbarSize})";
|
|
height: ~"calc(100% - @{toolbarSize})";
|
|
}
|
|
+ .toolbar + .picker-modal-inner {
|
|
height: ~"-webkit-calc(100% - @{toolbarSize} * 2)";
|
|
height: ~"-moz-calc(100% - @{toolbarSize} * 2)";
|
|
height: ~"calc(100% - @{toolbarSize} * 2)";
|
|
}
|
|
}
|
|
&.picker-modal-inline, .popover & {
|
|
display: block;
|
|
position: relative;
|
|
background: none;
|
|
z-index: inherit;
|
|
.translate3d(0,0,0);
|
|
.toolbar {
|
|
top: 0;
|
|
}
|
|
}
|
|
.popover & {
|
|
width: auto;
|
|
.toolbar:first-child, .picker-header:first-child {
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
}
|
|
&.smart-select-picker {
|
|
.list-block {
|
|
margin: 0;
|
|
ul {
|
|
.hairline-remove(top);
|
|
.hairline-remove(bottom);
|
|
}
|
|
}
|
|
}
|
|
} |