blob: 8668524a637fa7e72d78d11a8db461fa70e7af0b [file] [log] [blame]
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../../public/stylesheets/variables';
.modal {
display: block;
overflow: hidden;
&.center {
display: flex !important;
flex-direction: column;
justify-content: center;
}
}
.modal .close {
position: absolute;
top: 10px;
right: 10px;
float: none;
}
.modal-header {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
// Close icon
.close {
margin-right: -2px;
}
// Modal icon
h4 > i {
cursor: default;
float: left;
line-height: $modal-title-line-height;
}
}
.modal .modal-dialog {
width: 650px;
}
.modal .modal-dialog--adjust-height {
margin-top: 0;
margin-bottom: 0;
.modal-body {
max-height: calc(100vh - 150px);
overflow: auto;
}
}
.modal .modal-content .modal-header {
background-color: $ignite-background-color;
text-align: center;
color: $ignite-header-color;
padding: 15px 25px 15px 15px;
}
.modal .modal-content .modal-header h4 {
font-size: 22px;
}
.modal .modal-content .modal-footer {
margin-top: 0;
}
.modal-footer {
label {
float: left;
margin: 0;
}
.btn:last-child {
margin-right: 0;
}
.checkbox {
margin: 0;
}
}
.modal-body {
margin-left: 20px;
margin-right: 20px;
}
.modal-body-with-scroll {
max-height: 420px;
overflow-y: auto;
overflow-y: overlay;
margin: 0;
}
.modal--ignite {
.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
opacity: 1;
background: none;
color: $gray-light;
[ignite-icon] {
height: 12px;
}
&:hover, &:focus {
color: $text-color;
}
}
.modal-content {
border: none;
border-radius: 4px;
background-color: white;
box-shadow: 0 2px 4px 0 rgba(35, 36, 40, 0.5);
.modal-header {
display: flex;
align-items: center;
padding: 10px 20px;
text-align: left;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 1px solid $table-border-color;
h4 {
display: inline-flex;
align-items: center;
margin-top: 1px;
margin-bottom: -1px;
color: $text-color;
font-size: 16px;
font-weight: 400;
line-height: 36px;
i, .icon-left, svg {
margin-right: 8px;
color: #424242;
font-size: 18px;
line-height: inherit;
}
}
}
.modal-body {
padding: 5px 20px;
margin: 0;
.input-tip {
padding-top: 0;
}
.modal-body--inner-content {
max-height: 300px;
overflow-x: auto;
p {
text-align: left;
white-space: nowrap;
}
}
}
.modal-footer {
padding: 10px 20px;
border-top: 1px solid $table-border-color;
button + button,
button + a {
margin-left: 20px;
}
}
ul.tabs {
margin-top: 20px;
}
.panel--ignite {
margin-top: 20px;
margin-bottom: 20px;
}
ul.tabs + .panel--ignite {
margin-top: 0;
}
fieldset {
margin: 16px 0;
& > .row:first-child {
margin-top: 0;
}
}
}
}
.modal-footer {
display: flex;
align-items: center;
> div {
display: flex;
flex: 1;
&:last-child {
flex: 1;
justify-content: flex-end;
&.modal-footer--no-grow {
flex-grow: 0;
}
}
}
}
.modal--wide .modal-dialog {
width: 900px;
}
.modal-with-ace {
.modal-body {
padding-left: 5px !important;
}
.modal-dialog {
transform: none !important;
.ace_warning:before, .ace_error:before {
position: absolute !important;
left: -7px !important;
}
}
.ace_gutter, .ace_layer {
overflow: visible !important;
}
.ace_gutter {
padding-left: 5px !important;
}
}