Semantic-ui: Modal size

[h2u]

Is there a way to call "small" modal.
Current modal is too large for messages like... "Remove that post?" :)

[brigand]

edit: moved my comment to a new issue (#241)

[h2u]

It's a good solution with Basic modal. What about Standard?
Thanks.

[brigand]

Yeah, sorry, got a bit distracted. I don't see why modals can't follow the mini-small-large-huge pattern of other elements.

Something like 20%, 40%, 60% (new default), 80%, 100%?

[jlukic]

Small and large modals are now available and in docs

[h2u]

Cool! Thanks ;)

[dkzeb]

I added support for tiny sizes too in the css - add this to your css file under modal / size - currently around line 30000:

/* Tiny Modal Width */

@media only screen and (max-width: 767px) {
  .ui.tiny.modal {
    width: 95%;
    margin: 0em 0em 0em -47.5%;
  }
}

@media only screen and (min-width: 768px) {
  .ui.tiny.modal {
    width: 50%;
    margin: 0em 0em 0em -25%;
  }
}

@media only screen and (min-width: 992px) {
  .ui.tiny.modal {
    width: 200px;
    margin: 0em 0em 0em -100px;
  }
}

@media only screen and (min-width: 1200px) {
  .ui.tiny.modal {
    width: 300px;
    margin: 0em 0em 0em -150px;
  }
}

@media only screen and (min-width: 1920px) {
  .ui.tiny.modal {
    width: 400px;
    margin: 0em 0em 0em -200px;
  }
}

And you can assign the .tiny class to the modal - useful for prompts and stuff

[jkrup]

Awesome! Thanks for that @dkzeb!

[allaboutduncan]

@dkzeb Awesome! Was just looking to see how to make a smaller one.

[ufukomer]

@dkzeb Thank you. It's very useful.