Add theme variables for accordion, restructure accordion so it defaults to unstyled with styled variation

RELEASE NOTES.md

@@ -6,8 +6,10 @@
 - **Form** - Standard grids now have gutters on left and right of first and last column. ``ui fitted grid`` can be used to remove these margins
 - **Checkbox** - Checkbox "enable" and "disable" have been replaced with "check" and "uncheck"
 - **Modal** - Modal ``left`` and ``right`` sections are now replaced with ``image`` and ``description``
+- **Accordion** - Accordions are not unstyled by default allowing for more compatability with other modules without having to override styles. Styled accordions are now included as a variation ``ui styled accordion``
 
 **Enhancements**
+- **Accordion** - Accordion now includes all icons in an embedded font instead of requiring icons
 - **Button** - Now has compact form, used for fitting into tight spaces
 - **Checkbox** - All styles have been redone. Standard checkboxes are now based around PX and not EM making sure there are no unusual circles or rounding issues. Checkboxes also now use a custom font for glyphs instead of CSS tricks.
 - **Dropdown** - New action combo will change text of adjacent button, select will select element but not change text

server/documents/modules/accordion.html.eco

@@ -1,11 +1,16 @@
 ---
 layout      : 'default'
 css         : 'accordion'
+element     : 'accordion'
+elementType : 'module'
 
 title       : 'Accordion'
-description : 'An accordion displays a single piece of content, while allowing the option of displaying other related content'
+description : 'An accordion concisely displays several groups of related content together '
 type        : 'UI Module'
+
+themes      : ['default']
 ---
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/accordion.less" />
 <script src="/javascript/accordion.js"></script>
 
 <%- @partial('header', { tabs: 'module' }) %>
@@ -52,9 +57,9 @@ type        : 'UI Module'
     </div>
 
     <div class="example">
-      <h4 class="ui header">Basic</h4>
-      <p>A basic accordion does not add any extra formatting</p>
-      <div class="ui basic accordion">
+      <h4 class="ui header">Styled</h4>
+      <p>A styled accordion adds basic formatting</p>
+      <div class="ui styled accordion">
         <div class="active title">
           <i class="dropdown icon"></i>
           What is a dog?
@@ -84,7 +89,7 @@ type        : 'UI Module'
     <div class="example">
       <h4 class="ui header">Fluid</h4>
       <p>An accordion can take up the width of its container</p>
-      <div class="ui fluid accordion">
+      <div class="ui styled fluid accordion">
         <div class="active title">
           <i class="dropdown icon"></i>
           What is a dog?
@@ -125,7 +130,7 @@ type        : 'UI Module'
           Level 1
         </div>
         <div class="active content">
-          <p>Welcome to level 1 where sub content formatted as its own accordion.</p>
+          Welcome to level 1 where sub content formatted as its own accordion.
           <div class="accordion">
             <div class="active title">
                 <i class="dropdown icon"></i>
@@ -171,13 +176,13 @@ type        : 'UI Module'
           Level 2
         </div>
         <div class="content">
-          <p>Welcome to level 2 where content is formatted without nested accordions</p>
+          Welcome to level 2 where content is formatted without nested accordions
           <div class="active title">
             <i class="dropdown icon"></i>
             Level 2A
           </div>
           <div class="active content">
-            <p>Level 2A Contents</p>
+            Level 2A Contents
             <div class="title">
                 <i class="dropdown icon"></i>
                 Level 2A-A
@@ -226,7 +231,7 @@ type        : 'UI Module'
               <input placeholder="Last Name" type="text">
             </div>
           </div>
-          <div class="ui basic accordion field">
+          <div class="ui accordion field">
             <div class="title">
               <i class="icon dropdown"></i>
               Optional Details
@@ -243,7 +248,7 @@ type        : 'UI Module'
     <div class="example">
       <h3 class="ui header">Menu</h3>
       <p>An accordion can be used to create content drawers inside a menu</p>
-      <div class="ui basic vertical accordion menu">
+      <div class="ui vertical accordion menu">
         <div class="item">
           <a class="active title">
             <i class="dropdown icon"></i>

server/documents/modules/modal.html.eco

@@ -10,6 +10,7 @@ type        : 'UI Module'
 
 themes      : ['default', 'fixed-width']
 ---
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/modal.less" />
 <script src="/javascript/modal.js"></script>
 
 <%- @partial('header', { tabs: 'module' }) %>

server/documents/modules/shape.html.eco

@@ -1,14 +1,19 @@
 ---
 layout      : 'default'
 css         : 'shape'
+element     : 'accordion'
+elementType : 'module'
 
 title       : 'Shape'
 description : 'A shape is a three dimensional object displayed on a two dimensional plane'
 type        : 'UI Module'
+
+themes      : ['default']
 ---
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/shape.less" />
 
