diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index 94797dabb..ddfc5f5d3 100755 --- a/RELEASE NOTES.md +++ b/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 diff --git a/server/documents/modules/accordion.html.eco b/server/documents/modules/accordion.html.eco index 76e35779a..4d7a2dd45 100755 --- a/server/documents/modules/accordion.html.eco +++ b/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'] --- + <%- @partial('header', { tabs: 'module' }) %> @@ -52,9 +57,9 @@ type : 'UI Module'
-

Basic

-

A basic accordion does not add any extra formatting

-
+

Styled

+

A styled accordion adds basic formatting

+
What is a dog? @@ -84,7 +89,7 @@ type : 'UI Module'

Fluid

An accordion can take up the width of its container

-
+
What is a dog? @@ -125,7 +130,7 @@ type : 'UI Module' Level 1
-

Welcome to level 1 where sub content formatted as its own accordion.

+ Welcome to level 1 where sub content formatted as its own accordion.
@@ -171,13 +176,13 @@ type : 'UI Module' Level 2
-

Welcome to level 2 where content is formatted without nested accordions

+ Welcome to level 2 where content is formatted without nested accordions
Level 2A
-

Level 2A Contents

+ Level 2A Contents
Level 2A-A @@ -226,7 +231,7 @@ type : 'UI Module'
-
+
Optional Details @@ -243,7 +248,7 @@ type : 'UI Module'

Menu

An accordion can be used to create content drawers inside a menu

-
+
diff --git a/server/documents/modules/modal.html.eco b/server/documents/modules/modal.html.eco index 906753336..fab0b7019 100755 --- a/server/documents/modules/modal.html.eco +++ b/server/documents/modules/modal.html.eco @@ -10,6 +10,7 @@ type : 'UI Module' themes : ['default', 'fixed-width'] --- + <%- @partial('header', { tabs: 'module' }) %> diff --git a/server/documents/modules/shape.html.eco b/server/documents/modules/shape.html.eco index b6820233f..73d556e36 100755 --- a/server/documents/modules/shape.html.eco +++ b/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'] --- + - + <%- @partial('header', { tabs: 'module' }) %> diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less index 65a2ad51c..9d1cbfc4f 100755 --- a/src/definitions/modules/accordion.less +++ b/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; +} /******************************* diff --git a/src/themes/packages/default/modules/accordion.overrides b/src/themes/packages/default/modules/accordion.overrides index c5c53367f..315643b44 100644 --- a/src/themes/packages/default/modules/accordion.overrides +++ b/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); +} \ No newline at end of file diff --git a/src/themes/packages/default/modules/accordion.variables b/src/themes/packages/default/modules/accordion.variables index cc2c14325..c8928bdf9 100644 --- a/src/themes/packages/default/modules/accordion.variables +++ b/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; + diff --git a/src/themes/packages/default/modules/rating.overrides b/src/themes/packages/default/modules/rating.overrides index 7c639578f..7ce9917c1 100644 --- a/src/themes/packages/default/modules/rating.overrides +++ b/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'; } \ No newline at end of file