fomantic-ui 2.9.1-beta.4 → 2.9.1-beta.40

package/src/definitions/elements/container.less

@@ -12,10 +12,10 @@
             Theme
 *******************************/
 
-@type    : 'element';
-@element : 'container';
+@type: "element";
+@element: "container";
 
-@import (multiple) '../../theme.config';
+@import (multiple) "../../theme.config";
 
 /*******************************
             Container
@@ -23,104 +23,104 @@
 
 /* All Sizes */
 .ui.container {
-  display: block;
-  max-width: @maxWidth;
+    display: block;
+    max-width: @maxWidth;
 }
 
 /* Mobile */
 @media only screen and (max-width: @largestMobileScreen) {
-  .ui.ui.ui.container:not(.fluid) {
-    width: @mobileWidth;
-    margin-left: @mobileGutter;
-    margin-right: @mobileGutter;
-  }
-  & when (@variationContainerGrid) or (@variationContainerRelaxed) {
-    .ui.ui.ui.grid.container {
-      width: @mobileGridWidth;
+    .ui.ui.ui.container:not(.fluid) {
+        width: @mobileWidth;
+        margin-left: @mobileGutter;
+        margin-right: @mobileGutter;
     }
-    & when (@variationContainerRelaxed) {
-      .ui.ui.ui.relaxed.grid.container {
-        width: @mobileRelaxedGridWidth;
-      }
-      & when (@variationContainerVeryRelaxed) {
-        .ui.ui.ui.very.relaxed.grid.container {
-          width: @mobileVeryRelaxedGridWidth;
+    & when (@variationContainerGrid) or (@variationContainerRelaxed) {
+        .ui.ui.ui.grid.container {
+            width: @mobileGridWidth;
+        }
+        & when (@variationContainerRelaxed) {
+            .ui.ui.ui.relaxed.grid.container {
+                width: @mobileRelaxedGridWidth;
+            }
+            & when (@variationContainerVeryRelaxed) {
+                .ui.ui.ui.very.relaxed.grid.container {
+                    width: @mobileVeryRelaxedGridWidth;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 /* Tablet */
 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-  .ui.ui.ui.container:not(.fluid) {
-    width: @tabletWidth;
-    margin-left: @tabletGutter;
-    margin-right: @tabletGutter;
-  }
-  & when (@variationContainerGrid) or (@variationContainerRelaxed) {
-    .ui.ui.ui.grid.container {
-      width: @tabletGridWidth;
+    .ui.ui.ui.container:not(.fluid) {
+        width: @tabletWidth;
+        margin-left: @tabletGutter;
+        margin-right: @tabletGutter;
     }
-    & when (@variationContainerRelaxed) {
-      .ui.ui.ui.relaxed.grid.container {
-        width: @tabletRelaxedGridWidth;
-      }
-      & when (@variationContainerVeryRelaxed) {
-        .ui.ui.ui.very.relaxed.grid.container {
-          width: @tabletVeryRelaxedGridWidth;
+    & when (@variationContainerGrid) or (@variationContainerRelaxed) {
+        .ui.ui.ui.grid.container {
+            width: @tabletGridWidth;
+        }
+        & when (@variationContainerRelaxed) {
+            .ui.ui.ui.relaxed.grid.container {
+                width: @tabletRelaxedGridWidth;
+            }
+            & when (@variationContainerVeryRelaxed) {
+                .ui.ui.ui.very.relaxed.grid.container {
+                    width: @tabletVeryRelaxedGridWidth;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 /* Small Monitor */
 @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
-  .ui.ui.ui.container:not(.fluid) {
-    width: @computerWidth;
-    margin-left: @computerGutter;
-    margin-right: @computerGutter;
-  }
-  & when (@variationContainerGrid) or (@variationContainerRelaxed) {
-    .ui.ui.ui.grid.container {
-      width: @computerGridWidth;
+    .ui.ui.ui.container:not(.fluid) {
+        width: @computerWidth;
+        margin-left: @computerGutter;
+        margin-right: @computerGutter;
     }
-    & when (@variationContainerRelaxed) {
-      .ui.ui.ui.relaxed.grid.container {
-        width: @computerRelaxedGridWidth;
-      }
-      & when (@variationContainerVeryRelaxed) {
-        .ui.ui.ui.very.relaxed.grid.container {
-          width: @computerVeryRelaxedGridWidth;
+    & when (@variationContainerGrid) or (@variationContainerRelaxed) {
+        .ui.ui.ui.grid.container {
+            width: @computerGridWidth;
+        }
+        & when (@variationContainerRelaxed) {
+            .ui.ui.ui.relaxed.grid.container {
+                width: @computerRelaxedGridWidth;
+            }
+            & when (@variationContainerVeryRelaxed) {
+                .ui.ui.ui.very.relaxed.grid.container {
+                    width: @computerVeryRelaxedGridWidth;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 /* Large Monitor */
 @media only screen and (min-width: @largeMonitorBreakpoint) {
-  .ui.ui.ui.container:not(.fluid) {
-    width: @largeMonitorWidth;
-    margin-left: @largeMonitorGutter;
-    margin-right: @largeMonitorGutter;
-  }
-  & when (@variationContainerGrid) or (@variationContainerRelaxed) {
-    .ui.ui.ui.grid.container {
-      width: @largeMonitorGridWidth;
+    .ui.ui.ui.container:not(.fluid) {
+        width: @largeMonitorWidth;
+        margin-left: @largeMonitorGutter;
+        margin-right: @largeMonitorGutter;
     }
-    & when (@variationContainerRelaxed) {
-      .ui.ui.ui.relaxed.grid.container {
-        width: @largeMonitorRelaxedGridWidth;
-      }
-      & when (@variationContainerVeryRelaxed) {
-        .ui.ui.ui.very.relaxed.grid.container {
-          width: @largeMonitorVeryRelaxedGridWidth;
+    & when (@variationContainerGrid) or (@variationContainerRelaxed) {
+        .ui.ui.ui.grid.container {
+            width: @largeMonitorGridWidth;
+        }
+        & when (@variationContainerRelaxed) {
+            .ui.ui.ui.relaxed.grid.container {
+                width: @largeMonitorRelaxedGridWidth;
+            }
+            & when (@variationContainerVeryRelaxed) {
+                .ui.ui.ui.very.relaxed.grid.container {
+                    width: @largeMonitorVeryRelaxedGridWidth;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 /*******************************
@@ -128,170 +128,170 @@
 *******************************/
 
 & when (@variationContainerText) {
-  /* Text Container */
-  .ui.text.container {
-    font-family: @textFontFamily;
-    max-width: @textWidth;
-    line-height: @textLineHeight;
-    font-size: @textSize;
-  }
+    /* Text Container */
+    .ui.text.container {
+        font-family: @textFontFamily;
+        max-width: @textWidth;
+        line-height: @textLineHeight;
+        font-size: @textSize;
+    }
 }
 
 & when (@variationContainerWide) {
-  /* Wide Container */
-  @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-    .ui.ui.ui.wide.container {
-      width: @tabletWideWidth;
+    /* Wide Container */
+    @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+        .ui.ui.ui.wide.container {
+            width: @tabletWideWidth;
+        }
     }
-  }
-  @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
-    .ui.ui.ui.wide.container {
-      width: @computerWideWidth;
+    @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+        .ui.ui.ui.wide.container {
+            width: @computerWideWidth;
+        }
     }
-  }
-  @media only screen and (min-width: @largeMonitorBreakpoint) {
-    .ui.ui.ui.wide.container {
-      width: @largeMonitorWideWidth;
+    @media only screen and (min-width: @largeMonitorBreakpoint) {
+        .ui.ui.ui.wide.container {
+            width: @largeMonitorWideWidth;
+        }
     }
-  }
 }
 
 & when (@variationContainerFluid) {
-  /* Fluid */
-  .ui.fluid.container {
-    width: 100%;
-  }
+    /* Fluid */
+    .ui.fluid.container {
+        width: 100%;
+    }
 }
 
 /*******************************
            Variations
 *******************************/
 & when (@variationContainerAligned) {
-  .ui[class*="left aligned"].container {
-    text-align: left;
-  }
-  .ui[class*="center aligned"].container {
-    text-align: center;
-  }
-  .ui[class*="right aligned"].container {
-    text-align: right;
-  }
+    .ui[class*="left aligned"].container {
+        text-align: left;
+    }
+    .ui[class*="center aligned"].container {
+        text-align: center;
+    }
+    .ui[class*="right aligned"].container {
+        text-align: right;
+    }
 }
 & when (@variationContainerJustified) {
-  .ui.justified.container {
-    text-align: justify;
-    hyphens: auto;
-  }
+    .ui.justified.container {
+        text-align: justify;
+        hyphens: auto;
+    }
 }
 & when (@variationContainerScrolling) {
-  /*--------------
-    Scrolling
-  ---------------*/
-  .ui.scrolling.container {
-    overflow: auto;
-  }
-  @media only screen and (max-width : @largestMobileScreen) {
-    & when (@variationContainerScrollingShort) {
-      .ui.scrolling.container.short {
-        max-height: @scrollingMobileMaxHeight * 0.75;
-      }
-    }
-    & when (@variationContainerScrollingVeryShort) {
-      .ui.scrolling.container[class*="very short"] {
-        max-height: @scrollingMobileMaxHeight * 0.5;
-      }
-    }
+    /* --------------
+      Scrolling
+    --------------- */
     .ui.scrolling.container {
-      max-height: @scrollingMobileMaxHeight;
+        overflow: auto;
+        overscroll-behavior: @overscrollBehavior;
     }
-    & when (@variationContainerScrollingLong) {
-      .ui.scrolling.container.long {
-        max-height: @scrollingMobileMaxHeight * 2;
-      }
-    }
-    & when (@variationContainerScrollingVeryLong) {
-      .ui.scrolling.container[class*="very long"] {
-        max-height: @scrollingMobileMaxHeight * 3;
-      }
+    @media only screen and (max-width: @largestMobileScreen) {
+        & when (@variationContainerScrollingShort) {
+            .ui.scrolling.container.short {
+                max-height: @scrollingMobileMaxHeight * 0.75;
+            }
+        }
+        & when (@variationContainerScrollingVeryShort) {
+            .ui.scrolling.container[class*="very short"] {
+                max-height: @scrollingMobileMaxHeight * 0.5;
+            }
+        }
+        .ui.scrolling.container {
+            max-height: @scrollingMobileMaxHeight;
+        }
+        & when (@variationContainerScrollingLong) {
+            .ui.scrolling.container.long {
+                max-height: @scrollingMobileMaxHeight * 2;
+            }
+        }
+        & when (@variationContainerScrollingVeryLong) {
+            .ui.scrolling.container[class*="very long"] {
+                max-height: @scrollingMobileMaxHeight * 3;
+            }
+        }
     }
-  }
 
-  @media only screen and (min-width: @tabletBreakpoint) {
-    & when (@variationContainerScrollingShort) {
-      .ui.scrolling.container.short {
-        max-height: @scrollingTabletMaxHeight * 0.75;
-      }
-    }
-    & when (@variationContainerScrollingVeryShort) {
-      .ui.scrolling.container[class*="very short"] {
-        max-height: @scrollingTabletMaxHeight * 0.5;
-      }
-    }
-    .ui.scrolling.container {
-      max-height: @scrollingTabletMaxHeight;
-    }
-    & when (@variationContainerScrollingLong) {
-      .ui.scrolling.container.long {
-        max-height: @scrollingTabletMaxHeight * 2;
-      }
-    }
-    & when (@variationContainerScrollingVeryLong) {
-      .ui.scrolling.container[class*="very long"] {
-        max-height: @scrollingTabletMaxHeight * 3;
-      }
-    }
-  }
-  @media only screen and (min-width: @computerBreakpoint) {
-    & when (@variationContainerScrollingShort) {
-      .ui.scrolling.container.short {
-        max-height: @scrollingComputerMaxHeight * 0.75;
-      }
-    }
-    & when (@variationContainerScrollingVeryShort) {
-      .ui.scrolling.container[class*="very short"] {
-        max-height: @scrollingComputerMaxHeight * 0.5;
-      }
-    }
-    .ui.scrolling.container {
-      max-height: @scrollingComputerMaxHeight;
-    }
-    & when (@variationContainerScrollingLong) {
-      .ui.scrolling.container.long {
-        max-height: @scrollingComputerMaxHeight * 2;
-      }
-    }
-    & when (@variationContainerScrollingVeryLong) {
-      .ui.scrolling.container[class*="very long"]{
-        max-height: @scrollingComputerMaxHeight * 3;
-      }
-    }
-  }
-  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-    & when (@variationContainerScrollingShort) {
-      .ui.scrolling.container.short {
-        max-height: @scrollingWidescreenMaxHeight * 0.75;
-      }
-    }
-    & when (@variationContainerScrollingVeryShort) {
-      .ui.scrolling.container[class*="very short"] {
-        max-height: @scrollingWidescreenMaxHeight * 0.5;
-      }
-    }
-    .ui.scrolling.container {
-      max-height: @scrollingWidescreenMaxHeight;
+    @media only screen and (min-width: @tabletBreakpoint) {
+        & when (@variationContainerScrollingShort) {
+            .ui.scrolling.container.short {
+                max-height: @scrollingTabletMaxHeight * 0.75;
+            }
+        }
+        & when (@variationContainerScrollingVeryShort) {
+            .ui.scrolling.container[class*="very short"] {
+                max-height: @scrollingTabletMaxHeight * 0.5;
+            }
+        }
+        .ui.scrolling.container {
+            max-height: @scrollingTabletMaxHeight;
+        }
+        & when (@variationContainerScrollingLong) {
+            .ui.scrolling.container.long {
+                max-height: @scrollingTabletMaxHeight * 2;
+            }
+        }
+        & when (@variationContainerScrollingVeryLong) {
+            .ui.scrolling.container[class*="very long"] {
+                max-height: @scrollingTabletMaxHeight * 3;
+            }
+        }
     }
-    & when (@variationContainerScrollingLong) {
-      .ui.scrolling.container.long {
-        max-height: @scrollingWidescreenMaxHeight * 2;
-      }
+    @media only screen and (min-width: @computerBreakpoint) {
+        & when (@variationContainerScrollingShort) {
+            .ui.scrolling.container.short {
+                max-height: @scrollingComputerMaxHeight * 0.75;
+            }
+        }
+        & when (@variationContainerScrollingVeryShort) {
+            .ui.scrolling.container[class*="very short"] {
+                max-height: @scrollingComputerMaxHeight * 0.5;
+            }
+        }
+        .ui.scrolling.container {
+            max-height: @scrollingComputerMaxHeight;
+        }
+        & when (@variationContainerScrollingLong) {
+            .ui.scrolling.container.long {
+                max-height: @scrollingComputerMaxHeight * 2;
+            }
+        }
+        & when (@variationContainerScrollingVeryLong) {
+            .ui.scrolling.container[class*="very long"] {
+                max-height: @scrollingComputerMaxHeight * 3;
+            }
+        }
     }
-    & when (@variationContainerScrollingVeryLong) {
-      .ui.scrolling.container[class*="very long"] {
-        max-height: @scrollingWidescreenMaxHeight * 3;
-      }
+    @media only screen and (min-width: @widescreenMonitorBreakpoint) {
+        & when (@variationContainerScrollingShort) {
+            .ui.scrolling.container.short {
+                max-height: @scrollingWidescreenMaxHeight * 0.75;
+            }
+        }
+        & when (@variationContainerScrollingVeryShort) {
+            .ui.scrolling.container[class*="very short"] {
+                max-height: @scrollingWidescreenMaxHeight * 0.5;
+            }
+        }
+        .ui.scrolling.container {
+            max-height: @scrollingWidescreenMaxHeight;
+        }
+        & when (@variationContainerScrollingLong) {
+            .ui.scrolling.container.long {
+                max-height: @scrollingWidescreenMaxHeight * 2;
+            }
+        }
+        & when (@variationContainerScrollingVeryLong) {
+            .ui.scrolling.container[class*="very long"] {
+                max-height: @scrollingWidescreenMaxHeight * 3;
+            }
+        }
     }
-  }
 }
 
-
 .loadUIOverrides();