-<script src="/javascript/shape.js"></script>
 <link rel="stylesheet" type="text/css" class="ui" href="/stylesheets/shape.css">
+<script src="/javascript/shape.js"></script>
 
 <%- @partial('header', { tabs: 'module' }) %>
 

src/definitions/modules/accordion.less

@@ -25,76 +25,39 @@
 
 .ui.accordion,
 .ui.accordion .accordion {
-  width: 600px;
   max-width: 100%;
-
-  font-size: 1em;
-  border-radius: 0.3125em;
-
-  background-color: #FFFFFF;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  font-size: @fontSize;
+}
+.ui.accordion .accordion {
+  margin: @childAccordionMargin;
+  padding: @childAccordionPadding;
 }
 
 .ui.accordion .title,
 .ui.accordion .accordion .title {
   cursor: pointer;
-
-  margin: 0em;
-  padding: 0.75em 1em;
-
-  color: rgba(0, 0, 0, 0.8);
-
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  transition:
-    background-color 0.2s ease-out
-  ;
-}
-.ui.accordion .title:first-child,
-.ui.accordion .accordion .title:first-child {
-  border-top: none;
+  font-family: @titleFont;
+  font-size: @titleFontSize;
+  padding: @titlePadding;
+  color: @titleColor;
 }
-
-
-/* Content */
 .ui.accordion .content,
 .ui.accordion .accordion .content {
   display: none;
-  margin: 0em;
-  padding: 1.3em 1em;
-}
-.ui.accordion .accordion .content {
-  padding: 0.8em 1em;
+  margin: @contentMargin;
+  padding: @contentPadding;
 }
 
 /* Arrow */
 .ui.accordion .title .dropdown.icon,
 .ui.accordion .accordion .title .dropdown.icon {
-  display: inline-block;
-  float: none;
-  margin: 0em 0.5em 0em 0em;
-  transition:
-    transform 0.2s ease,
-    opacity 0.2s ease
-  ;
-  transform: rotate(0deg);
+  display: @iconDisplay;
+  width: @iconWidth;
+  height: @iconHeight;
+  margin: @iconMargin;
+  transition: @iconTransition;
 }
-.ui.accordion .title .dropdown.icon:before,
-.ui.accordion .accordion .title .dropdown.icon:before {
-  content: '\f0da'/*rtl:'\f0d9'*/;
-}
-
-/*--------------
- Loose Coupling
----------------*/
 
