less-rails-semantic_ui 1.0.1.0

data/assets/stylesheets/semantic_ui/definitions/modules/modal.less

@@ -0,0 +1,447 @@
+/*
+ *= depend_on semantic_ui/theme.config
+ *= depend_on semantic_ui/config/modules/modal.overrides
+ *= depend_on semantic_ui/config/modules/modal.variables
+ */
+
+/*
+ * # Semantic - Modal
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributor
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'modal';
+
+@import 'semantic_ui/theme.config';
+
+/*******************************
+             Modal
+*******************************/
+
+.ui.modal {
+  display: none;
+  position: fixed;
+  z-index: 1001;
+
+  top: 50%;
+  left: 50%;
+  text-align: left;
+
+  width: @width;
+  margin-left: @xOffset;
+
+  background: @background;
+  border: @border;
+  box-shadow: @boxShadow;
+
+  border-radius: @borderRadius;
+  user-select: text;
+  will-change: top, left, margin, transform, opacity;
+}
+
+.ui.modal > :first-child:not(.icon),
+.ui.modal > .icon:first-child + * {
+  border-top-left-radius: @borderRadius;
+  border-top-right-radius: @borderRadius;
+}
+
+.ui.modal > :last-child {
+  border-bottom-left-radius: @borderRadius;
+  border-bottom-right-radius: @borderRadius;
+}
+
+/*******************************
+            Content
+*******************************/
+
+/*--------------
+     Close
+---------------*/
+
+.ui.modal > .close {
+  cursor: pointer;
+  position: absolute;
+  top: @closeTop;
+  right: @closeRight;
+  z-index: 1;
+
+  opacity: @closeOpacity;
+  font-size: @closeSize;
+  color: @closeColor;
+
+  width: @closeHitbox;
+  height: @closeHitbox;
+  padding: @closePadding;
+}
+.ui.modal > .close:hover {
+  opacity: 1;
+}
+
+/*--------------
+     Header
+---------------*/
+
+.ui.modal > .header {
+  display: block;
+  font-family: @headerFontFamily;
+  background: @headerBackground;
+  margin: @headerMargin;
+  padding: @headerPadding;
+  box-shadow: @headerBoxShadow;
+
+  font-size: @headerFontSize;
+  line-height: @headerLineHeight;
+  font-weight: @headerFontWeight;
+  color: @headerColor;
+  border-bottom: @headerBorder;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.modal > .content {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  font-size: @contentFontSize;
+  line-height: @contentLineHeight;
+  padding: @contentPadding;
+  background: @contentBackground;
+}
+
+/* Image */
+.ui.modal > .content > .image {
+  display: table-cell;
+  width: @imageWidth;
+  vertical-align: @imageVerticalAlign;
+}
+.ui.modal > .content > .image[class*="top aligned"] {
+  vertical-align: top;
+}
+.ui.modal > .content > .image[class*="top aligned"] {
+  vertical-align: middle;
+}
+
+/* Description */
+.ui.modal > .content > .description {
+  display: table-cell;
+  vertical-align: top;
+  vertical-align: @descriptionVerticalAlign;
+}
+
+.ui.modal > .content > .icon + .description,
+.ui.modal > .content > .image + .description {
+  min-width: @descriptionMinWidth;
+  width: @descriptionWidth;
+  padding-left: @descriptionDistance;
+}
+
+/*rtl:ignore*/
+.ui.modal > .content > .image > i.icon {
+  font-size: @imageIconSize;
+  margin: 0em;
+  opacity: 1;
+  width: auto;
+}
+
+/*--------------
+     Actions
+---------------*/
+
+.ui.modal .actions {
+  background: @actionBackground;
+  padding: @actionPadding;
+  border-top: @actionBorder;
+  text-align: @actionAlign;
+}
+.ui.modal .actions > .button {
+  margin-left: @buttonDistance;
+}
+
+/*-------------------
+       Responsive
+--------------------*/
+
+/* Modal Width */
+@media only screen and (max-width : @largestMobileScreen) {
+  .ui.modal {
+    width: @mobileWidth;
+    margin: @mobileMargin;
+  }
+}
+@media only screen and (min-width : @tabletBreakpoint) {
+  .ui.modal {
+    width: @tabletWidth;
+    margin: @tabletMargin;
+  }
+}
+@media only screen and (min-width : @computerBreakpoint) {
+  .ui.modal {
+    width: @computerWidth;
+    margin: @computerMargin;
+  }
+}
+@media only screen and (min-width : @largeMonitorBreakpoint) {
+  .ui.modal {
+    width: @largeMonitorWidth;
+    margin: @largeMonitorMargin;
+  }
+}
+@media only screen and (min-width : @widescreenMonitorBreakpoint) {
+  .ui.modal {
+    width: @widescreenMonitorWidth;
+    margin: @widescreenMonitorMargin;
+  }
+}
+
+/* Tablet and Mobile */
+@media only screen and (max-width : @computerBreakpoint) {
+  .ui.modal > .header {
+    padding-right: @closeHitbox;
+  }
+  .ui.modal > .close {
+    top: @innerCloseTop;
+    right: @innerCloseRight;
+    color: @innerCloseColor;
+  }
+}
+
+/* Mobile */
+@media only screen and (max-width : @largestMobileScreen) {
+
+  .ui.modal > .header {
+    padding: @mobileHeaderPadding !important;
+    padding-right: @closeHitbox !important;
+  }
+  .ui.modal > .content {
+    display: block;
+    padding: @mobileContentPadding !important;
+  }
+  .ui.modal > .close {
+    top: @mobileCloseTop !important;
+    right: @mobileCloseRight !important;
+  }
+
+  /*rtl:ignore*/
+  .ui.modal .content > .image {
+    display: block;
+    max-width: 100%;
+    margin: 0em auto !important;
+    text-align: center;
+    padding: @mobileImagePadding !important;
+  }
+  .ui.modal > .content > .image > i.icon {
+    font-size: @mobileImageIconSize;
+    text-align: center;
+  }
+
+  /*rtl:ignore*/
+  .ui.modal .content > .description {
+    display: block;
+    width: 100% !important;
+    margin: 0em !important;
+    padding: @mobileDescriptionPadding !important;
+    box-shadow: none;
+  }
+
+  .ui.modal > .actions {
+    padding: @mobileActionPadding !important;
+  }
+  .ui.modal .actions > .buttons,
+  .ui.modal .actions > .button {
+    margin-bottom: @mobileButtonDistance;
+  }
+}
+
+/*******************************
+             Types
+*******************************/
+
+.ui.basic.modal {
+  background-color: transparent;
+  border: none;
+  box-shadow: 0px 0px 0px 0px;
+  color: @basicModalColor;
+}
+.ui.basic.modal > .header,
+.ui.basic.modal > .content,
+.ui.basic.modal > .actions {
+  background-color: transparent;
+}
+.ui.basic.modal > .header {
+  color: @basicModalHeaderColor;
+}
+.ui.basic.modal > .close {
+  top: @basicModalCloseTop;
+  right: @basicModalCloseRight;
+}
+
+/* Tablet and Mobile */
+@media only screen and (max-width : @computerBreakpoint) {
+
+  .ui.basic.modal > .close {
+    color: @basicInnerCloseColor;
+  }
+}
+
+/*******************************
+            Variations
+*******************************/
+
+/* A modal that cannot fit on the page */
+.scrolling.dimmable.dimmed {
+  overflow: hidden;
+}
+.scrolling.dimmable.dimmed > .dimmer {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.scrolling.dimmable > .dimmer {
+  position: fixed;
+}
+
+.ui.scrolling.modal {
+  position: static;
+  margin: @scrollingMargin auto !important;
+}
+
+@media only screen and (max-width : @computerBreakpoint) {
+  .ui.scrolling.modal {
+    margin-top: @mobileScrollingMargin;
+    margin-bottom: @mobileScrollingMargin;
+  }
+}
+
+/*******************************
+             States
+*******************************/
+
+.ui.active.modal {
+  display: block;
+}
+
+/*******************************
+           Variations
+*******************************/
+
+/*--------------
+   Full Screen
+---------------*/
+
+.ui.fullscreen.modal {
+  width: @fullScreenWidth !important;
+  left: @fullScreenOffset !important;
+  margin: @fullScreenMargin;
+}
+.ui.fullscreen.scrolling.modal {
+  left: 0em !important;
+}
+.ui.fullscreen.modal > .header {
+  padding-right: @closeHitbox;
+}
+.ui.fullscreen.modal > .close {
+  top: @innerCloseTop;
+  right: @innerCloseRight;
+  color: @innerCloseColor;
+}
+
+@media only screen and (max-width : @largestMobileScreen) {
+  .ui.fullscreen.modal {
+    width: @fullScreenMobileWidth !important;
+    margin: @fullScreenMobileMargin !important;
+  }
+}
+
+/*--------------
+      Size
+---------------*/
+
+.ui.modal {
+  font-size: @medium;
+}
+
+/* Small */
+.ui.small.modal > .header {
+  font-size: @smallHeaderSize;
+}
+
+/* Small Modal Width */
+@media only screen and (max-width : @largestMobileScreen) {
+  .ui.small.modal {
+    width: @smallMobileWidth;
+    margin: @smallMobileMargin;
+  }
+}
+@media only screen and (min-width : @tabletBreakpoint) {
+  .ui.small.modal {
+    width: @smallTabletWidth;
+    margin: @smallTabletMargin;
+  }
+}
+@media only screen and (min-width : @computerBreakpoint) {
+  .ui.small.modal {
+    width: @smallComputerWidth;
+    margin: @smallComputerMargin;
+  }
+}
+@media only screen and (min-width : @largeMonitorBreakpoint) {
+  .ui.small.modal {
+    width: @smallLargeMonitorWidth;
+    margin: @smallLargeMonitorMargin;
+  }
+}
+@media only screen and (min-width : @widescreenMonitorBreakpoint) {
+  .ui.small.modal {
+    width: @smallWidescreenMonitorWidth;
+    margin: @smallWidescreenMonitorMargin;
+  }
+}
+
+/* Large Modal Width */
+.ui.large.modal > .header {
+  font-size: @largeHeaderSize;
+}
+@media only screen and (max-width : @largestMobileScreen) {
+  .ui.large.modal {
+    width: @largeMobileWidth;
+    margin: @largeMobileMargin;
+  }
+}
+@media only screen and (min-width : @tabletBreakpoint) {
+  .ui.large.modal {
+    width: @largeTabletWidth;
+    margin: @largeTabletMargin;
+  }
+}
+@media only screen and (min-width : @computerBreakpoint) {
+  .ui.large.modal {
+    width: @largeComputerWidth;
+    margin: @largeComputerMargin;
+  }
+}
+@media only screen and (min-width : @largeMonitorBreakpoint) {
+  .ui.large.modal {
+    width: @largeLargeMonitorWidth;
+    margin: @largeLargeMonitorMargin;
+  }
+}
+@media only screen and (min-width : @widescreenMonitorBreakpoint) {
+  .ui.large.modal {
+    width: @largeWidescreenMonitorWidth;
+    margin: @largeWidescreenMonitorMargin;
+  }
+}
+
+
+.loadUIOverrides();

data/assets/stylesheets/semantic_ui/definitions/modules/nag.less

@@ -0,0 +1,165 @@
+/*
+ *= depend_on semantic_ui/theme.config
+ *= depend_on semantic_ui/config/modules/nag.overrides
+ *= depend_on semantic_ui/config/modules/nag.variables
+ */
+
+/*
+ * # Semantic - Nag
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributor
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'nag';
+
+@import 'semantic_ui/theme.config';
+
+
+/*******************************
+             Nag
+*******************************/
+
+.ui.nag {
+  display: none;
+  opacity: @opacity;
+  position: @position;
+
+  top: @top;
+  left: 0px;
+  z-index: @zIndex;
+
+  min-height: @minHeight;
+  width: @width;
+
+  margin: @margin;
+  padding: @padding;
+
+  background: @background;
+  box-shadow: @boxShadow;
+
+  font-size: @fontSize;
+  text-align: @textAlign;
+  color: @color;
+
+  border-radius: @topBorderRadius;
+  transition: @transition;
+}
+
+a.ui.nag {
+  cursor: pointer;
+}
+
+.ui.nag > .title {
+  display: inline-block;
+  margin: @titleMargin;
+  color: @titleColor;
+}
+
+
+.ui.nag > .close.icon {
+  cursor: pointer;
+  opacity: @closeOpacity;
+
+  position: absolute;
+  top: @closeTop;
+  right: @closeRight;
+
+  font-size: @closeSize;
+
+  margin: @closeMargin;
+  color: @closeColor;
+  transition: @closeTransition;
+}
+
+
+
+/*******************************
+             States
+*******************************/
+
+/* Hover */
+.ui.nag:hover {
+  background: @nagHoverBackground;
+  opacity: @nagHoverOpacity;
+}
+
+.ui.nag .close:hover {
+  opacity: @closeHoverOpacity;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------
+     Static
+---------------*/
+
+.ui.overlay.nag {
+  position: absolute;
+  display: block;
+}
+
+/*--------------
+     Fixed
+---------------*/
+
+.ui.fixed.nag {
+  position: fixed;
+}
+
+/*--------------
+     Bottom
+---------------*/
+
+.ui.bottom.nags,
+.ui.bottom.nag {
+  border-radius: @bottomBorderRadius;
+  top: auto;
+  bottom: @bottom;
+}
+
+/*--------------
+     White
+---------------*/
+
+.ui.inverted.nags .nag,
+.ui.inverted.nag {
+  background-color: @invertedBackground;
+  color: @darkTextColor;
+}
+.ui.inverted.nags .nag .close,
+.ui.inverted.nags .nag .title,
+.ui.inverted.nag .close,
+.ui.inverted.nag .title {
+  color: @lightTextColor;
+}
+
+
+/*******************************
+           Groups
+*******************************/
+
+.ui.nags .nag {
+  border-radius: @groupedBorderRadius !important;
+}
+.ui.nags .nag:last-child {
+  border-radius: @topBorderRadius;
+}
+.ui.bottom.nags .nag:last-child {
+  border-radius: @bottomBorderRadius;
+}
+
+.loadUIOverrides();