|
|
@import (reference) "./colortheme-all.less";@import (reference) "./browser.less";@import (reference) "./variables.less";
.alertify_main() { --LessLoader_require: LessLoader_currentFile();};& { @max-z-index: 2147483647; @alertify-fore: @colortheme_modal-fg; @alertify-base: @colortheme_modal-bg;
@alertify-dialog-bg: @alertify-base; @alertify-dialog-fg: @alertify-fore;
@alertify-btn-fg: @alertify-fore;
@alertify-bg: @colortheme_modal-dim; @alertify-fg: @alertify-fore;
@alertify-input-bg: @colortheme_modal-input; @alertify-input-fg: @colortheme_modal-input-fg;
@alertify_padding-base: @variables_padding; @alertify_box-shadow: @variables_shadow;
// Logs to show that something has happened // These show only once
.alertify-logs { z-index: 10000; // alertify logs @media print { visibility: hidden; } > * { padding: @alertify_padding-base @alertify_padding-base * 4; color: @colortheme_notification-color;
font-family: @colortheme_font; font-size: large;
box-shadow: @alertify_box-shadow; &, &.default { // FIXME background: @colortheme_notification-log; } &.error { font-weight: bold; background: @colortheme_notification-warn; } &.success { background: @colortheme_notification-log; } } }
.alertify { position: fixed; background-color: @alertify-bg; color: @alertify-fg; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 100000; // alertify container font: @colortheme_app-font;
&.forefront { z-index: @max-z-index; // alertify max forefront }
.message { h1, h2, h3, h4, h5, h6 { color: @alertify-fg; } }
h1, h2, h3 { margin-top: 0; }
&.hide { opacity: 0; pointer-events: none; }
&, &.show { box-sizing: border-box; transition: all .33s cubic-bezier(.25, .8, .25, 1); }
&, * { box-sizing: border-box; }
.dialog { padding: 12px;/* div.tokenfield { .token { //border: 1px solid red; //color: red; }
color: @colortheme_light-base; background-color: @alertify-dialog-bg;
input[id$="tokenfield"][type="text"].token-input { background-color: @alertify-dialog-bg !important; } }*/ }
.dialog, .alert { & > div { background-color: @alertify-dialog-bg; &.half { width: 50%; max-width: 50%; @media (max-width: @browser_media-medium-screen) { width: 100%; } } display: flex; flex-flow: column; }
width: 100%; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); max-height: 100%; display: flex;
> * { width: 100%; min-width: 260px; max-width: 500px; margin: 0 auto; text-align: left; padding: @alertify_padding-base; background: #fff; box-shadow: @alertify_box-shadow; }
.msg { padding: @alertify_padding-base; margin-bottom: @alertify_padding-base; margin: 0; overflow: auto; } .alertify-tabs { max-height: 100%; display: flex; flex-flow: column; .alertify-tabs-titles { height: 30px; display: flex; border-bottom: 1px solid @alertify-fore; margin-bottom: 20px; box-sizing: content-box; span { font-size: 20px; height: 30px; line-height: 30px; box-sizing: border-box; padding: 0 15px; border-left: 1px solid lighten(@alertify-base, 10%); border-right: 1px solid lighten(@alertify-base, 10%); cursor: pointer; } span.alertify-tabs-active { background-color: @alertify-fore; border-left: 1px solid @alertify-fore; border-right: 1px solid @alertify-fore; color: @alertify-base; font-weight: bold; cursor: default; } } .alertify-tabs-contents { flex: 1 1 auto; min-height: 0; & > div { max-height: 100%; display: none; overflow: auto; } & > div.alertify-tabs-content-active { display: block; } } }
input:not(.form-control), textarea { background-color: @alertify-input-bg; color: @alertify-input-fg; border: 0px;
margin-bottom: 15px; width: 100%; font-size: 100%; padding: @alertify_padding-base; }
span.cp-password-container { display: flex; align-items: center; margin-bottom: 15px; justify-content: space-between; & > * { margin-bottom: 0 !important; } button { margin: 0 !important; } }
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; margin-right: 0.5em; margin-top: 1px; margin-bottom: 5px; vertical-align: middle; & + label { margin-bottom: 0; margin-right: 2em; } }
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
background-color: @colortheme_alertify-cancel; box-sizing: border-box; position: relative; outline: 0; display: inline-block; align-items: center; padding: 0 6px; margin: 6px 8px; line-height: 36px; min-height: 36px; white-space: nowrap; min-width: 88px; text-align: center; text-transform: uppercase; font-size: 14px; text-decoration: none; cursor: pointer; border-radius: 0;
color: @alertify-btn-fg; border: 1px solid @colortheme_alertify-cancel-border;
&.safe, &.danger { color: @colortheme_old-base; white-space: normal; font-weight: bold; } &.danger { background-color: @colortheme_alertify-red; border-color: @colortheme_alertify-red-border; color: @colortheme_alertify-red-color; &:hover, &:active { background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%)); } }
&.safe { background-color: @colortheme_alertify-green; border-color: @colortheme_alertify-green-border; color: @colortheme_alertify-green-color; &:hover, &:active { background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%)); } }
&.primary { background-color: @colortheme_alertify-primary; color: @colortheme_alertify-primary-text; border-color: @colortheme_alertify-primary-border; font-weight: bold; &:hover, &:active { background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); } }
&:hover, &:active { background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-cancel, 10%), lighten(@colortheme_alertify-cancel, 10%)); }
&:focus { //border: 1px dotted @alertify-base; box-shadow: 0px 0px 5px @colortheme_alertify-primary; outline: none; } &::-moz-focus-inner { border: 0; } }
button.btn { margin: 6px 4px; }
nav { text-align: right; } } }
.alertify-logs {
position: fixed; z-index: 99999; // alertify logs
&.bottom, &:not(.top) { bottom: 16px; /* // Bottom left placement. Default. Use for transitions. &.left, &:not(.right) { > * {
} } // Top right placement &.right { > * {
} }*/ }
// All left positions. &.left, &:not(.right) { left: 16px; > * { float: left; transform: translate3d(0, 0, 0); height: auto;
&.show { left: 0; } &, &.hide { left: -110%; } } }
&.right { right: 16px; > * { float: right; transform: translate3d(0, 0, 0); &.show { right: 0; opacity: 1; } &, &.hide { right: -110%; opacity: 0; } } }
&.top { top: 0; /* // Top left placement, use for transitions. &.left, &:not(.right) { > * {
} } // Top right placement, use for transitions &.right { > * {
} }*/ }
> * { box-sizing: border-box; transition: all .4s cubic-bezier(.25, .8, .25, 1); position: relative; clear: both; backface-visibility: hidden; perspective: 1000;
& { max-height: 0; margin: 0; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; }
&.show { margin-top: @alertify_padding-base; opacity: 1; max-height: 1000px; padding: @alertify_padding-base; pointer-events: auto; } } }}
|