-.ui.basic.accordion.menu {
-  background-color: #FFFFFF;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-}
-.ui.basic.accordion.menu .title,
-.ui.basic.accordion.menu .content {
-  padding: 0em;
-}
 
 
 /*******************************
@@ -102,33 +65,50 @@
 *******************************/
 
 /*--------------
-     Basic
+     Styled
 ---------------*/
 
-.ui.basic.accordion {
-  background-color: transparent;
-  box-shadow: none;
+.ui.styled.accordion {
+  width: @styledWidth;
 }
 
-.ui.basic.accordion .title,
-.ui.basic.accordion .accordion .title {
-  background-color: transparent;
+.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;
+  border-top: @styledTitleBorder;
+  transition: @styledTitleTransition;
+}
+.ui.styled.accordion .title:first-child,
+.ui.styled.accordion .accordion .title:first-child {
   border-top: none;
-  padding-left: 0em;
-  padding-right: 0em;
 }
 
-.ui.basic.accordion .content {
-  padding: 0.5em 0em;
+
+/* Content */
+.ui.styled.accordion .content,
+.ui.styled.accordion .accordion .content {
+  margin: @styledContentMargin;
+  padding: @styledContentPadding;
+}
+.ui.styled.accordion .accordion .content {
+  padding: @styledChildContentMargin;
+  padding: @styledChildContentPadding;
 }
 
-.ui.basic.accordion .active.title,
-.ui.basic.accordion .accordion .active.title {
-  background-color: transparent;
+/* Active */
+.ui.styled.accordion .active.title {
+  background: @styledActiveTitleBackground;
 }
-.ui.basic.accordion .accordion {
-  box-shadow: none;
-  padding: 1em 0.5em;
+.ui.styled.accordion .accordion .active.title {
+  background: @styledActiveChildTitleBackground;
 }
 
 
@@ -145,29 +125,21 @@
 .ui.accordion .active.title,
 .ui.accordion .accordion .title:hover,
 .ui.accordion .accordion .active.title {
-  color: rgba(0, 0, 0, 0.8);
+  color: @titleHoverColor;
 }
 
 /*--------------
      Active
 ---------------*/
 
-.ui.accordion .active.title {
-  background-color: rgba(0, 0, 0, 0.1);
-  color: rgba(0, 0, 0, 0.8);
-}
-.ui.accordion .accordion .active.title {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.8);
-}
-.ui.accordion .active.title .dropdown.icon,
-.ui.accordion .accordion .active.title .dropdown.icon {
-  transform: rotate(90deg);
-}
 .ui.accordion .active.content,
 .ui.accordion .accordion .active.content {
   display: block;
 }
+.ui.accordion .active.title,
+.ui.accordion .accordion .active.title {
+  color: @selectedTextColor;
+}
 
 
 /*******************************

src/themes/packages/default/modules/accordion.overrides

@@ -1,3 +1,38 @@
 /*******************************
            Overrides
 *******************************/
+@font-face {
+  font-family: 'Accordion';
+  src:
+    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
+    url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff')
+  ;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* Dropdown Icon */
+.ui.accordion .title .dropdown.icon,
+.ui.accordion .accordion .title .dropdown.icon {
+  font-family: Accordion;
+  line-height: 1;
+  backface-visibility: hidden;
+  font-weight: normal;
+  font-style: normal;
+  text-align: center;
+}
+
+.ui.accordion .title .dropdown.icon:before,
+.ui.accordion .accordion .title .dropdown.icon:before {
+  content: '\f0da'/*rtl:'\f0d9'*/;
+}
+
+/* Icon Rotation */
+.ui.accordion .title .dropdown.icon,
+.ui.accordion .accordion .title .dropdown.icon {
+  transform: rotate(0deg);
+}
+.ui.accordion .active.title .dropdown.icon,
+.ui.accordion .accordion .active.title .dropdown.icon {
+  transform: rotate(90deg);
+}

src/themes/packages/default/modules/accordion.variables

@@ -1,3 +1,71 @@
 /*******************************
            Accordion
 *******************************/
+
+@fontSize: 1em;
+@boxShadow: none;
+
+/* Title */
+@titleFont: @headerFont;
+@titlePadding: 0.5em 0em;
+@titleFontSize: 1em;
+@titleColor: @textColor;
+
+/* Icon */
+@iconWidth: 1.25em;
+@iconHeight: 1em;
+@iconDisplay: inline-block;
+@iconMargin: 0em 0em 0em 0em;
+@iconTransition:
+  transform 0.2s ease,
+  opacity 0.2s ease
+;
+
+/* Child Accordion */
+@childAccordionMargin: 1em 0em 0em;
+@childAccordionPadding: 0em;
+
+/* Content */
+@contentMargin: 0em;
+@contentPadding: 0.5em 0.5em 1em;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Title Hover */
+@titleHoverColor: @selectedTextColor;
+
+/* Title Active */
+@activeTitleColor: @selectedTextColor;
+
+/* Active Styled */
+@styledActiveTitleBackground: @strongTransparentBlack;
+@styledActiveChildTitleBackground: @transparentBlack;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Styled */
+@styledWidth: 600px;
+@styledBackground: @white;
+@styledBorderRadius: 0.3125em;
+@styledBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+/* Styled Title */
+@styledTitleMargin: 0em;
+@styledTitlePadding: 0.75em 1em;
+@styledTitleColor: @textColor;
+@styledTitleTransition: background-color 0.2s ease;
+@styledTitleBorder: 1px solid rgba(0, 0, 0, 0.05);
+@styledTitleTransition: background-color 0.2s ease;
+
+/* Content */
+@styledContentMargin: 0em;
+@styledContentPadding: 1.3em 1em;
+
+/* Child Content */
+@styledChildContentMargin: 0em;
+@styledChildContentPadding: 0.8em 1em;
+

src/themes/packages/default/modules/rating.overrides

@@ -11,34 +11,37 @@
   font-weight: normal;
   font-style: normal;
 }
+.ui.rating .icon {
+  font-family: 'Rating';
+  line-height: 1;
+  height: 1em;
+  width: 1.23em;
+  backface-visibility: hidden;
+  font-weight: normal;
+  font-style: normal;
+  text-align: center;
+}
 
 /* Empty Star */
 .ui.rating .icon:before {
   content: '\f006';
-  font-family: 'Rating';
 }
-
 /* Active Star */
 .ui.rating .active.icon:before {
   content: '\f005';
-  font-family: 'Rating';
 }
 
 /*-------------------
         Star
 --------------------*/
 
-
 /* Empty Star */
 .ui.star.rating .icon:before {
   content: '\f006';
-  font-family: 'Rating';
 }
-
 /* Active Star */
 .ui.star.rating .active.icon:before {
   content: '\f005';
-  font-family: 'Rating';
 }
 
 /*-------------------
@@ -48,11 +51,8 @@
 /* Empty Heart */
 .ui.heart.rating .icon:before {
   content: '\f08a';
-  font-family: 'Rating';
 }
-
 /* Active */
 .ui.heart.rating .active.icon:before {
   content: '\f004';
-  font-family: 'Rating';
 }