SemanSemantic-UItic-UI/build/less/definitions/modules/modal.less

/*
 * # 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();