You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
6.5 KiB
315 lines
6.5 KiB
/*
|
|
* # Semantic - Modal
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Copyright 2013 Contributors
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
/*******************************
|
|
Theme
|
|
*******************************/
|
|
|
|
@type : 'module';
|
|
@element : 'modal';
|
|
|
|
@import '../../semantic.config';
|
|
|
|
/*******************************
|
|
Modal
|
|
*******************************/
|
|
|
|
.ui.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1001;
|
|
|
|
top: 50%;
|
|
left: 50%;
|
|
text-align: left;
|
|
|
|
width: @modalWidth;
|
|
margin-left: @modalXOffset;
|
|
|
|
background-color: #FFFFFF;
|
|
border: 1px solid #DDDDDD;
|
|
|
|
border-radius: @modalBorderRadius;
|
|
user-select: text;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Content
|
|
*******************************/
|
|
|
|
/*--------------
|
|
Close
|
|
---------------*/
|
|
|
|
.ui.modal > .close {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: @modalCloseTop;
|
|
right: @modalCloseRight;
|
|
z-index: 1;
|
|
|
|
opacity: @modalCloseOpacity;
|
|
font-size: @modalCloseSize;
|
|
color: @modalCloseColor;
|
|
|
|
width: @modalCloseHitbox;
|
|
height: @modalCloseHitbox;
|
|
padding: @modalClosePadding;
|
|
}
|
|
.ui.modal > .close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/*--------------
|
|
Header
|
|
---------------*/
|
|
|
|
.ui.modal > .header {
|
|
font-family: @modalHeaderFontFamily;
|
|
margin: @modalHeaderMargin;
|
|
padding: @modalHeaderPadding;
|
|
|
|
font-size: @modalHeaderFontSize;
|
|
font-weight: @modalHeaderFontWeight;
|
|
|
|
border-top-left-radius: @modalBorderRadius;
|
|
border-top-right-radius: @modalBorderRadius;
|
|
}
|
|
|
|
/*--------------
|
|
Content
|
|
---------------*/
|
|
|
|
.ui.modal > .content {
|
|
position: relative;
|
|
display: table;
|
|
width: 100%;
|
|
font-size: @modalContentFontSize;
|
|
line-height: @modalContentLineHeight;
|
|
padding: @modalContentPadding;
|
|
background: @modalContentBackground;
|
|
}
|
|
.ui.modal > .content > .image {
|
|
display: table-cell;
|
|
padding-right: @modalImagePadding;
|
|
min-width: @modalImageMinWidth;
|
|
}
|
|
.ui.modal > .content > .description {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
padding-left: @modalDescriptionPadding;
|
|
min-width: @modalDescriptionMinWidth;
|
|
}
|
|
/*rtl:ignore*/
|
|
.ui.modal > .content > .image > i.icon {
|
|
font-size: @modalImageIconSize;
|
|
margin: 0em;
|
|
}
|
|
|
|
/*--------------
|
|
Actions
|
|
---------------*/
|
|
|
|
.ui.modal .actions {
|
|
padding: @modalActionPadding;
|
|
text-align: right;
|
|
}
|
|
.ui.modal .actions > .button {
|
|
margin-left: @modalButtonDistance;
|
|
}
|
|
|
|
/*-------------------
|
|
Responsive
|
|
--------------------*/
|
|
|
|
/* Modal Width */
|
|
@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
|
|
.ui.modal {
|
|
width: @modalMobileWidth;
|
|
margin: @modalMobileMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @tabletBreakpoint) {
|
|
.ui.modal {
|
|
width: @modalTabletWidth;
|
|
margin: @modalTabletMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @computerBreakpoint) {
|
|
.ui.modal {
|
|
width: @modalComputerWidth;
|
|
margin: @modalComputerMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
|
.ui.modal {
|
|
width: @modalLargeMonitorWidth;
|
|
margin: @modalLargeMonitorMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
|
.ui.modal {
|
|
width: @modalWidescreenMonitorWidth;
|
|
margin: @modalWidescreenMonitorMargin;
|
|
}
|
|
}
|
|
|
|
|
|
/* Position Adjustments */
|
|
@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
|
|
/*rtl:ignore*/
|
|
.ui.modal .content > .image {
|
|
display: block;
|
|
padding: @modalMobileImagePadding;
|
|
}
|
|
/*rtl:ignore*/
|
|
.ui.modal .content > .description {
|
|
display: block;
|
|
padding: @modalMobileDescriptionPadding;
|
|
box-shadow: none;
|
|
}
|
|
.ui.modal .content .image {
|
|
width: auto !important;
|
|
max-width: 100%;
|
|
}
|
|
.ui.modal .actions {
|
|
padding-bottom: 0em
|
|
}
|
|
.ui.modal .actions > .buttons,
|
|
.ui.modal .actions > .button {
|
|
margin-bottom: @modalMobileButtonDistance;
|
|
}
|
|
}
|
|
/* Tablet and Mobile */
|
|
@media only screen and (max-width : @computerBreakpoint) {
|
|
.ui.modal > .close {
|
|
top: @modalInnerCloseTop;
|
|
right: @modalInnerCloseRight;
|
|
|
|
color: @modalInnerCloseColor;
|
|
}
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Types
|
|
*******************************/
|
|
|
|
.ui.basic.modal {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: @basicModalColor;
|
|
}
|
|
.ui.basic.modal > .close {
|
|
top: @basicModalCloseTop;
|
|
right: @basicModalCloseRight;
|
|
}
|
|
.ui.basic.modal .content {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/*******************************
|
|
Variations
|
|
*******************************/
|
|
|
|
/* A modal that cannot fit on the page */
|
|
.ui.modal.scrolling {
|
|
position: absolute;
|
|
margin-top: @scrollingTopMargin;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
States
|
|
*******************************/
|
|
|
|
.ui.active.modal {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
Size
|
|
---------------*/
|
|
|
|
/* Small */
|
|
.ui.small.modal > .header {
|
|
font-size: @modalSmallHeaderSize;
|
|
}
|
|
/* Small Modal Width */
|
|
@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
|
|
.ui.small.modal {
|
|
width: @modalSmallMobileWidth;
|
|
margin: @modalSmallMobileMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @tabletBreakpoint) {
|
|
.ui.small.modal {
|
|
width: @modalSmallTabletWidth;
|
|
margin: @modalSmallTabletMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @computerBreakpoint) {
|
|
.ui.small.modal {
|
|
width: @modalSmallComputerWidth;
|
|
margin: @modalSmallComputerMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
|
.ui.small.modal {
|
|
width: @modalSmallLargeMonitorWidth;
|
|
margin: @modalSmallLargeMonitorMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
|
.ui.small.modal {
|
|
width: @modalSmallWidescreenMonitorWidth;
|
|
margin: @modalSmallWidescreenMonitorMargin;
|
|
}
|
|
}
|
|
|
|
/* Large Modal Width */
|
|
.ui.large.modal > .header {
|
|
font-size: @modalLargeHeaderSize;
|
|
}
|
|
@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
|
|
.ui.large.modal {
|
|
width: @modalLargeMobileWidth;
|
|
margin: @modalLargeMobileMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @tabletBreakpoint) {
|
|
.ui.large.modal {
|
|
width: @modalLargeTabletWidth;
|
|
margin: @modalLargeTabletMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @computerBreakpoint) {
|
|
.ui.large.modal {
|
|
width: @modalLargeComputerWidth;
|
|
margin: @modalLargeComputerMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
|
.ui.large.modal {
|
|
width: @modalLargeLargeMonitorWidth;
|
|
margin: @modalLargeLargeMonitorMargin;
|
|
}
|
|
}
|
|
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
|
.ui.large.modal {
|
|
width: @modalLargeWidescreenMonitorWidth;
|
|
margin: @modalLargeWidescreenMonitorMargin;
|
|
}
|
|
}
|
|
|
|
.loadUIOverrides();
|