fomantic-ui 2.9.0-beta.3 → 2.9.0-beta.301

package/src/definitions/modules/accordion.less

@@ -1,219 +1,371 @@
-/*!
- * # Fomantic-UI - Accordion
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Theme
-*******************************/
-
-@type    : 'module';
-@element : 'accordion';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
-            Accordion
-*******************************/
-
-.ui.accordion,
-.ui.accordion .accordion {
-  max-width: 100%;
-}
-.ui.accordion .accordion {
-  margin: @childAccordionMargin;
-  padding: @childAccordionPadding;
-}
-
-/* Title */
-.ui.accordion .title,
-.ui.accordion .accordion .title {
-  cursor: pointer;
-}
-
-/* Default Styling */
-.ui.accordion .title:not(.ui) {
-  padding: @titlePadding;
-  font-family: @titleFont;
-  font-size: @titleFontSize;
-  color: @titleColor;
-}
-
-/* Default Styling */
-.ui.accordion:not(.styled) .title ~ .content:not(.ui),
-.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
-  margin: @contentMargin;
-  padding: @contentPadding;
-}
-.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
-  padding-bottom: 0;
-}
-
-/* Arrow */
-.ui.accordion .title .dropdown.icon,
-.ui.accordion .accordion .title .dropdown.icon {
-  display: @iconDisplay;
-  float: @iconFloat;
-  opacity: @iconOpacity;
-  width: @iconWidth;
-  height: @iconHeight;
-  margin: @iconMargin;
-  padding: @iconPadding;
-  font-size: @iconFontSize;
-  transition: @iconTransition;
-  vertical-align: @iconVerticalAlign;
-  transform: @iconTransform;
-}
-
-/*--------------
-    Coupling
----------------*/
-
-/* Menu */
-.ui.accordion.menu .item .title {
-  display: block;
-  padding: @menuTitlePadding;
-}
-.ui.accordion.menu .item .title > .dropdown.icon {
-  float: @menuIconFloat;
-  margin: @menuIconMargin;
-  transform: @menuIconTransform;
-}
-
-/* Header */
-.ui.accordion .ui.header .dropdown.icon {
-  font-size: @iconFontSize;
-  margin: @iconMargin;
-}
-
-/*******************************
-            States
-*******************************/
-
-.ui.accordion .active.title .dropdown.icon,
-.ui.accordion .accordion .active.title .dropdown.icon {
-  transform: @activeIconTransform;
-}
-
-.ui.accordion.menu .item .active.title > .dropdown.icon {
-  transform: @activeIconTransform;
-}
-
-/*******************************
-            Types
-*******************************/
-
-& when (@variationAccordionStyled) {
-  /*--------------
-       Styled
-  ---------------*/
-
-  .ui.styled.accordion {
-    width: @styledWidth;
-  }
-
-  .ui.styled.accordion,
-  .ui.styled.accordion .accordion {
-    border-radius: @styledBorderRadius;
-    background: @styledBackground;
-    box-shadow: @styledBoxShadow;
-  }
-  .ui.styled.accordion .title,
-  .ui.styled.accordion .accordion .title {
-    margin: @styledTitleMargin;
-    padding: @styledTitlePadding;
-    color: @styledTitleColor;
-    font-weight: @styledTitleFontWeight;
-    border-top: @styledTitleBorder;
-    transition: @styledTitleTransition;
-  }
-  .ui.styled.accordion > .title:first-child,
-  .ui.styled.accordion .accordion .title:first-child {
-    border-top: none;
-  }
-
-
-  /* Content */
-  .ui.styled.accordion .content,
-  .ui.styled.accordion .accordion .content {
-    margin: @styledContentMargin;
-    padding: @styledContentPadding;
-  }
-  .ui.styled.accordion .accordion .content {
-    margin: @styledChildContentMargin;
-    padding: @styledChildContentPadding;
-  }
-
-
-  /* Hover */
-  .ui.styled.accordion .title:hover,
-  .ui.styled.accordion .active.title,
-  .ui.styled.accordion .accordion .title:hover,
-  .ui.styled.accordion .accordion .active.title {
-    background: @styledTitleHoverBackground;
-    color: @styledTitleHoverColor;
-  }
-  .ui.styled.accordion .accordion .title:hover,
-  .ui.styled.accordion .accordion .active.title {
-    background: @styledHoverChildTitleBackground;
-    color: @styledHoverChildTitleColor;
-  }
-
-
-  /* Active */
-  .ui.styled.accordion .active.title {
-    background: @styledActiveTitleBackground;
-    color: @styledActiveTitleColor;
-  }
-  .ui.styled.accordion .accordion .active.title {
-    background: @styledActiveChildTitleBackground;
-    color: @styledActiveChildTitleColor;
-  }
-}
-
-
-/*******************************
-            States
-*******************************/
-
-/*--------------
-   Not Active
----------------*/
-
-.ui.accordion .title ~ .content:not(.active),
-.ui.accordion .accordion .title ~ .content:not(.active) {
-  display: none;
-}
-
-/*******************************
-           Variations
-*******************************/
-
-& when (@variationAccordionFluid) {
-  /*--------------
-       Fluid
-  ---------------*/
-
-  .ui.fluid.accordion,
-  .ui.fluid.accordion .accordion {
-    width: 100%;
-  }
-}
-
-& when (@variationAccordionInverted) {
-  /*--------------
-       Inverted
-  ---------------*/
-
-  .ui.inverted.accordion .title:not(.ui) {
-    color: @invertedTitleColor;
-  }
-}
-
-.loadUIOverrides();
-
+/*!
+ * # Fomantic-UI - Accordion
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'accordion';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Accordion
+*******************************/
+
+.ui.accordion,
+.ui.accordion .accordion {
+  max-width: 100%;
+}
+.ui.accordion .accordion {
+  margin: @childAccordionMargin;
+  padding: @childAccordionPadding;
+}
+
+/* Title */
+.ui.accordion.menu .item > .title,
+.ui.accordion > .title,
+.ui.accordion .accordion > .title {
+  cursor: pointer;
+  padding: @titlePadding;
+  font-family: @titleFont;
+  font-size: @titleFontSize;
+  color: @titleColor;
+  list-style: none;
+  line-height: @titleLineHeight;
+}
+
+/* Default Styling */
+.ui.accordion:not(.styled) .title ~ .content,
+.ui.accordion:not(.styled) .accordion .title ~ .content {
+  margin: @contentMargin;
+  padding: @contentPadding;
+}
+.ui.accordion:not(.styled) .title ~ .content:last-child {
+  padding-bottom: 0;
+}
+
+/* Arrow */
+.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .title > .dropdown.icon,
+.ui.accordion .accordion .title > .dropdown.icon {
+  display: @iconDisplay;
+  float: @iconFloat;
+  opacity: @iconOpacity;
+  width: @iconWidth;
+  height: @iconHeight;
+  margin: @iconMargin;
+  padding: @iconPadding;
+  font-size: @iconFontSize;
+  transition: @iconTransition;
+  vertical-align: @iconVerticalAlign;
+  transform: @iconTransform;
+  &.right when (@variationAccordionRightDropdown) {
+    float:right;
+    transform: @iconTransformRight;
+  }
+}
+
+/*--------------
+    Coupling
+---------------*/
+
+/* Menu */
+.ui.accordion.menu .item .title {
+  display: block;
+  padding: @menuTitlePadding;
+}
+.ui.accordion.menu .item .title > .dropdown.icon {
+  float: @menuIconFloat;
+  margin: @menuIconMargin;
+  transform: @menuIconTransform;
+}
+
+/* Header */
+.ui.accordion .ui.header > .dropdown.icon {
+  font-size: @iconFontSize;
+  margin: @iconMargin;
+}
+
+/*******************************
+            States
+*******************************/
+
+.ui.accordion[open] > .title > .dropdown.icon,
+.ui.accordion .accordion[open] > .title > .dropdown.icon,
+.ui.accordion .active.title > .dropdown.icon,
+.ui.accordion .accordion .active.title > .dropdown.icon {
+  transform: @activeIconTransform;
+}
+
+.ui.accordion.menu .item .active.title > .dropdown.icon {
+  transform: @activeIconTransform;
+}
+
+/*******************************
+            Types
+*******************************/
+
+& when (@variationAccordionStyled) {
+  /*--------------
+       Styled
+  ---------------*/
+
+  .ui.styled.accordion {
+    width: @styledWidth;
+  }
+
+  .ui.styled.accordion,
+  .ui.styled.accordion .accordion {
+    border-radius: @styledBorderRadius;
+    background: @styledBackground;
+    box-shadow: @styledBoxShadow;
+  }
+  .ui.styled.accordion > .title,
+  .ui.styled.accordion .accordion > .title {
+    margin: @styledTitleMargin;
+    padding: @styledTitlePadding;
+    color: @styledTitleColor;
+    font-weight: @styledTitleFontWeight;
+    border-top: @styledTitleBorder;
+    transition: @styledTitleTransition;
+  }
+  .ui.styled.accordion > .title:first-child,
+  .ui.styled.accordion .accordion > .title:first-child {
+    border-top: none;
+  }
+
+
+  /* Content */
+  .ui.styled.accordion > .content {
+    margin: @styledContentMargin;
+    padding: @styledContentPadding;
+  }
+  .ui.styled.accordion .accordion > .content {
+    margin: @styledChildContentMargin;
+    padding: @styledChildContentPadding;
+  }
+
+
+  /* Hover */
+  .ui.styled.accordion > .title:hover {
+    background: @styledTitleHoverBackground;
+    color: @styledTitleHoverColor;
+  }
+  .ui.styled.accordion .accordion > .title:hover {
+    background: @styledHoverChildTitleBackground;
+    color: @styledHoverChildTitleColor;
+  }
+
+
+  /* Active */
+  .ui.styled.accordion[open] > .title,
+  .ui.styled.accordion .active.title {
+    background: @styledActiveTitleBackground;
+    color: @styledActiveTitleColor;
+  }
+  .ui.styled.accordion .accordion[open] > .title,
+  .ui.styled.accordion .accordion .active.title {
+    background: @styledActiveChildTitleBackground;
+    color: @styledActiveChildTitleColor;
+  }
+}
+
+& when (@variationAccordionCompact) {
+  /*--------------
+       Compact
+  ---------------*/
+
+  /* Default Styling */
+
+  .ui.compact.accordion:not(.styled) > .title,
+  .ui.compact.accordion:not(.styled) .accordion > .title {
+    padding: @titlePaddingCompact;
+  }
+
+  .ui.compact.accordion:not(.styled) .title ~ .content,
+  .ui.compact.accordion:not(.styled) .accordion .title ~ .content {
+    padding: @contentPaddingCompact;
+  }
+
+  /* Styled */
+
+  .ui.compact.styled.accordion > .title,
+  .ui.compact.styled.accordion .accordion > .title {
+    padding: @styledTitlePaddingCompact;
+  }
+
+  .ui.compact.styled.accordion .title ~ .content,
+  .ui.compact.styled.accordion .accordion .title ~ .content {
+    padding: @styledContentPaddingCompact;
+  }
+}
+  /*--------------
+    Very Compact
+  ---------------*/
+
+& when (@variationAccordionVeryCompact) {
+  .ui[class*="very compact"].accordion:not(.styled) > .title,
+  .ui[class*="very compact"].accordion:not(.styled) .accordion > .title {
+    padding: @titlePaddingVeryCompact;
+  }
+
+  .ui[class*="very compact"].accordion:not(.styled) .title ~ .content,
+  .ui[class*="very compact"].accordion:not(.styled) .accordion .title ~ .content {
+    padding: @contentPaddingVeryCompact;
+  }
+
+  .ui[class*="very compact"].styled.accordion > .title,
+  .ui[class*="very compact"].styled.accordion .accordion > .title {
+    padding: @styledTitlePaddingVeryCompact;
+  }
+
+  .ui[class*="very compact"].styled.accordion .title ~ .content,
+  .ui[class*="very compact"].styled.accordion .accordion .title ~ .content {
+    padding: @styledContentPaddingVeryCompact;
+  }
+}
+
+
+/*******************************
+            States
+*******************************/
+
+/*--------------
+   Not Active
+---------------*/
+
+.ui.accordion:not(details) .title ~ .content:not(.active),
+.ui.accordion .accordion:not(details) .title ~ .content:not(.active) {
+  display: none;
+}
+
+/*******************************
+           Variations
+*******************************/
+
+& when (@variationAccordionFluid) {
+  /*--------------
+       Fluid
+  ---------------*/
+
+  .ui.fluid.accordion,
+  .ui.fluid.accordion .accordion {
+    width: 100%;
+  }
+}
+
+& when (@variationAccordionInverted) {
+  /*--------------
+       Inverted
+  ---------------*/
+
+  .ui.inverted.accordion.menu .item > .title,
+  .ui.inverted.accordion > .title,
+  .ui.inverted.accordion .accordion > .title {
+    color: @invertedTitleColor;
+  }
+  & when (@variationAccordionStyled) {
+    .ui.inverted.styled.accordion,
+    .ui.inverted.styled.accordion .accordion {
+      background: @invertedStyledBackground;
+      box-shadow: @invertedStyledBoxShadow;
+    }
+    .ui.inverted.styled.accordion > .title,
+    .ui.inverted.styled.accordion .accordion > .title {
+      color: @invertedStyledTitleColor;
+      border-top: @invertedStyledTitleBorder;
+    }
+
+    /* Hover */
+    .ui.inverted.styled.accordion > .title:hover {
+      background: @invertedStyledTitleHoverBackground;
+      color: @invertedStyledTitleHoverColor;
+    }
+    .ui.inverted.styled.accordion .accordion > .title:hover {
+      background: @invertedStyledHoverChildTitleBackground;
+      color: @invertedStyledHoverChildTitleColor;
+    }
+
+    /* Active */
+    .ui.inverted.styled.accordion[open] > .title,
+    .ui.inverted.styled.accordion .active.title {
+      background: @invertedStyledActiveTitleBackground;
+      color: @invertedStyledActiveTitleColor;
+    }
+    .ui.inverted.styled.accordion .accordion[open] > .title,
+    .ui.inverted.styled.accordion .accordion .active.title {
+      background: @invertedStyledActiveChildTitleBackground;
+      color: @invertedStyledActiveChildTitleColor;
+    }
+  }
+}
+
+& when (@variationAccordionBasicStyled) {
+  .ui.basic.styled.accordion,
+  .ui.basic.styled.accordion .accordion {
+    background: transparent;
+    box-shadow: none;
+  }
+  .ui.basic.styled.accordion > .title,
+  .ui.basic.styled.accordion .accordion > .title {
+    border: none;
+    color: @basicStyledTitleColor;
+  }
+  .ui.basic.styled.accordion > .title:hover,
+  .ui.basic.styled.accordion .accordion > .title:hover {
+    background: transparent;
+    color: @basicStyledTitleHoverColor;
+  }
+  .ui.basic.styled.accordion[open] > .title,
+  .ui.basic.styled.accordion .active.title,
+  .ui.basic.styled.accordion .accordion[open] > .title,
+  .ui.basic.styled.accordion .accordion .active.title {
+    background: transparent;
+    color: @basicStyledActiveTitleColor;
+  }
+  & when (@variationAccordionInverted) {
+    .ui.inverted.basic.styled.accordion > .title,
+    .ui.inverted.basic.styled.accordion .accordion > .title {
+      background: transparent;
+      color: @invertedBasicStyledTitleColor;
+    }
+    .ui.inverted.basic.styled.accordion > .title:hover,
+    .ui.inverted.basic.styled.accordion .accordion > .title:hover {
+      background: transparent;
+      color: @invertedBasicStyledTitleHoverColor;
+    }
+    .ui.inverted.basic.styled.accordion[open] > .title,
+    .ui.inverted.basic.styled.accordion .active.title,
+    .ui.inverted.basic.styled.accordion .accordion[open] > .title,
+    .ui.inverted.basic.styled.accordion .accordion .active.title {
+      background: transparent;
+      color: @invertedBasicStyledActiveTitleColor;
+    }
+  }
+}
+
+& when (@variationAccordionTree) {
+  .ui.tree.accordion:not(.styled) .title ~ .content,
+  .ui.tree.accordion:not(.styled) .accordion .title ~ .content {
+    padding:@treeContentPadding;
+  }
+  .ui.tree.accordion > .content,
+  .ui.tree.accordion .accordion > .content {
+    margin-left: @treeContentLeftMargin;
+  }
+  .ui.tree.accordion .accordion {
+    margin-top: @treeContentTopMargin;
+  }
+}
+
+.loadUIOverrides();
+