Semantic-ui: [Modal] Add tiny and mini modal variations.

Created on 20 Oct 2015 · 4Comments · Source: Semantic-Org/Semantic-UI

Large and small modal sizes can be applied #240 but noting for mini, tinny and other sizes.
Small modal size is 720px on big screens. It is big for name, surname like inputs in the modal.

Enhancement

Source

ismail-codar

👍5

Most helpful comment

Hi @cguedes, thank you for reminding about the issue, it seems to be a common request. I’ll label it as enhancement, and will submit a PR this week; hopefully, it will make it into one of the future releases later this year.

awgv on 6 Feb 2017

🎉2 👍2

All 4 comments

In the meantime, it doesn't take too much time to create your own; forms will look much nicer with this example—I don't remember exactly, bit this modal should be around half the size of .small.

_src/site/modules/modal.ovverides:_

/* Extra Small */
.ui.xsmall.modal > .header:not(.ui) {
  font-size: @xsmallHeaderSize;
}

/* Extra Small Modal Width */
@media only screen and (max-width : @largestMobileScreen) {
  .ui.xsmall.modal {
    width: @xsmallMobileWidth;
    margin: @xsmallMobileMargin;
  }
}
@media only screen and (min-width : @tabletBreakpoint) {
  .ui.xsmall.modal {
    width: @xsmallTabletWidth;
    margin: @xsmallTabletMargin;
  }
}
@media only screen and (min-width : @computerBreakpoint) {
  .ui.xsmall.modal {
    width: @xsmallComputerWidth;
    margin: @xsmallComputerMargin;
  }
}
@media only screen and (min-width : @largeMonitorBreakpoint) {
  .ui.xsmall.modal {
    width: @xsmallLargeMonitorWidth;
    margin: @xsmallLargeMonitorMargin;
  }
}
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
  .ui.xsmall.modal {
    width: @xsmallWidescreenMonitorWidth;
    margin: @xsmallWidescreenMonitorMargin;
  }
}

_src/site/modules/modal.variables:_

/*******************************
         Site Overrides
*******************************/

/*----------------------
    Modal Variations
----------------------*/

/* Size Widths */
@xsmallRatio: 0.4;

/* Derived Responsive Sizes */
@xsmallHeaderSize: 1.3em;
@xsmallMobileWidth: @mobileWidth;
@xsmallTabletWidth: (@tabletWidth * @xsmallRatio);
@xsmallComputerWidth: (@computerWidth * @xsmallRatio);
@xsmallLargeMonitorWidth: (@largeMonitorWidth * @xsmallRatio);
@xsmallWidescreenMonitorWidth: (@widescreenMonitorWidth * @xsmallRatio);

@xsmallMobileMargin: 0em 0em 0em -(@xsmallMobileWidth / 2);
@xsmallTabletMargin: 0em 0em 0em -(@xsmallTabletWidth / 2);
@xsmallComputerMargin: 0em 0em 0em -(@xsmallComputerWidth / 2);
@xsmallLargeMonitorMargin: 0em 0em 0em -(@xsmallLargeMonitorWidth / 2);
@xsmallWidescreenMonitorMargin: 0em 0em 0em -(@xsmallWidescreenMonitorWidth / 2);