summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJohnAlbin2016-05-21 10:06:28 (GMT)
committerJohnAlbin2016-05-21 10:08:16 (GMT)
commitfec8a66d2b3f283109789cb2e4b554eedd9ac140 (patch)
tree8764d72adad58b601068f48f61e86e4e21928dc6
parent1ff7bd2b5a314539a94e1f027b6e454190c41200 (diff)
Build files.7.x-6.1
-rw-r--r--STARTERKIT/css/styles.css1246
-rw-r--r--STARTERKIT/styleguide/index.html13
-rw-r--r--STARTERKIT/styleguide/section-base.html61
-rw-r--r--STARTERKIT/styleguide/section-components.html703
-rw-r--r--STARTERKIT/styleguide/section-forms.html133
-rw-r--r--STARTERKIT/styleguide/section-layouts.html13
-rw-r--r--STARTERKIT/styleguide/section-navigation.html711
-rw-r--r--STARTERKIT/styleguide/section-sass.html43
-rw-r--r--zen-internals/css/styles.css1246
9 files changed, 2183 insertions, 1986 deletions
diff --git a/STARTERKIT/css/styles.css b/STARTERKIT/css/styles.css
index e08fde9..12b9ee9 100644
--- a/STARTERKIT/css/styles.css
+++ b/STARTERKIT/css/styles.css
@@ -31,7 +31,6 @@ figcaption,
figure,
footer,
header,
-hgroup,
main,
menu,
nav,
@@ -45,7 +44,6 @@ canvas,
progress,
video {
display: inline-block;
- vertical-align: baseline;
}
audio:not([controls]) {
@@ -53,16 +51,19 @@ audio:not([controls]) {
height: 0;
}
-[hidden] {
- display: none;
+progress {
+ vertical-align: baseline;
}
-template {
+template,
+[hidden] {
display: none;
}
:link {
color: #0072b9;
+ background-color: transparent;
+ -webkit-text-decoration-skip: objects;
}
:visited {
@@ -71,12 +72,11 @@ template {
a:active {
color: #c00;
- background-color: transparent;
}
a:active,
a:hover {
- outline: 0;
+ outline-width: 0;
}
@media print {
@@ -140,7 +140,9 @@ h6 {
}
abbr[title] {
- border-bottom: 1px dotted;
+ border-bottom: 0;
+ text-decoration: underline;
+ text-decoration: underline dotted;
}
@media print {
@@ -151,7 +153,21 @@ abbr[title] {
b,
strong {
- font-weight: bold;
+ font-weight: inherit;
+}
+
+strong,
+b {
+ font-weight: bolder;
+}
+
+pre,
+code,
+kbd,
+samp,
+var {
+ font-family: Menlo, "DejaVu Sans Mono", "Ubuntu Mono", Courier, "Courier New", monospace, sans-serif;
+ font-size: 1em;
}
dfn {
@@ -159,7 +175,7 @@ dfn {
}
mark {
- background: #fd0;
+ background-color: #fd0;
color: #000;
}
@@ -175,14 +191,14 @@ sup {
vertical-align: baseline;
}
-sup {
- top: -.5em;
-}
-
sub {
bottom: -.25em;
}
+sup {
+ top: -.5em;
+}
+
.divider,
hr {
margin: 1.5rem 0;
@@ -194,6 +210,10 @@ hr {
margin-top: 1.5rem;
}
+blockquote {
+ margin: 1.5rem 2rem;
+}
+
dl,
menu,
ol,
@@ -212,7 +232,7 @@ dd {
margin: 0 0 0 32px;
}
-[dir='rtl'] dd {
+[dir="rtl"] dd {
margin: 0 32px 0 0;
}
@@ -222,16 +242,12 @@ ul {
padding: 0 0 0 32px;
}
-[dir='rtl'] menu, [dir='rtl']
-ol, [dir='rtl']
+[dir="rtl"] menu, [dir="rtl"]
+ol, [dir="rtl"]
ul {
padding: 0 32px 0 0;
}
-blockquote {
- margin: 1.5rem 2rem;
-}
-
figure {
margin: 1.5rem 0;
}
@@ -239,6 +255,7 @@ figure {
hr {
box-sizing: content-box;
height: 0;
+ overflow: visible;
}
p,
@@ -246,20 +263,8 @@ pre {
margin: 1.5rem 0;
}
-code,
-kbd,
-samp,
-var, pre {
- font-family: Menlo, "DejaVu Sans Mono", "Ubuntu Mono", Courier, "Courier New", monospace, sans-serif;
- font-size: 1em;
-}
-
-pre {
- overflow: auto;
-}
-
img {
- border: 0;
+ border-style: none;
}
img,
@@ -277,8 +282,6 @@ button,
[type='button'],
[type='reset'],
[type='submit'] {
- -moz-appearance: button;
- -webkit-appearance: button;
display: inline-block;
padding: 2px 6px;
line-height: inherit;
@@ -287,6 +290,23 @@ button,
color: #000;
}
+.button::-moz-focus-inner,
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+.button:-moz-focusring,
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
.button:hover, .button:focus, .button:active,
button:hover,
[type='button']:hover,
@@ -336,7 +356,6 @@ select,
textarea {
box-sizing: border-box;
max-width: 100%;
- color: inherit;
font: inherit;
margin: 0;
}
@@ -350,37 +369,43 @@ select {
text-transform: none;
}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-
-html input[type='button'],
+button,
+html [type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
+input {
+ overflow: visible;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
height: auto;
}
-input[type='search'] {
+[type='search'] {
-webkit-appearance: textfield;
+ outline-offset: -2px;
}
-input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
-input[type='text'], input[type='search'], input[type='tel'], input[type='url'], input[type='email'], input[type='password'], input[type='date'], input[type='time'], input[type='number'], textarea {
- line-height: inherit;
+::-webkit-input-placeholder {
+ color: inherit;
+ opacity: .54;
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
}
-input[type='checkbox'],
-input[type='radio'] {
+[type='checkbox'],
+[type='radio'] {
box-sizing: border-box;
padding: 0;
}
@@ -392,7 +417,11 @@ fieldset {
}
legend {
- border: 0;
+ box-sizing: border-box;
+ display: table;
+ max-width: 100%;
+ white-space: normal;
+ color: inherit;
margin-left: -5px;
padding: 0 5px;
}
@@ -682,55 +711,6 @@ th {
}
}
-.autocomplete,
-.form-autocomplete {
- background-image: url(../sass/components/autocomplete/throbber-inactive.png);
- background-position: 100% center;
- background-repeat: no-repeat;
-}
-
-[dir='rtl'] .autocomplete,
-[dir='rtl'] .form-autocomplete {
- background-position: 0% center;
-}
-
-.autocomplete__list-wrapper,
-#autocomplete {
- border: 1px solid;
- overflow: hidden;
- position: absolute;
- z-index: 100;
-}
-
-.autocomplete__list,
-#autocomplete ul {
- list-style: none;
- list-style-image: none;
- margin: 0;
- padding: 0;
-}
-
-.autocomplete__list-item,
-#autocomplete li {
- background: #fff;
- color: #000;
- cursor: default;
- white-space: pre;
-}
-
-.autocomplete__list-item.is-selected, .autocomplete__list-item--is-selected,
-#autocomplete li.is-selected,
-#autocomplete .selected {
- background: #0072b9;
- color: #fff;
-}
-
-.autocomplete.is-throbbing, .autocomplete--is-throbbing,
-.is-throbbing.form-autocomplete,
-.form-autocomplete.throbbing {
- background-image: url(../sass/components/autocomplete/throbber-active.gif);
-}
-
.box {
margin-bottom: 1.5rem;
border: 5px solid #cccccc;
@@ -749,51 +729,6 @@ th {
border-color: #0072b9;
}
-.visually-hidden,
-.visually-hidden--focusable,
-.element-focusable,
-.element-invisible,
-.breadcrumb__title,
-.main-navigation .block-menu .block__title,
-.main-navigation .block-menu-block .block__title {
- position: absolute !important;
- height: 1px;
- width: 1px;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- word-wrap: normal;
-}
-
-.visually-hidden--off,
-.visually-hidden--focusable:active,
-.visually-hidden--focusable:focus,
-.element-focusable:active,
-.element-focusable:focus {
- position: static !important;
- clip: auto;
- height: auto;
- width: auto;
- overflow: visible;
-}
-
-@media print {
- .breadcrumb {
- display: none;
- }
-}
-
-.breadcrumb__list {
- margin: 0;
- padding: 0;
-}
-
-.breadcrumb__item {
- display: inline;
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
.clearfix:before,
.header:before,
.tabs:before {
@@ -809,68 +744,6 @@ th {
clear: both;
}
-.collapsible-fieldset,
-.collapsible {
- position: relative;
-}
-
-.collapsible-fieldset__legend,
-.collapsible .fieldset-legend {
- display: block;
- padding-left: 15px;
- background-image: url(../sass/components/collapsible-fieldset/expanded.svg);
- background-position: 4px 50%;
- background-repeat: no-repeat;
-}
-
-[dir='rtl'] .collapsible-fieldset__legend,
-[dir='rtl'] .collapsible .fieldset-legend,
-.collapsible [dir='rtl'] .fieldset-legend {
- padding-left: 0;
- padding-right: 15px;
- background-position: right 4px top 50%;
-}
-
-.collapsible-fieldset__summary,
-.collapsible .fieldset-legend .summary {
- color: #999999;
- font-size: .9em;
- margin-left: .5em;
-}
-
-.collapsible-fieldset.is-collapsed, .collapsible-fieldset--is-collapsed,
-.is-collapsed.collapsible,
-.collapsible.collapsed {
- border-bottom-width: 0;
- border-left-width: 0;
- border-right-width: 0;
- height: 1em;
-}
-
-.collapsible-fieldset.is-collapsed .collapsible-fieldset__wrapper, .collapsible-fieldset--is-collapsed__wrapper, .is-collapsed.collapsible .collapsible-fieldset__wrapper,
-.collapsible.collapsed .fieldset-wrapper {
- display: none;
-}
-
-.collapsible-fieldset.is-collapsed .collapsible-fieldset__legend, .collapsible-fieldset--is-collapsed__legend, .is-collapsed.collapsible .collapsible-fieldset__legend,
-.collapsible.collapsed .fieldset-legend,
-.collapsible-fieldset.is-collapsed .collapsible .fieldset-legend,
-.collapsible .collapsible-fieldset.is-collapsed .fieldset-legend,
-.is-collapsed.collapsible .fieldset-legend {
- background-image: url(../sass/components/collapsible-fieldset/collapsed.svg);
- background-position: 4px 50%;
-}
-
-[dir='rtl'] .collapsible-fieldset.is-collapsed .collapsible-fieldset__legend, [dir='rtl'] .collapsible-fieldset--is-collapsed__legend, [dir='rtl'] .is-collapsed.collapsible .collapsible-fieldset__legend,
-[dir='rtl'] .collapsible.collapsed .fieldset-legend,
-.collapsible.collapsed [dir='rtl'] .fieldset-legend,
-[dir='rtl'] .collapsible-fieldset.is-collapsed .collapsible .fieldset-legend,
-.collapsible [dir='rtl'] .collapsible-fieldset.is-collapsed .fieldset-legend,
-[dir='rtl'] .is-collapsed.collapsible .fieldset-legend {
- background-image: url(../sass/components/collapsible-fieldset/collapsed-rtl.svg);
- background-position: right 4px top 50%;
-}
-
.comment__section,
.comments {
margin: 1.5rem 0;
@@ -895,175 +768,19 @@ th {
margin-left: 32px;
}
-[dir='rtl'] .comment--nested,
-[dir='rtl'] .indented {
+[dir="rtl"] .comment--nested,
+[dir="rtl"] .indented {
margin-left: 0;
margin-right: 32px;
}
-.form-item {
- margin: 1.5rem 0;
-}
-
-.form-item__required,
-.form-required {
- color: #c00;
-}
-
-.form-item__description,
-.form-item .description {
- font-size: 0.875rem;
-}
-
-.form-item--inline div,
-.form-item--inline label, .container-inline .form-item div, .container-inline .form-item label {
- display: inline;
-}
-
-.form-item--inline__exception,
-.container-inline .fieldset-wrapper {
- display: block;
-}
-
-.form-item--tight,
-.form-item--radio,
-.form-type-radio,
-.form-type-checkbox,
-.password-parent,
-.confirm-parent,
-table .form-item {
- margin: 0;
-}
-
-.form-item--radio .form-item__label, .form-item--radio__label, .form-type-radio .form-item__label,
-.form-type-checkbox .form-item__label,
-label.option {
- display: inline;
- font-weight: normal;
-}
-
-.form-item--radio .form-item__description, .form-item--radio__description, .form-type-radio .form-item__description,
-.form-type-checkbox .form-item__description,
-.form-type-radio .description,
-.form-type-checkbox .description,
-.form-item--radio .form-item .description,
-.form-item .form-item--radio .description,
-.form-type-radio .form-item .description,
-.form-item .form-type-radio .description,
-.form-type-checkbox .form-item .description,
-.form-item
-.form-type-checkbox .description {
- margin-left: 1.4em;
-}
-
-.form-item.is-error .form-item__widget, .form-item--is-error__widget,
-.form-item.is-error input,
-.form-item.is-error textarea,
-.form-item.is-error select,
-.form-item--is-error input,
-.form-item--is-error textarea,
-.form-item--is-error select,
-.form-item input.error,
-.form-item textarea.error,
-.form-item select.error {
- border: 1px solid #c00;
-}
-
-.form-table__sticky-header,
-.sticky-header {
- position: fixed;
- visibility: hidden;
- margin-top: 0;
- background-color: #fff;
-}
-
-.form-table__sticky-header.is-sticky, .form-table__sticky-header--is-sticky,
-.is-sticky.sticky-header {
- visibility: visible;
-}
-
-.form-table__header,
-.form-table th,
-form table th {
- border-bottom: 3px solid #cccccc;
- padding-right: 1em;
- text-align: left;
-}
-
-[dir='rtl'] .form-table__header,
-[dir='rtl'] .form-table th,
-.form-table [dir='rtl'] th,
-[dir='rtl'] form table th,
-form table [dir='rtl'] th {
- text-align: right;
- padding-left: 1em;
- padding-right: 0;
-}
-
-.form-table__body,
-.form-table tbody,
-form table tbody {
- border-top: 1px solid #cccccc;
-}
-
-.form-table__row,
-.form-table tbody tr,
-form table tbody tr {
- padding: .1em .6em;
- border-bottom: 1px solid #cccccc;
- background-color: #eeeeee;
-}
-
-.form-table__row:nth-child(even),
-.form-table tbody tr:nth-child(even),
-form table tbody tr:nth-child(even) {
- background-color: #fff;
-}
-
-.form-table__row.is-active, .form-table__row--is-active,
-.form-table tbody tr.is-active,
-form table tbody tr.is-active,
-td.active {
- background-color: #dddddd;
-}
-
-.form-table__row.is-disabled, .form-table__row--is-disabled,
-.form-table tbody tr.is-disabled,
-form table tbody tr.is-disabled,
-td.menu-disabled {
- background: #cccccc;
-}
-
-.form-table__row.is-selected, .form-table__row--is-selected,
-.form-table tbody tr.is-selected,
-form table tbody tr.is-selected,
-tr.selected td {
- background: #fffdf0;
-}
-
-.form-table__list,
-.form-table ul,
-form table ul {
- margin: 0;
-}
-
-.form-table__narrow-column,
-.form-table th.form-table__narrow-column,
-form table th.form-table__narrow-column,
-td .checkbox,
-th .checkbox {
- width: -moz-min-content;
- width: -webkit-min-content;
- text-align: center;
-}
-
.header__logo {
float: left;
margin: 0 10px 0 0;
padding: 0;
}
-[dir='rtl'] .header__logo {
+[dir="rtl"] .header__logo {
float: right;
margin: 0 0 0 10px;
}
@@ -1097,7 +814,7 @@ th .checkbox {
float: right;
}
-[dir='rtl'] .header__secondary-menu {
+[dir="rtl"] .header__secondary-menu {
float: left;
}
@@ -1131,9 +848,9 @@ html.js .js-hide {
padding: 0 1em 0 0;
}
-[dir='rtl'] .inline-links__item,
-[dir='rtl'] .inline.links li,
-.inline.links [dir='rtl'] li {
+[dir="rtl"] .inline-links__item,
+[dir="rtl"] .inline.links li,
+.inline.links [dir="rtl"] li {
display: inline-block;
padding: 0 0 0 1em;
}
@@ -1145,10 +862,10 @@ span.field-label {
margin-right: 10px;
}
-[dir='rtl'] .inline-sibling,
-[dir='rtl'] .field-label-inline .field-label,
-.field-label-inline [dir='rtl'] .field-label,
-[dir='rtl'] span.field-label {
+[dir="rtl"] .inline-sibling,
+[dir="rtl"] .field-label-inline .field-label,
+.field-label-inline [dir="rtl"] .field-label,
+[dir="rtl"] span.field-label {
margin-right: 0;
margin-left: 10px;
}
@@ -1178,8 +895,8 @@ span.field-label {
border: 1px solid #0072b9;
}
-[dir='rtl'] .messages,
-[dir='rtl'] .messages--status {
+[dir="rtl"] .messages,
+[dir="rtl"] .messages--status {
padding: 10px 44px 10px 10px;
background-position: 99% 8px;
}
@@ -1194,7 +911,7 @@ span.field-label {
line-height: 1;
}
-[dir='rtl'] .messages__icon {
+[dir="rtl"] .messages__icon {
left: auto;
right: 0;
}
@@ -1260,55 +977,151 @@ span.field-label {
fill: #c00;
}
+@media print {
+ .print-none,
+ .toolbar,
+ .action-links,
+ .links,
+ .book-navigation,
+ .forum-topic-navigation,
+ .feed-icons {
+ display: none;
+ }
+}
+
+.responsive-video,
+.media-youtube-video,
+.media-vimeo-preview-wrapper {
+ position: relative;
+ padding-bottom: 56.25%;
+ padding-top: 25px;
+ height: 0;
+}
+
+.responsive-video__embed,
+.responsive-video iframe,
+.media-youtube-video iframe,
+.media-vimeo-preview-wrapper iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.responsive-video--4-3 {
+ padding-bottom: 75%;
+}
+
+.visually-hidden,
+.element-invisible,
+.element-focusable,
+.breadcrumb__title,
+.main-navigation .block-menu .block__title,
+.main-navigation .block-menu-block .block__title {
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ word-wrap: normal;
+}
+
+.visually-hidden--off,
+.visually-hidden--focusable:active,
+.visually-hidden--focusable:focus,
+.element-focusable:active,
+.element-focusable:focus {
+ position: static !important;
+ clip: auto;
+ height: auto;
+ width: auto;
+ overflow: visible;
+}
+
+.watermark {
+ font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
+ display: block;
+ height: 0;
+ overflow: visible;
+ background-color: transparent;
+ color: #eeeeee;
+ font-size: 75px;
+ line-height: 1;
+ text-align: center;
+ text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
+ word-wrap: break-word;
+}
+
+@media print {
+ .breadcrumb {
+ display: none;
+ }
+}
+
+.breadcrumb__list {
+ margin: 0;
+ padding: 0;
+}
+
+.breadcrumb__item {
+ display: inline;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
.more-link,
.more-help-link {
text-align: right;
}
-[dir='rtl'] .more-link,
-[dir='rtl'] .more-help-link {
+[dir="rtl"] .more-link,
+[dir="rtl"] .more-help-link {
text-align: left;
}
.more-link__help-icon,
.more-help-link a {
padding: 1px 0 1px 20px;
- background-image: url(../sass/components/more-link/more-link__help-icon.svg);
+ background-image: url(../sass/navigation/more-link/more-link__help-icon.svg);
background-position: 0 50%;
background-repeat: no-repeat;
}
-[dir='rtl'] .more-link__help-icon,
-[dir='rtl'] .more-help-link a,
-.more-help-link [dir='rtl'] a {
+[dir="rtl"] .more-link__help-icon,
+[dir="rtl"] .more-help-link a,
+.more-help-link [dir="rtl"] a {
padding: 1px 20px 1px 0;
background-position: 100% 50%;
}
.nav-menu__item,
.menu__item {
- list-style-image: url(../sass/components/nav-menu/leaf.svg);
+ list-style-image: url(../sass/navigation/nav-menu/leaf.svg);
list-style-type: square;
}
.nav-menu__item.is-expanded, .nav-menu__item--is-expanded,
.is-expanded.menu__item,
.menu__item.is-expanded {
- list-style-image: url(../sass/components/nav-menu/expanded.svg);
+ list-style-image: url(../sass/navigation/nav-menu/expanded.svg);
list-style-type: circle;
}
.nav-menu__item.is-collapsed, .nav-menu__item--is-collapsed,
.is-collapsed.menu__item,
.menu__item.is-collapsed {
- list-style-image: url(../sass/components/nav-menu/collapsed.svg);
+ list-style-image: url(../sass/navigation/nav-menu/collapsed.svg);
list-style-type: disc;
}
-[dir='rtl'] .nav-menu__item.is-collapsed, [dir='rtl'] .nav-menu__item--is-collapsed,
-[dir='rtl'] .is-collapsed.menu__item,
-[dir='rtl'] .menu__item.is-collapsed {
- list-style-image: url(../sass/components/nav-menu/collapsed-rtl.svg);
+[dir="rtl"] .nav-menu__item.is-collapsed, [dir="rtl"] .nav-menu__item--is-collapsed,
+[dir="rtl"] .is-collapsed.menu__item,
+[dir="rtl"] .menu__item.is-collapsed {
+ list-style-image: url(../sass/navigation/nav-menu/collapsed-rtl.svg);
}
.nav-menu__link.is-active, .nav-menu__link--is-active,
@@ -1324,12 +1137,12 @@ span.field-label {
text-align: left;
}
-[dir='rtl'] .navbar,
-[dir='rtl'] .main-navigation .links,
-.main-navigation [dir='rtl'] .links,
-[dir='rtl']
+[dir="rtl"] .navbar,
+[dir="rtl"] .main-navigation .links,
+.main-navigation [dir="rtl"] .links,
+[dir="rtl"]
.main-navigation .menu,
-.main-navigation [dir='rtl'] .menu {
+.main-navigation [dir="rtl"] .menu {
text-align: right;
}
@@ -1342,10 +1155,10 @@ span.field-label {
list-style-image: none;
}
-[dir='rtl'] .navbar__item, [dir='rtl']
-.navbar li, [dir='rtl'] .main-navigation .links li, .main-navigation [dir='rtl'] .links li, [dir='rtl']
+[dir="rtl"] .navbar__item, [dir="rtl"]
+.navbar li, [dir="rtl"] .main-navigation .links li, .main-navigation [dir="rtl"] .links li, [dir="rtl"]
.main-navigation .menu li,
-.main-navigation [dir='rtl'] .menu li {
+.main-navigation [dir="rtl"] .menu li {
float: right;
padding: 0 0 0 10px;
}
@@ -1382,18 +1195,407 @@ span.field-label {
font-weight: bold;
}
+.skip-link {
+ display: block;
+ padding: 2px 0 3px;
+ text-align: center;
+}
+
+.skip-link:link, .skip-link:visited {
+ background-color: #666666;
+ color: #fff;
+}
+
+.skip-link__wrapper {
+ margin: 0;
+}
+
@media print {
- .print-none,
- .toolbar,
- .action-links,
- .links,
- .book-navigation,
- .forum-topic-navigation,
- .feed-icons {
+ .skip-link__wrapper {
display: none;
}
}
+.tabs {
+ margin: 1.125rem 0 0;
+ line-height: 1.875rem;
+ border-bottom: 1px solid #cccccc \0/ie;
+ background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
+ background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
+ padding: 0 2px;
+ list-style: none;
+ white-space: nowrap;
+}
+
+@media print {
+ .tabs {
+ display: none;
+ }
+}
+
+.tabs__tab {
+ float: left;
+ margin: 0 3px;
+ border: 1px solid #cccccc;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ border-bottom-color: transparent;
+ border-bottom: 0 \0/ie;
+ overflow: hidden;
+ background: #dddddd;
+}
+
+[dir="rtl"] .tabs__tab {
+ float: right;
+}
+
+.tabs__tab.is-active {
+ border-bottom-color: #fff;
+}
+
+.tabs__tab-link {
+ padding: 0 1.5rem;
+ display: block;
+ text-decoration: none;
+ -webkit-transition: color .3s, background .3s, border .3s;
+ transition: color .3s, background .3s, border .3s;
+ text-shadow: #fff 0 1px 0;
+ color: #000;
+ background: #dddddd;
+ letter-spacing: 1px;
+}
+
+.tabs__tab-link:focus, .tabs__tab-link:hover {
+ background: #eaeaea;
+}
+
+.tabs__tab-link:active, .tabs__tab-link.is-active, .tabs__tab-link--is-active {
+ background: #fff;
+ text-shadow: none;
+}
+
+.tabs--off,
+.views-displays .secondary {
+ margin: 0;
+ border-bottom: 0;
+ padding: 0;
+ background-image: none;
+}
+
+.tabs--secondary {
+ margin-top: 1.5rem;
+ font-size: 0.875rem;
+ background-image: none;
+}
+
+.tabs + .tabs--secondary {
+ margin-top: 0;
+ background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
+ background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
+}
+
+.tabs--secondary .tabs__tab {
+ margin: 0.5625rem 0.1875rem;
+ border: 0;
+ background: transparent;
+}
+
+[dir="rtl"] .tabs--secondary .tabs__tab {
+ float: right;
+}
+
+.tabs--secondary .tabs__tab.is-active {
+ border-bottom-color: transparent;
+}
+
+.tabs--secondary .tabs__tab-link {
+ border: 1px solid #cccccc;
+ border-radius: 24px;
+ color: #666666;
+ background: #f1f1f1;
+ letter-spacing: normal;
+}
+
+.tabs--secondary .tabs__tab-link:focus, .tabs--secondary .tabs__tab-link:hover {
+ color: #333333;
+ background: #dddddd;
+ border-color: #999999;
+}
+
+.tabs--secondary .tabs__tab-link:active, .tabs--secondary .tabs__tab-link.is-active, .tabs--secondary .tabs__tab-link--is-active {
+ color: white;
+ text-shadow: #333333 0 1px 0;
+ background: #666666;
+ border-color: black;
+}
+
+.autocomplete,
+.form-autocomplete {
+ background-image: url(../sass/forms/autocomplete/throbber-inactive.png);
+ background-position: 100% center;
+ background-repeat: no-repeat;
+}
+
+[dir="rtl"] .autocomplete,
+[dir="rtl"] .form-autocomplete {
+ background-position: 0% center;
+}
+
+.autocomplete__list-wrapper,
+#autocomplete {
+ border: 1px solid;
+ overflow: hidden;
+ position: absolute;
+ z-index: 100;
+}
+
+.autocomplete__list,
+#autocomplete ul {
+ list-style: none;
+ list-style-image: none;
+ margin: 0;
+ padding: 0;
+}
+
+.autocomplete__list-item,
+#autocomplete li {
+ background: #fff;
+ color: #000;
+ cursor: default;
+ white-space: pre;
+}
+
+.autocomplete__list-item.is-selected, .autocomplete__list-item--is-selected,
+#autocomplete li.is-selected,
+#autocomplete .selected {
+ background: #0072b9;
+ color: #fff;
+}
+
+.autocomplete.is-throbbing, .autocomplete--is-throbbing,
+.is-throbbing.form-autocomplete,
+.form-autocomplete.throbbing {
+ background-image: url(../sass/forms/autocomplete/throbber-active.gif);
+}
+
+.collapsible-fieldset,
+.collapsible {
+ position: relative;
+}
+
+.collapsible-fieldset__legend,
+.collapsible .fieldset-legend {
+ display: block;
+ padding-left: 15px;
+ background-image: url(../sass/forms/collapsible-fieldset/expanded.svg);
+ background-position: 4px 50%;
+ background-repeat: no-repeat;
+}
+
+[dir="rtl"] .collapsible-fieldset__legend,
+[dir="rtl"] .collapsible .fieldset-legend,
+.collapsible [dir="rtl"] .fieldset-legend {
+ padding-left: 0;
+ padding-right: 15px;
+ background-position: right 4px top 50%;
+}
+
+.collapsible-fieldset__summary,
+.collapsible .fieldset-legend .summary {
+ color: #999999;
+ font-size: .9em;
+ margin-left: .5em;
+}
+
+.collapsible-fieldset.is-collapsed, .collapsible-fieldset--is-collapsed,
+.is-collapsed.collapsible,
+.collapsible.collapsed {
+ border-bottom-width: 0;
+ border-left-width: 0;
+ border-right-width: 0;
+ height: 1em;
+}
+
+.collapsible-fieldset.is-collapsed .collapsible-fieldset__wrapper, .collapsible-fieldset--is-collapsed__wrapper, .is-collapsed.collapsible .collapsible-fieldset__wrapper,
+.collapsible.collapsed .fieldset-wrapper {
+ display: none;
+}
+
+.collapsible-fieldset.is-collapsed .collapsible-fieldset__legend, .collapsible-fieldset--is-collapsed__legend, .is-collapsed.collapsible .collapsible-fieldset__legend,
+.collapsible.collapsed .fieldset-legend,
+.collapsible-fieldset.is-collapsed .collapsible .fieldset-legend,
+.collapsible .collapsible-fieldset.is-collapsed .fieldset-legend,
+.is-collapsed.collapsible .fieldset-legend {
+ background-image: url(../sass/forms/collapsible-fieldset/collapsed.svg);
+ background-position: 4px 50%;
+}
+
+[dir="rtl"] .collapsible-fieldset.is-collapsed .collapsible-fieldset__legend, [dir="rtl"] .collapsible-fieldset--is-collapsed__legend, [dir="rtl"] .is-collapsed.collapsible .collapsible-fieldset__legend,
+[dir="rtl"] .collapsible.collapsed .fieldset-legend,
+.collapsible.collapsed [dir="rtl"] .fieldset-legend,
+[dir="rtl"] .collapsible-fieldset.is-collapsed .collapsible .fieldset-legend,
+.collapsible [dir="rtl"] .collapsible-fieldset.is-collapsed .fieldset-legend,
+[dir="rtl"] .is-collapsed.collapsible .fieldset-legend {
+ background-image: url(../sass/forms/collapsible-fieldset/collapsed-rtl.svg);
+ background-position: right 4px top 50%;
+}
+
+.form-item {
+ margin: 1.5rem 0;
+}
+
+.form-item__required,
+.form-required {
+ color: #c00;
+}
+
+.form-item__description,
+.form-item .description {
+ font-size: 0.875rem;
+}
+
+.form-item--inline div,
+.form-item--inline label, .container-inline .form-item div, .container-inline .form-item label {
+ display: inline;
+}
+
+.form-item--inline__exception,
+.container-inline .fieldset-wrapper {
+ display: block;
+}
+
+.form-item--tight,
+.form-item--radio,
+.form-type-radio,
+.form-type-checkbox,
+.password-parent,
+.confirm-parent,
+table .form-item {
+ margin: 0;
+}
+
+.form-item--radio .form-item__label, .form-item--radio__label, .form-type-radio .form-item__label,
+.form-type-checkbox .form-item__label,
+label.option {
+ display: inline;
+ font-weight: normal;
+}
+
+.form-item--radio .form-item__description, .form-item--radio__description, .form-type-radio .form-item__description,
+.form-type-checkbox .form-item__description,
+.form-type-radio .description,
+.form-type-checkbox .description,
+.form-item--radio .form-item .description,
+.form-item .form-item--radio .description,
+.form-type-radio .form-item .description,
+.form-item .form-type-radio .description,
+.form-type-checkbox .form-item .description,
+.form-item
+.form-type-checkbox .description {
+ margin-left: 1.4em;
+}
+
+.form-item.is-error .form-item__widget, .form-item--is-error__widget,
+.form-item.is-error input,
+.form-item.is-error textarea,
+.form-item.is-error select,
+.form-item--is-error input,
+.form-item--is-error textarea,
+.form-item--is-error select,
+.form-item input.error,
+.form-item textarea.error,
+.form-item select.error {
+ border: 1px solid #c00;
+}
+
+.form-table__sticky-header,
+.sticky-header {
+ position: fixed;
+ visibility: hidden;
+ margin-top: 0;
+ background-color: #fff;
+}
+
+.form-table__sticky-header.is-sticky, .form-table__sticky-header--is-sticky,
+.is-sticky.sticky-header {
+ visibility: visible;
+}
+
+.form-table__header,
+.form-table th,
+form table th {
+ border-bottom: 3px solid #cccccc;
+ padding-right: 1em;
+ text-align: left;
+}
+
+[dir="rtl"] .form-table__header,
+[dir="rtl"] .form-table th,
+.form-table [dir="rtl"] th,
+[dir="rtl"] form table th,
+form table [dir="rtl"] th {
+ text-align: right;
+ padding-left: 1em;
+ padding-right: 0;
+}
+
+.form-table__body,
+.form-table tbody,
+form table tbody {
+ border-top: 1px solid #cccccc;
+}
+
+.form-table__row,
+.form-table tbody tr,
+form table tbody tr {
+ padding: .1em .6em;
+ border-bottom: 1px solid #cccccc;
+ background-color: #eeeeee;
+}
+
+.form-table__row:nth-child(even),
+.form-table tbody tr:nth-child(even),
+form table tbody tr:nth-child(even) {
+ background-color: #fff;
+}
+
+.form-table__row.is-active, .form-table__row--is-active,
+.form-table tbody tr.is-active,
+form table tbody tr.is-active,
+td.active {
+ background-color: #dddddd;
+}
+
+.form-table__row.is-disabled, .form-table__row--is-disabled,
+.form-table tbody tr.is-disabled,
+form table tbody tr.is-disabled,
+td.menu-disabled {
+ background: #cccccc;
+}
+
+.form-table__row.is-selected, .form-table__row--is-selected,
+.form-table tbody tr.is-selected,
+form table tbody tr.is-selected,
+tr.selected td {
+ background: #fffdf0;
+}
+
+.form-table__list,
+.form-table ul,
+form table ul {
+ margin: 0;
+}
+
+.form-table__narrow-column,
+.form-table th.form-table__narrow-column,
+form table th.form-table__narrow-column,
+td .checkbox,
+th .checkbox {
+ width: -moz-min-content;
+ width: -webkit-min-content;
+ text-align: center;
+}
+
.progress-bar,
.progress {
font-weight: bold;
@@ -1411,7 +1613,7 @@ span.field-label {
.progress .filled {
height: 1.5em;
width: 5px;
- background: #0072b9 url(../sass/components/progress-bar/progress-bar.gif) repeat 0 0;
+ background: #0072b9 url(../sass/forms/progress-bar/progress-bar.gif) repeat 0 0;
}
.progress-bar__percentage,
@@ -1419,9 +1621,9 @@ span.field-label {
float: right;
}
-[dir='rtl'] .progress-bar__percentage,
-[dir='rtl'] .progress .percentage,
-.progress [dir='rtl'] .percentage {
+[dir="rtl"] .progress-bar__percentage,
+[dir="rtl"] .progress .percentage,
+.progress [dir="rtl"] .percentage {
float: left;
}
@@ -1431,8 +1633,8 @@ span.field-label {
display: inline-block;
}
-[dir='rtl'] .progress-bar--inline,
-[dir='rtl'] .ajax-progress-bar {
+[dir="rtl"] .progress-bar--inline,
+[dir="rtl"] .ajax-progress-bar {
float: right;
}
@@ -1441,23 +1643,23 @@ span.field-label {
display: inline-block;
}
-[dir='rtl'] .progress-throbber,
-[dir='rtl'] .ajax-progress {
+[dir="rtl"] .progress-throbber,
+[dir="rtl"] .ajax-progress {
float: right;
}
.progress-throbber__widget,
.ajax-progress .throbber {
- background: url(../sass/components/progress-throbber/progress-throbber.gif) no-repeat 0 -18px transparent;
+ background: url(../sass/forms/progress-throbber/progress-throbber.gif) no-repeat 0 -18px transparent;
float: left;
height: 15px;
margin: 2px;
width: 15px;
}
-[dir='rtl'] .progress-throbber__widget,
-[dir='rtl'] .ajax-progress .throbber,
-.ajax-progress [dir='rtl'] .throbber {
+[dir="rtl"] .progress-throbber__widget,
+[dir="rtl"] .ajax-progress .throbber,
+.ajax-progress [dir="rtl"] .throbber {
float: right;
}
@@ -1479,7 +1681,7 @@ tr .ajax-progress .throbber {
.resizable-textarea__grippie,
.resizable-textarea .grippie {
- background: url(../sass/components/resizable-textarea/grippie.png) no-repeat center 2px #eeeeee;
+ background: url(../sass/forms/resizable-textarea/grippie.png) no-repeat center 2px #eeeeee;
border: 1px solid #cccccc;
border-top-width: 0;
cursor: s-resize;
@@ -1487,51 +1689,6 @@ tr .ajax-progress .throbber {
overflow: hidden;
}
-.responsive-video,
-.media-youtube-video,
-.media-vimeo-preview-wrapper {
- position: relative;
- padding-bottom: 56.25%;
- padding-top: 25px;
- height: 0;
-}
-
-.responsive-video__embed,
-.responsive-video iframe,
-.media-youtube-video iframe,
-.media-vimeo-preview-wrapper iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-
-.responsive-video--4-3 {
- padding-bottom: 75%;
-}
-
-.skip-link {
- display: block;
- padding: 2px 0 3px;
- text-align: center;
-}
-
-.skip-link:link, .skip-link:visited {
- background-color: #666666;
- color: #fff;
-}
-
-.skip-link__wrapper {
- margin: 0;
-}
-
-@media print {
- .skip-link__wrapper {
- display: none;
- }
-}
-
.table-drag__wrapper,
body.drag {
cursor: move;
@@ -1558,8 +1715,8 @@ tr.drag-previous {
font-size: 12px;
}
-[dir='rtl'] .table-drag__handle,
-[dir='rtl'] .tabledrag-handle {
+[dir="rtl"] .table-drag__handle,
+[dir="rtl"] .tabledrag-handle {
float: right;
margin-right: -1em;
margin-left: 0;
@@ -1574,7 +1731,7 @@ tr.drag-previous {
.table-drag__handle-icon,
.tabledrag-handle .handle {
box-sizing: content-box;
- background: url(../sass/components/table-drag/handle-icon.png) no-repeat 6px 9px;
+ background: url(../sass/forms/table-drag/handle-icon.png) no-repeat 6px 9px;
height: 13px;
margin: -.4em .5em;
padding: .42em .5em;
@@ -1594,8 +1751,8 @@ tr.drag-previous {
text-align: right;
}
-[dir='rtl'] .table-drag__toggle-weight-wrapper,
-[dir='rtl'] .tabledrag-toggle-weight-wrapper {
+[dir="rtl"] .table-drag__toggle-weight-wrapper,
+[dir="rtl"] .tabledrag-toggle-weight-wrapper {
text-align: left;
}
@@ -1613,8 +1770,8 @@ tr.drag-previous {
width: 20px;
}
-[dir='rtl'] .table-drag__indentation,
-[dir='rtl'] .indentation {
+[dir="rtl"] .table-drag__indentation,
+[dir="rtl"] .indentation {
float: right;
margin: -.4em -.4em -.4em .2em;
padding: .42em .6em .42em 0;
@@ -1626,153 +1783,24 @@ tr.drag-previous {
.table-drag__tree-child-horizontal,
.tree-child-horizontal,
.tree-child {
- background: url(../sass/components/table-drag/tree-child.png) no-repeat 11px center;
+ background: url(../sass/forms/table-drag/tree-child.png) no-repeat 11px center;
}
-[dir='rtl'] .table-drag__tree-child,
-[dir='rtl'] .table-drag__tree-child-last,
-[dir='rtl'] .tree-child-last,
-[dir='rtl'] .table-drag__tree-child-horizontal,
-[dir='rtl'] .tree-child-horizontal,
-[dir='rtl'] .tree-child {
+[dir="rtl"] .table-drag__tree-child,
+[dir="rtl"] .table-drag__tree-child-last,
+[dir="rtl"] .tree-child-last,
+[dir="rtl"] .table-drag__tree-child-horizontal,
+[dir="rtl"] .tree-child-horizontal,
+[dir="rtl"] .tree-child {
background-position: -65px center;
}
.table-drag__tree-child-last,
.tree-child-last {
- background-image: url(../sass/components/table-drag/tree-child-last.png);
+ background-image: url(../sass/forms/table-drag/tree-child-last.png);
}
.table-drag__tree-child-horizontal,
.tree-child-horizontal {
background-position: -11px center;
}
-
-.tabs {
- margin: 1.125rem 0 0;
- line-height: 1.875rem;
- border-bottom: 1px solid #cccccc \0/ie;
- background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
- background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
- padding: 0 2px;
- list-style: none;
- white-space: nowrap;
-}
-
-@media print {
- .tabs {
- display: none;
- }
-}
-
-.tabs__tab {
- float: left;
- margin: 0 3px;
- border: 1px solid #cccccc;
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
- border-bottom-color: transparent;
- border-bottom: 0 \0/ie;
- overflow: hidden;
- background: #dddddd;
-}
-
-[dir='rtl'] .tabs__tab {
- float: right;
-}
-
-.tabs__tab.is-active {
- border-bottom-color: #fff;
-}
-
-.tabs__tab-link {
- padding: 0 1.5rem;
- display: block;
- text-decoration: none;
- -webkit-transition: color .3s, background .3s, border .3s;
- transition: color .3s, background .3s, border .3s;
- text-shadow: #fff 0 1px 0;
- color: #000;
- background: #dddddd;
- letter-spacing: 1px;
-}
-
-.tabs__tab-link:focus, .tabs__tab-link:hover {
- background: #eaeaea;
-}
-
-.tabs__tab-link:active, .tabs__tab-link.is-active, .tabs__tab-link--is-active {
- background: #fff;
- text-shadow: none;
-}
-
-.tabs--off,
-.views-displays .secondary {
- margin: 0;
- border-bottom: 0;
- padding: 0;
- background-image: none;
-}
-
-.tabs--secondary {
- margin-top: 1.5rem;
- font-size: 0.875rem;
- background-image: none;
-}
-
-.tabs + .tabs--secondary {
- margin-top: 0;
- background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
- background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
-}
-
-.tabs--secondary .tabs__tab {
- margin: 0.5625rem 0.1875rem;
- border: 0;
- background: transparent;
-}
-
-[dir='rtl'] .tabs--secondary .tabs__tab {
- float: right;
-}
-
-.tabs--secondary .tabs__tab.is-active {
- border-bottom-color: transparent;
-}
-
-.tabs--secondary .tabs__tab-link {
- border: 1px solid #cccccc;
- border-radius: 24px;
- color: #666666;
- background: #f1f1f1;
- letter-spacing: normal;
-}
-
-.tabs--secondary .tabs__tab-link:focus, .tabs--secondary .tabs__tab-link:hover {
- color: #333333;
- background: #dddddd;
- border-color: #999999;
-}
-
-.tabs--secondary .tabs__tab-link:active, .tabs--secondary .tabs__tab-link.is-active, .tabs--secondary .tabs__tab-link--is-active {
- color: white;
- text-shadow: #333333 0 1px 0;
- background: #666666;
- border-color: black;
-}
-
-.watermark {
- font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
- font-weight: bold;
- text-transform: uppercase;
- display: block;
- height: 0;
- overflow: visible;
- background-color: transparent;
- color: #eeeeee;
- font-size: 75px;
- line-height: 1;
- text-align: center;
- text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
- word-wrap: break-word;
-}
diff --git a/STARTERKIT/styleguide/index.html b/STARTERKIT/styleguide/index.html
index 94700a7..0f7f1ba 100644
--- a/STARTERKIT/styleguide/index.html
+++ b/STARTERKIT/styleguide/index.html
@@ -44,13 +44,18 @@
</a>
</li>
<li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Forms</span>
+ <a class="kss-nav__menu-link" href="section-components.html">
+ <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
</a>
</li>
<li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+ <a class="kss-nav__menu-link" href="section-navigation.html">
+ <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-forms.html">
+ <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
</a>
</li>
</ul>
diff --git a/STARTERKIT/styleguide/section-base.html b/STARTERKIT/styleguide/section-base.html
index 799f94e..e6e9349 100644
--- a/STARTERKIT/styleguide/section-base.html
+++ b/STARTERKIT/styleguide/section-base.html
@@ -214,13 +214,18 @@
</a>
</li>
<li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Forms</span>
+ <a class="kss-nav__menu-link" href="section-components.html">
+ <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
</a>
</li>
<li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+ <a class="kss-nav__menu-link" href="section-navigation.html">
+ <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-forms.html">
+ <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
</a>
</li>
</ul>
@@ -454,7 +459,7 @@ download a resource.</p>
<div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 4
+ Source: <code>base/grouping/_grouping.scss</code>, line 5
</div>
</section>
<section id="kssref-base-grouping-p" class="kss-section kss-section--depth-3">
@@ -519,7 +524,7 @@ erat porttitor ligula, eget lacinia odio sem nec elit.&lt;/p&gt;
</div>
<div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 152
+ Source: <code>base/grouping/_grouping.scss</code>, line 155
</div>
</section>
<section id="kssref-base-grouping-lists" class="kss-section kss-section--depth-3">
@@ -541,7 +546,7 @@ erat porttitor ligula, eget lacinia odio sem nec elit.&lt;/p&gt;
<div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 11
+ Source: <code>base/grouping/_grouping.scss</code>, line 32
</div>
</section>
<section id="kssref-base-grouping-lists-ol" class="kss-section kss-section--depth-4">
@@ -615,7 +620,7 @@ explicitly matter.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 26
+ Source: <code>base/grouping/_grouping.scss</code>, line 47
</div>
</section>
<section id="kssref-base-grouping-lists-ul" class="kss-section kss-section--depth-4">
@@ -689,7 +694,7 @@ explicitly matter.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 17
+ Source: <code>base/grouping/_grouping.scss</code>, line 38
</div>
</section>
<section id="kssref-base-grouping-lists-dl" class="kss-section kss-section--depth-4">
@@ -746,7 +751,7 @@ explicitly matter.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 35
+ Source: <code>base/grouping/_grouping.scss</code>, line 56
</div>
</section>
<section id="kssref-base-grouping-blockquote" class="kss-section kss-section--depth-3">
@@ -812,7 +817,7 @@ the name of the source work in <code>&lt;cite&gt;</code>.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 94
+ Source: <code>base/grouping/_grouping.scss</code>, line 12
</div>
</section>
<section id="kssref-base-grouping-figure" class="kss-section kss-section--depth-3">
@@ -870,7 +875,7 @@ caption of the figure.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 114
+ Source: <code>base/grouping/_grouping.scss</code>, line 115
</div>
</section>
<section id="kssref-base-grouping-hr" class="kss-section kss-section--depth-3">
@@ -927,7 +932,7 @@ ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
</div>
<div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 135
+ Source: <code>base/grouping/_grouping.scss</code>, line 136
</div>
</section>
<section id="kssref-base-grouping-pre" class="kss-section kss-section--depth-3">
@@ -975,7 +980,7 @@ fragments of computer code, ASCII art, etc.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 170
+ Source: <code>base/grouping/_grouping.scss</code>, line 173
</div>
</section>
<section id="kssref-base-table" class="kss-section kss-section--depth-2">
@@ -1166,7 +1171,7 @@ text&lt;/b&gt;. Bold text nested inside &lt;i&gt;italic text &lt;b&gt;should&lt;
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 30
+ Source: <code>base/text/_text.scss</code>, line 33
</div>
</section>
<section id="kssref-base-text-i" class="kss-section kss-section--depth-3">
@@ -1214,7 +1219,7 @@ Italic text nested inside &lt;b&gt;bold text &lt;i&gt;should&lt;/i&gt;&lt;/b&gt;
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 105
+ Source: <code>base/text/_text.scss</code>, line 122
</div>
</section>
<section id="kssref-base-text-abbr" class="kss-section kss-section--depth-3">
@@ -1303,7 +1308,7 @@ And &lt;abbr class=&quot;&quot; title=&quot;HyperText Markup Language&quot;&gt;H
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 50
+ Source: <code>base/text/_text.scss</code>, line 62
</div>
</section>
<section id="kssref-base-text-code" class="kss-section kss-section--depth-3">
@@ -1361,7 +1366,7 @@ what that meant.&lt;/p&gt;
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 62
+ Source: <code>base/text/_text.scss</code>, line 74
</div>
</section>
<section id="kssref-base-text-del" class="kss-section kss-section--depth-3">
@@ -1402,7 +1407,7 @@ what that meant.&lt;/p&gt;
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 80
+ Source: <code>base/text/_text.scss</code>, line 97
</div>
</section>
<section id="kssref-base-text-dfn" class="kss-section kss-section--depth-3">
@@ -1451,7 +1456,7 @@ and so Hammond ordered the iris to be opened.&lt;/p&gt;
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 92
+ Source: <code>base/text/_text.scss</code>, line 109
</div>
</section>
<section id="kssref-base-text-ins" class="kss-section kss-section--depth-3">
@@ -1494,7 +1499,7 @@ document.&lt;/ins&gt;
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 124
+ Source: <code>base/text/_text.scss</code>, line 141
</div>
</section>
<section id="kssref-base-text-mark" class="kss-section kss-section--depth-3">
@@ -1538,7 +1543,7 @@ context.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 136
+ Source: <code>base/text/_text.scss</code>, line 153
</div>
</section>
<section id="kssref-base-text-q" class="kss-section kss-section--depth-3">
@@ -1584,7 +1589,7 @@ source.&lt;/q&gt;
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 150
+ Source: <code>base/text/_text.scss</code>, line 168
</div>
</section>
<section id="kssref-base-text-s" class="kss-section kss-section--depth-3">
@@ -1625,7 +1630,7 @@ source.&lt;/q&gt;
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 163
+ Source: <code>base/text/_text.scss</code>, line 181
</div>
</section>
<section id="kssref-base-text-small" class="kss-section kss-section--depth-3">
@@ -1667,7 +1672,7 @@ text at 80% the size of the parent.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 175
+ Source: <code>base/text/_text.scss</code>, line 193
</div>
</section>
<section id="kssref-base-text-sub" class="kss-section kss-section--depth-3">
@@ -1709,7 +1714,7 @@ represents a subscript.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 189
+ Source: <code>base/text/_text.scss</code>, line 207
</div>
</section>
<section id="kssref-base-text-u" class="kss-section kss-section--depth-3">
@@ -1751,7 +1756,7 @@ used by web browsers to style hyperlinks.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 215
+ Source: <code>base/text/_text.scss</code>, line 234
</div>
</section>
<section id="kssref-base-embedded" class="kss-section kss-section--depth-2">
@@ -1879,7 +1884,7 @@ used by web browsers to style hyperlinks.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/embedded/_embedded.scss</code>, line 37
+ Source: <code>base/embedded/_embedded.scss</code>, line 35
</div>
</section>
</article>
diff --git a/STARTERKIT/styleguide/section-components.html b/STARTERKIT/styleguide/section-components.html
index 2b9eed7..3bd3aba 100644
--- a/STARTERKIT/styleguide/section-components.html
+++ b/STARTERKIT/styleguide/section-components.html
@@ -44,161 +44,118 @@
</a>
</li>
<li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Forms</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+ <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-box">
- <span class="kss-nav__ref ">5.1</span
+ <span class="kss-nav__ref ">4.1</span
><span class="kss-nav__name">Box</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-clearfix">
- <span class="kss-nav__ref ">5.2</span
+ <span class="kss-nav__ref ">4.2</span
><span class="kss-nav__name">Clearfix</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-comments">
- <span class="kss-nav__ref ">5.3</span
+ <span class="kss-nav__ref ">4.3</span
><span class="kss-nav__name">Comment</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-divider">
- <span class="kss-nav__ref ">5.4</span
+ <span class="kss-nav__ref ">4.4</span
><span class="kss-nav__name">Divider</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-header">
- <span class="kss-nav__ref ">5.5</span
+ <span class="kss-nav__ref ">4.5</span
><span class="kss-nav__name">Branding header</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-hidden">
- <span class="kss-nav__ref ">5.6</span
+ <span class="kss-nav__ref ">4.6</span
><span class="kss-nav__name">Hidden</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-highlight-mark">
- <span class="kss-nav__ref ">5.7</span
+ <span class="kss-nav__ref ">4.7</span
><span class="kss-nav__name">Highlight mark</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-links">
- <span class="kss-nav__ref ">5.8</span
+ <span class="kss-nav__ref ">4.8</span
><span class="kss-nav__name">Inline links</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-sibling">
- <span class="kss-nav__ref ">5.9</span
+ <span class="kss-nav__ref ">4.9</span
><span class="kss-nav__name">Inline sibling</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-messages">
- <span class="kss-nav__ref ">5.10</span
+ <span class="kss-nav__ref ">4.10</span
><span class="kss-nav__name">Messages</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-messages--color">
- <span class="kss-nav__ref ">5.11</span
+ <span class="kss-nav__ref ">4.11</span
><span class="kss-nav__name">Message colors</span>
</a>
</li>
<li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation">
- <span class="kss-nav__ref ">5.12</span
- ><span class="kss-nav__name">Navigation</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-breadcrumb">
- <span class="kss-nav__ref kss-nav__ref-child">5.12.1</span
- ><span class="kss-nav__name">Breadcrumb navigation</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-more-link">
- <span class="kss-nav__ref kss-nav__ref-child">5.12.2</span
- ><span class="kss-nav__name">&quot;More&quot; link</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-nav-menu">
- <span class="kss-nav__ref kss-nav__ref-child">5.12.3</span
- ><span class="kss-nav__name">Nav menu</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-navbar">
- <span class="kss-nav__ref kss-nav__ref-child">5.12.4</span
- ><span class="kss-nav__name">Navbar</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-pager">
- <span class="kss-nav__ref kss-nav__ref-child">5.12.5</span
- ><span class="kss-nav__name">Pager</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-skip-link">
- <span class="kss-nav__ref kss-nav__ref-child">5.12.6</span
- ><span class="kss-nav__name">Skip link</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-tabs">
- <span class="kss-nav__ref kss-nav__ref-child">5.12.7</span
- ><span class="kss-nav__name">Tabs</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-print-none">
- <span class="kss-nav__ref ">5.13</span
+ <span class="kss-nav__ref ">4.12</span
><span class="kss-nav__name">Do not print</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-responsive-video">
- <span class="kss-nav__ref ">5.14</span
+ <span class="kss-nav__ref ">4.13</span
><span class="kss-nav__name">Responsive video</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-visually-hidden">
- <span class="kss-nav__ref ">5.15</span
+ <span class="kss-nav__ref ">4.14</span
><span class="kss-nav__name">Visually hidden</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-watermark">
- <span class="kss-nav__ref ">5.16</span
+ <span class="kss-nav__ref ">4.15</span
><span class="kss-nav__name">Watermark</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-wireframe">
- <span class="kss-nav__ref ">5.17</span
+ <span class="kss-nav__ref ">4.16</span
><span class="kss-nav__name">Wireframe</span>
</a>
</li>
</ul>
</li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html">
+ <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-forms.html">
+ <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
+ </a>
+ </li>
</ul>
</nav>
</div>
@@ -210,7 +167,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-components">
<span class="kss-title__ref">
- 5
+ 4
<span class="kss-title__permalink-hash">
components
</span>
@@ -229,7 +186,7 @@ class names specified in the component.</p>
<div class="kss-source kss-style">
- Source: <code>styles.scss</code>, line 50
+ Source: <code>styles.scss</code>, line 41
</div>
</div>
<section id="kssref-components-box" class="kss-section kss-section--depth-2">
@@ -237,7 +194,7 @@ class names specified in the component.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-box">
<span class="kss-title__ref">
- 5.1
+ 4.1
<span class="kss-title__permalink-hash">
components.box
</span>
@@ -330,7 +287,7 @@ building a good component.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-clearfix">
<span class="kss-title__ref">
- 5.2
+ 4.2
<span class="kss-title__permalink-hash">
components.clearfix
</span>
@@ -376,7 +333,7 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-comments">
<span class="kss-title__ref">
- 5.3
+ 4.3
<span class="kss-title__permalink-hash">
components.comments
</span>
@@ -496,7 +453,7 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-divider">
<span class="kss-title__ref">
- 5.4
+ 4.4
<span class="kss-title__permalink-hash">
components.divider
</span>
@@ -557,7 +514,7 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-header">
<span class="kss-title__ref">
- 5.5
+ 4.5
<span class="kss-title__permalink-hash">
components.header
</span>
@@ -640,7 +597,7 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-hidden">
<span class="kss-title__ref">
- 5.6
+ 4.6
<span class="kss-title__permalink-hash">
components.hidden
</span>
@@ -690,7 +647,7 @@ the <code>.js-hidden</code> class.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-highlight-mark">
<span class="kss-title__ref">
- 5.7
+ 4.7
<span class="kss-title__permalink-hash">
components.highlight-mark
</span>
@@ -733,7 +690,7 @@ element directly.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-inline-links">
<span class="kss-title__ref">
- 5.8
+ 4.8
<span class="kss-title__permalink-hash">
components.inline-links
</span>
@@ -780,7 +737,7 @@ element directly.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-inline-sibling">
<span class="kss-title__ref">
- 5.9
+ 4.9
<span class="kss-title__permalink-hash">
components.inline-sibling
</span>
@@ -823,7 +780,7 @@ element directly.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-messages">
<span class="kss-title__ref">
- 5.10
+ 4.10
<span class="kss-title__permalink-hash">
components.messages
</span>
@@ -969,7 +926,7 @@ should use the <code>.messages--error</code> class.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-messages--color">
<span class="kss-title__ref">
- 5.11
+ 4.11
<span class="kss-title__permalink-hash">
components.messages--color
</span>
@@ -1049,582 +1006,12 @@ styling.</p>
Source: <code>components/messages/_messages.scss</code>, line 14
</div>
</section>
- <section id="kssref-components-navigation" class="kss-section kss-section--depth-2">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-navigation">
- <span class="kss-title__ref">
- 5.12
- <span class="kss-title__permalink-hash">
- components.navigation
- </span>
- </span>
- Navigation
- </a>
- </h2>
-
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>styles.scss</code>, line 59
- </div>
- </section>
- <section id="kssref-components-navigation-breadcrumb" class="kss-section kss-section--depth-3">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-components-navigation-breadcrumb">
- <span class="kss-title__ref">
- 5.12.1
- <span class="kss-title__permalink-hash">
- components.navigation.breadcrumb
- </span>
- </span>
- Breadcrumb navigation
- </a>
- </h3>
-
- <div class="kss-description">
- <p>The path to the current page in the form of a list of links.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <nav class="breadcrumb " role="navigation">
- <h2 class="breadcrumb__title">You are here</h2>
-
- <ol class="breadcrumb__list">
- <li class="breadcrumb__item"><a href="#">Home</a> › </li>
- <li class="breadcrumb__item"><a href="#">Level 1</a> › </li>
- <li class="breadcrumb__item"><a href="#">Level 2</a> › </li>
- <li class="breadcrumb__item">Current item</li>
- </ol>
-</nav>
-
- </div>
-
- </div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;nav class=&quot;breadcrumb &quot; role=&quot;navigation&quot;&gt;
- &lt;h2 class=&quot;breadcrumb__title&quot;&gt;You are here&lt;/h2&gt;
-
- &lt;ol class=&quot;breadcrumb__list&quot;&gt;
- &lt;li class=&quot;breadcrumb__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt; › &lt;/li&gt;
- &lt;li class=&quot;breadcrumb__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Level 1&lt;/a&gt; › &lt;/li&gt;
- &lt;li class=&quot;breadcrumb__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Level 2&lt;/a&gt; › &lt;/li&gt;
- &lt;li class=&quot;breadcrumb__item&quot;&gt;Current item&lt;/li&gt;
- &lt;/ol&gt;
-&lt;/nav&gt;
-</code></pre>
- </div>
-
- <div class="kss-source kss-style">
- Source: <code>components/breadcrumb/_breadcrumb.scss</code>, line 4
- </div>
- </section>
- <section id="kssref-components-navigation-more-link" class="kss-section kss-section--depth-3">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-components-navigation-more-link">
- <span class="kss-title__ref">
- 5.12.2
- <span class="kss-title__permalink-hash">
- components.navigation.more-link
- </span>
- </span>
- &quot;More&quot; link
- </a>
- </h3>
-
- <div class="kss-description">
- <p>Styles the &quot;Read more…&quot; and &quot;Help&quot; links common in Drupal.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div class="more-link ">
- <a href="#">Read more…</a>
-</div>
-
-<div class="more-link ">
- <a class="more-link__help-icon" href="#">Help</a>
-</div>
-
- </div>
-
- </div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;more-link &quot;&gt;
- &lt;a href=&quot;#&quot;&gt;Read more…&lt;/a&gt;
-&lt;/div&gt;
-
-&lt;div class=&quot;more-link &quot;&gt;
- &lt;a class=&quot;more-link__help-icon&quot; href=&quot;#&quot;&gt;Help&lt;/a&gt;
-&lt;/div&gt;
-</code></pre>
- </div>
-
- <div class="kss-source kss-style">
- Source: <code>components/more-link/_more-link.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-navigation-nav-menu" class="kss-section kss-section--depth-3">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-components-navigation-nav-menu">
- <span class="kss-title__ref">
- 5.12.3
- <span class="kss-title__permalink-hash">
- components.navigation.nav-menu
- </span>
- </span>
- Nav menu
- </a>
- </h3>
-
- <div class="kss-description">
- <p>A &quot;nav menu&quot; is secondary, hierarchical navigation which can be displayed to the
-side or below the main content.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ul class="nav-menu ">
- <li class="nav-menu__item">
- <a href="/" class="nav-menu__link">Home</a>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Blandit Jugis Sudo</a>
- </li>
- <li class="nav-menu__item is-expanded is-active-trail">
- <a href="#" class="nav-menu__link is-active-trail">Causa Diam Jumentum Wisi</a>
- <ul class="nav-menu">
- <li class="nav-menu__item">
- <a href="#" class="nav-menu__link">Dolor Huic Oppeto</a>
- </li>
- <li class="nav-menu__item is-active-trail is-active">
- <a href="#" class="nav-menu__link is-active">Decet</a>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Aliquip Similis</a>
- </li>
- </ul>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Abigo Caecus Causa Illum</a>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Ibidem Sudo</a>
- </li>
-</ul>
-
- </div>
-
- </div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;nav-menu &quot;&gt;
- &lt;li class=&quot;nav-menu__item&quot;&gt;
- &lt;a href=&quot;/&quot; class=&quot;nav-menu__link&quot;&gt;Home&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
- &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Blandit Jugis Sudo&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;nav-menu__item is-expanded is-active-trail&quot;&gt;
- &lt;a href=&quot;#&quot; class=&quot;nav-menu__link is-active-trail&quot;&gt;Causa Diam Jumentum Wisi&lt;/a&gt;
- &lt;ul class=&quot;nav-menu&quot;&gt;
- &lt;li class=&quot;nav-menu__item&quot;&gt;
- &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Dolor Huic Oppeto&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;nav-menu__item is-active-trail is-active&quot;&gt;
- &lt;a href=&quot;#&quot; class=&quot;nav-menu__link is-active&quot;&gt;Decet&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
- &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Aliquip Similis&lt;/a&gt;
- &lt;/li&gt;
- &lt;/ul&gt;
- &lt;/li&gt;
- &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
- &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Abigo Caecus Causa Illum&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
- &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Ibidem Sudo&lt;/a&gt;
- &lt;/li&gt;
-&lt;/ul&gt;
-</code></pre>
- </div>
-
- <div class="kss-source kss-style">
- Source: <code>components/nav-menu/_nav-menu.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-navigation-navbar" class="kss-section kss-section--depth-3">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-components-navigation-navbar">
- <span class="kss-title__ref">
- 5.12.4
- <span class="kss-title__permalink-hash">
- components.navigation.navbar
- </span>
- </span>
- Navbar
- </a>
- </h3>
-
- <div class="kss-description">
- <p>A simple method to get navigation links to appear in one line.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ul class="navbar clearfix">
- <li class="navbar__item"><a href="#">Home</a></li>
- <li class="navbar__item"><a href="#">Blandit Jugis</a></li>
- <li class="navbar__item"><a href="#">Causa Diam</a></li>
- <li class="navbar__item"><a href="#">Abigo Caecus</a></li>
- <li class="navbar__item"><a href="#">Ibidem Sudo</a></li>
- <li class="navbar__item"><a href="#">Luctus Luptatum</a></li>
- <li class="navbar__item"><a href="#">Ut</a></li>
-</ul>
-
- </div>
-
- </div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;navbar clearfix&quot;&gt;
- &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Blandit Jugis&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Causa Diam&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Abigo Caecus&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Ibidem Sudo&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Luctus Luptatum&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Ut&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</code></pre>
- </div>
-
- <div class="kss-source kss-style">
- Source: <code>components/navbar/_navbar.scss</code>, line 4
- </div>
- </section>
- <section id="kssref-components-navigation-pager" class="kss-section kss-section--depth-3">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-components-navigation-pager">
- <span class="kss-title__ref">
- 5.12.5
- <span class="kss-title__permalink-hash">
- components.navigation.pager
- </span>
- </span>
- Pager
- </a>
- </h3>
-
- <div class="kss-description">
- <p>Paged navigation is a list of page numbers when more than 1 page of content
-is available.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ul class="pager ">
- <li class="pager__item">
- <a title="Go to first page" href="/admin/content">« first</a>
- </li>
- <li class="pager__item">
- <a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
- </li>
- <li class="pager__item">
- <a title="Go to page 1" href="/admin/content">1</a>
- </li>
- <li class="pager__item">
- <a title="Go to page 2" href="/admin/content?page=1">2</a>
- </li>
- <li class="pager__current-item">3</li>
- <li class="pager__item">
- <a title="Go to page 4" href="/admin/content?page=3">4</a>
- </li>
- <li class="pager__item">
- <a title="Go to page 5" href="/admin/content?page=4">5</a>
- </li>
- <li class="pager__item">
- <a title="Go to next page" href="/admin/content?page=3">next ›</a>
- </li>
- <li class="pager__item">
- <a title="Go to last page" href="/admin/content?page=4">last »</a>
- </li>
-</ul>
-
- </div>
-
- </div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;pager &quot;&gt;
- &lt;li class=&quot;pager__item&quot;&gt;
- &lt;a title=&quot;Go to first page&quot; href=&quot;/admin/content&quot;&gt;« first&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;pager__item&quot;&gt;
- &lt;a title=&quot;Go to previous page&quot; href=&quot;/admin/content?page=1&quot;&gt;‹ previous&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;pager__item&quot;&gt;
- &lt;a title=&quot;Go to page 1&quot; href=&quot;/admin/content&quot;&gt;1&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;pager__item&quot;&gt;
- &lt;a title=&quot;Go to page 2&quot; href=&quot;/admin/content?page=1&quot;&gt;2&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;pager__current-item&quot;&gt;3&lt;/li&gt;
- &lt;li class=&quot;pager__item&quot;&gt;
- &lt;a title=&quot;Go to page 4&quot; href=&quot;/admin/content?page=3&quot;&gt;4&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;pager__item&quot;&gt;
- &lt;a title=&quot;Go to page 5&quot; href=&quot;/admin/content?page=4&quot;&gt;5&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;pager__item&quot;&gt;
- &lt;a title=&quot;Go to next page&quot; href=&quot;/admin/content?page=3&quot;&gt;next ›&lt;/a&gt;
- &lt;/li&gt;
- &lt;li class=&quot;pager__item&quot;&gt;
- &lt;a title=&quot;Go to last page&quot; href=&quot;/admin/content?page=4&quot;&gt;last »&lt;/a&gt;
- &lt;/li&gt;
-&lt;/ul&gt;
-</code></pre>
- </div>
-
- <div class="kss-source kss-style">
- Source: <code>components/pager/_pager.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-navigation-skip-link" class="kss-section kss-section--depth-3">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-components-navigation-skip-link">
- <span class="kss-title__ref">
- 5.12.6
- <span class="kss-title__permalink-hash">
- components.navigation.skip-link
- </span>
- </span>
- Skip link
- </a>
- </h3>
-
- <div class="kss-description">
- <p>To make the link completely hidden until a user tabs to the link, combine it
-with the <code>visually-hidden</code> component.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Examples </div>
-
- <div class="kss-modifier__default-name kss-style">
- Default styling
- </div>
-
- <div class="kss-modifier__example">
- <p class="skip-link__wrapper">
- <a href="#main-menu" class="skip-link visually-hidden--focusable [modifier class]">Jump to navigation</a>
-</p>
-
- </div>
-
- <div class="kss-modifier__name kss-style">
- :focus
- </div>
- <div class="kss-modifier__description kss-style">
- Focus styling.
- </div>
- <div class="kss-modifier__example">
- <p class="skip-link__wrapper">
- <a href="#main-menu" class="skip-link visually-hidden--focusable pseudo-class-focus">Jump to navigation</a>
-</p>
-
- </div>
- </div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class=&quot;skip-link__wrapper&quot;&gt;
- &lt;a href=&quot;#main-menu&quot; class=&quot;skip-link visually-hidden--focusable [modifier class]&quot;&gt;Jump to navigation&lt;/a&gt;
-&lt;/p&gt;
-</code></pre>
- </div>
-
- <div class="kss-source kss-style">
- Source: <code>components/skip-link/_skip-link.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-navigation-tabs" class="kss-section kss-section--depth-3">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-components-navigation-tabs">
- <span class="kss-title__ref">
- 5.12.7
- <span class="kss-title__permalink-hash">
- components.navigation.tabs
- </span>
- </span>
- Tabs
- </a>
- </h3>
-
- <div class="kss-description">
- <p>The primary and secondary tabs.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Examples </div>
-
- <div class="kss-modifier__default-name kss-style">
- Default styling
- </div>
-
- <div class="kss-modifier__example">
- <ul class="tabs [modifier class]">
- <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
-</ul>
-
- </div>
-
- <div class="kss-modifier__name kss-style">
- .tabs--secondary
- </div>
- <div class="kss-modifier__description kss-style">
- Secondary tabs
- </div>
- <div class="kss-modifier__example">
- <ul class="tabs tabs--secondary">
- <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
-</ul>
-
- </div>
- </div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;tabs [modifier class]&quot;&gt;
- &lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</code></pre>
- </div>
-
- <div class="kss-source kss-style">
- Source: <code>components/tabs/_tabs.scss</code>, line 4
- </div>
- </section>
- <section id="kssref-components-navigation-tabs-primary" class="kss-section kss-section--depth-4">
- <div class="kss-style">
- <h4 class="kss-title kss-title--level-4">
- <a class="kss-title__permalink" href="#kssref-components-navigation-tabs-primary">
- <span class="kss-title__ref">
- 5.12.7.1
- <span class="kss-title__permalink-hash">
- components.navigation.tabs.primary
- </span>
- </span>
- Tabs (stacked)
- </a>
- </h4>
-
- <div class="kss-description">
- <p>When the secondary tabs appear directly after the primary tabs, the styling
-is slightly different.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ul class="tabs ">
- <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
-</ul>
-
-<ul class="tabs tabs--secondary">
- <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
-</ul>
-
- </div>
-
- </div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;tabs &quot;&gt;
- &lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;
-
-&lt;ul class=&quot;tabs tabs--secondary&quot;&gt;
- &lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</code></pre>
- </div>
-
- <div class="kss-source kss-style">
- Source: <code>components/tabs/_tabs.scss</code>, line 14
- </div>
- </section>
<section id="kssref-components-print-none" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-print-none">
<span class="kss-title__ref">
- 5.13
+ 4.12
<span class="kss-title__permalink-hash">
components.print-none
</span>
@@ -1672,7 +1059,7 @@ performance.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-responsive-video">
<span class="kss-title__ref">
- 5.14
+ 4.13
<span class="kss-title__permalink-hash">
components.responsive-video
</span>
@@ -1734,7 +1121,7 @@ intrinsic aspect ratio is preserved at any screen width. The
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-visually-hidden">
<span class="kss-title__ref">
- 5.15
+ 4.14
<span class="kss-title__permalink-hash">
components.visually-hidden
</span>
@@ -1818,7 +1205,7 @@ intrinsic aspect ratio is preserved at any screen width. The
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-watermark">
<span class="kss-title__ref">
- 5.16
+ 4.15
<span class="kss-title__permalink-hash">
components.watermark
</span>
@@ -1867,7 +1254,7 @@ intrinsic aspect ratio is preserved at any screen width. The
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-wireframe">
<span class="kss-title__ref">
- 5.17
+ 4.16
<span class="kss-title__permalink-hash">
components.wireframe
</span>
diff --git a/STARTERKIT/styleguide/section-forms.html b/STARTERKIT/styleguide/section-forms.html
index 512e5f6..2b13428 100644
--- a/STARTERKIT/styleguide/section-forms.html
+++ b/STARTERKIT/styleguide/section-forms.html
@@ -44,131 +44,136 @@
</a>
</li>
<li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-components.html">
+ <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html">
+ <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Forms</span>
+ <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base">
- <span class="kss-nav__ref ">4.1</span
+ <span class="kss-nav__ref ">6.1</span
><span class="kss-nav__name">Form defaults</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-button">
- <span class="kss-nav__ref kss-nav__ref-child">4.1.1</span
+ <span class="kss-nav__ref kss-nav__ref-child">6.1.1</span
><span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-fieldset">
- <span class="kss-nav__ref kss-nav__ref-child">4.1.2</span
+ <span class="kss-nav__ref kss-nav__ref-child">6.1.2</span
><span class="kss-nav__name">Fieldsets</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input">
- <span class="kss-nav__ref kss-nav__ref-child">4.1.3</span
+ <span class="kss-nav__ref kss-nav__ref-child">6.1.3</span
><span class="kss-nav__name">Inputs</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-checkbox">
- <span class="kss-nav__ref kss-nav__ref-child">4.1.4</span
+ <span class="kss-nav__ref kss-nav__ref-child">6.1.4</span
><span class="kss-nav__name">Checkboxes</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-radio">
- <span class="kss-nav__ref kss-nav__ref-child">4.1.5</span
+ <span class="kss-nav__ref kss-nav__ref-child">6.1.5</span
><span class="kss-nav__name">Radio buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-label">
- <span class="kss-nav__ref kss-nav__ref-child">4.1.6</span
+ <span class="kss-nav__ref kss-nav__ref-child">6.1.6</span
><span class="kss-nav__name">Labels</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-select">
- <span class="kss-nav__ref kss-nav__ref-child">4.1.7</span
+ <span class="kss-nav__ref kss-nav__ref-child">6.1.7</span
><span class="kss-nav__name">Select list</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-textarea">
- <span class="kss-nav__ref kss-nav__ref-child">4.1.8</span
+ <span class="kss-nav__ref kss-nav__ref-child">6.1.8</span
><span class="kss-nav__name">Text areas</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-autocomplete">
- <span class="kss-nav__ref ">4.2</span
+ <span class="kss-nav__ref ">6.2</span
><span class="kss-nav__name">Autocomplete field</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-button">
- <span class="kss-nav__ref ">4.3</span
+ <span class="kss-nav__ref ">6.3</span
><span class="kss-nav__name">Button</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-collapsible-fieldset">
- <span class="kss-nav__ref ">4.4</span
+ <span class="kss-nav__ref ">6.4</span
><span class="kss-nav__name">Collapsible fieldset</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-form-item">
- <span class="kss-nav__ref ">4.5</span
+ <span class="kss-nav__ref ">6.5</span
><span class="kss-nav__name">Form item</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-form-item--radio">
- <span class="kss-nav__ref ">4.6</span
+ <span class="kss-nav__ref ">6.6</span
><span class="kss-nav__name">Form item (radio)</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-form-table">
- <span class="kss-nav__ref ">4.7</span
+ <span class="kss-nav__ref ">6.7</span
><span class="kss-nav__name">Drupal admin tables</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-progress-bar">
- <span class="kss-nav__ref ">4.8</span
+ <span class="kss-nav__ref ">6.8</span
><span class="kss-nav__name">Progress bar</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-progress-throbber">
- <span class="kss-nav__ref ">4.9</span
+ <span class="kss-nav__ref ">6.9</span
><span class="kss-nav__name">Progress throbber</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-resizable-textarea">
- <span class="kss-nav__ref ">4.10</span
+ <span class="kss-nav__ref ">6.10</span
><span class="kss-nav__name">Resizable textarea</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-table-drag">
- <span class="kss-nav__ref ">4.11</span
+ <span class="kss-nav__ref ">6.11</span
><span class="kss-nav__name">Table drag</span>
</a>
</li>
</ul>
</li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
- </a>
- </li>
</ul>
</nav>
</div>
@@ -180,7 +185,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-forms">
<span class="kss-title__ref">
- 4
+ 6
<span class="kss-title__permalink-hash">
forms
</span>
@@ -199,7 +204,7 @@ or form elements.</p>
<div class="kss-source kss-style">
- Source: <code>styles.scss</code>, line 41
+ Source: <code>styles.scss</code>, line 83
</div>
</div>
<section id="kssref-forms-base" class="kss-section kss-section--depth-2">
@@ -207,7 +212,7 @@ or form elements.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-base">
<span class="kss-title__ref">
- 4.1
+ 6.1
<span class="kss-title__permalink-hash">
forms.base
</span>
@@ -235,7 +240,7 @@ to an HTML form element, these styles will be the ones displayed.</p>
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-button">
<span class="kss-title__ref">
- 4.1.1
+ 6.1.1
<span class="kss-title__permalink-hash">
forms.base.button
</span>
@@ -387,7 +392,7 @@ see the <a href="section-forms.html#kssref-forms-button">button component</a>.</
</div>
<div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 97
+ Source: <code>base/forms/_forms.scss</code>, line 106
</div>
</section>
<section id="kssref-forms-base-fieldset" class="kss-section kss-section--depth-3">
@@ -395,7 +400,7 @@ see the <a href="section-forms.html#kssref-forms-button">button component</a>.</
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-fieldset">
<span class="kss-title__ref">
- 4.1.2
+ 6.1.2
<span class="kss-title__permalink-hash">
forms.base.fieldset
</span>
@@ -471,7 +476,7 @@ common name given by the <code>&lt;legend&gt;</code> element.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 206
+ Source: <code>base/forms/_forms.scss</code>, line 207
</div>
</section>
<section id="kssref-forms-base-input" class="kss-section kss-section--depth-3">
@@ -479,7 +484,7 @@ common name given by the <code>&lt;legend&gt;</code> element.</p>
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-input">
<span class="kss-title__ref">
- 4.1.3
+ 6.1.3
<span class="kss-title__permalink-hash">
forms.base.input
</span>
@@ -706,7 +711,7 @@ HTML5 types: <code>text</code>, <code>search</code>, <code>tel</code>, <code>url
</div>
<div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 130
+ Source: <code>base/forms/_forms.scss</code>, line 135
</div>
</section>
<section id="kssref-forms-base-input-checkbox" class="kss-section kss-section--depth-3">
@@ -714,7 +719,7 @@ HTML5 types: <code>text</code>, <code>search</code>, <code>tel</code>, <code>url
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-input-checkbox">
<span class="kss-title__ref">
- 4.1.4
+ 6.1.4
<span class="kss-title__permalink-hash">
forms.base.input-checkbox
</span>
@@ -762,7 +767,7 @@ implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>
</div>
<div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 166
+ Source: <code>base/forms/_forms.scss</code>, line 169
</div>
</section>
<section id="kssref-forms-base-input-radio" class="kss-section kss-section--depth-3">
@@ -770,7 +775,7 @@ implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-input-radio">
<span class="kss-title__ref">
- 4.1.5
+ 6.1.5
<span class="kss-title__permalink-hash">
forms.base.input-radio
</span>
@@ -826,7 +831,7 @@ implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>
</div>
<div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 178
+ Source: <code>base/forms/_forms.scss</code>, line 181
</div>
</section>
<section id="kssref-forms-base-label" class="kss-section kss-section--depth-3">
@@ -834,7 +839,7 @@ implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-label">
<span class="kss-title__ref">
- 4.1.6
+ 6.1.6
<span class="kss-title__permalink-hash">
forms.base.label
</span>
@@ -883,7 +888,7 @@ putting the form control inside the label element itself.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 238
+ Source: <code>base/forms/_forms.scss</code>, line 241
</div>
</section>
<section id="kssref-forms-base-select" class="kss-section kss-section--depth-3">
@@ -891,7 +896,7 @@ putting the form control inside the label element itself.</p>
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-select">
<span class="kss-title__ref">
- 4.1.7
+ 6.1.7
<span class="kss-title__permalink-hash">
forms.base.select
</span>
@@ -1001,7 +1006,7 @@ styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is
</div>
<div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 254
+ Source: <code>base/forms/_forms.scss</code>, line 257
</div>
</section>
<section id="kssref-forms-base-textarea" class="kss-section kss-section--depth-3">
@@ -1009,7 +1014,7 @@ styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-textarea">
<span class="kss-title__ref">
- 4.1.8
+ 6.1.8
<span class="kss-title__permalink-hash">
forms.base.textarea
</span>
@@ -1056,7 +1061,7 @@ styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is
</div>
<div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 276
+ Source: <code>base/forms/_forms.scss</code>, line 278
</div>
</section>
<section id="kssref-forms-autocomplete" class="kss-section kss-section--depth-2">
@@ -1064,7 +1069,7 @@ styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-autocomplete">
<span class="kss-title__ref">
- 4.2
+ 6.2
<span class="kss-title__permalink-hash">
forms.autocomplete
</span>
@@ -1132,7 +1137,7 @@ item allowing them to choose an option.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>components/autocomplete/_autocomplete.scss</code>, line 1
+ Source: <code>forms/autocomplete/_autocomplete.scss</code>, line 1
</div>
</section>
<section id="kssref-forms-button" class="kss-section kss-section--depth-2">
@@ -1140,7 +1145,7 @@ item allowing them to choose an option.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-button">
<span class="kss-title__ref">
- 4.3
+ 6.3
<span class="kss-title__permalink-hash">
forms.button
</span>
@@ -1307,7 +1312,7 @@ link).</p>
</div>
<div class="kss-source kss-style">
- Source: <code>components/button/_button.scss</code>, line 1
+ Source: <code>forms/button/_button.scss</code>, line 1
</div>
</section>
<section id="kssref-forms-collapsible-fieldset" class="kss-section kss-section--depth-2">
@@ -1315,7 +1320,7 @@ link).</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-collapsible-fieldset">
<span class="kss-title__ref">
- 4.4
+ 6.4
<span class="kss-title__permalink-hash">
forms.collapsible-fieldset
</span>
@@ -1391,7 +1396,7 @@ link).</p>
</div>
<div class="kss-source kss-style">
- Source: <code>components/collapsible-fieldset/_collapsible-fieldset.scss</code>, line 1
+ Source: <code>forms/collapsible-fieldset/_collapsible-fieldset.scss</code>, line 1
</div>
</section>
<section id="kssref-forms-form-item" class="kss-section kss-section--depth-2">
@@ -1399,7 +1404,7 @@ link).</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-form-item">
<span class="kss-title__ref">
- 4.5
+ 6.5
<span class="kss-title__permalink-hash">
forms.form-item
</span>
@@ -1530,7 +1535,7 @@ link).</p>
</div>
<div class="kss-source kss-style">
- Source: <code>components/form-item/_form-item.scss</code>, line 4
+ Source: <code>forms/form-item/_form-item.scss</code>, line 4
</div>
</section>
<section id="kssref-forms-form-item--radio" class="kss-section kss-section--depth-2">
@@ -1538,7 +1543,7 @@ link).</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-form-item--radio">
<span class="kss-title__ref">
- 4.6
+ 6.6
<span class="kss-title__permalink-hash">
forms.form-item--radio
</span>
@@ -1649,7 +1654,7 @@ the normal form item and is placed on each of the nested form items.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>components/form-item/_form-item.scss</code>, line 17
+ Source: <code>forms/form-item/_form-item.scss</code>, line 17
</div>
</section>
<section id="kssref-forms-form-table" class="kss-section kss-section--depth-2">
@@ -1657,7 +1662,7 @@ the normal form item and is placed on each of the nested form items.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-form-table">
<span class="kss-title__ref">
- 4.7
+ 6.7
<span class="kss-title__permalink-hash">
forms.form-table
</span>
@@ -1900,7 +1905,7 @@ delete this component to save file weight in the generated CSS.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>components/form-table/_form-table.scss</code>, line 1
+ Source: <code>forms/form-table/_form-table.scss</code>, line 1
</div>
</section>
<section id="kssref-forms-progress-bar" class="kss-section kss-section--depth-2">
@@ -1908,7 +1913,7 @@ delete this component to save file weight in the generated CSS.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-progress-bar">
<span class="kss-title__ref">
- 4.8
+ 6.8
<span class="kss-title__permalink-hash">
forms.progress-bar
</span>
@@ -1966,7 +1971,7 @@ delete this component to save file weight in the generated CSS.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>components/progress-bar/_progress-bar.scss</code>, line 1
+ Source: <code>forms/progress-bar/_progress-bar.scss</code>, line 1
</div>
</section>
<section id="kssref-forms-progress-throbber" class="kss-section kss-section--depth-2">
@@ -1974,7 +1979,7 @@ delete this component to save file weight in the generated CSS.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-progress-throbber">
<span class="kss-title__ref">
- 4.9
+ 6.9
<span class="kss-title__permalink-hash">
forms.progress-throbber
</span>
@@ -2013,7 +2018,7 @@ delete this component to save file weight in the generated CSS.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>components/progress-throbber/_progress-throbber.scss</code>, line 1
+ Source: <code>forms/progress-throbber/_progress-throbber.scss</code>, line 1
</div>
</section>
<section id="kssref-forms-resizable-textarea" class="kss-section kss-section--depth-2">
@@ -2021,7 +2026,7 @@ delete this component to save file weight in the generated CSS.</p>
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-resizable-textarea">
<span class="kss-title__ref">
- 4.10
+ 6.10
<span class="kss-title__permalink-hash">
forms.resizable-textarea
</span>
@@ -2064,7 +2069,7 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
</div>
<div class="kss-source kss-style">
- Source: <code>components/resizable-textarea/_resizable-textarea.scss</code>, line 1
+ Source: <code>forms/resizable-textarea/_resizable-textarea.scss</code>, line 1
</div>
</section>
<section id="kssref-forms-table-drag" class="kss-section kss-section--depth-2">
@@ -2072,7 +2077,7 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-table-drag">
<span class="kss-title__ref">
- 4.11
+ 6.11
<span class="kss-title__permalink-hash">
forms.table-drag
</span>
@@ -2325,7 +2330,7 @@ delete this component to save file weight in the generated CSS.</p>
</div>
<div class="kss-source kss-style">
- Source: <code>components/table-drag/_table-drag.scss</code>, line 1
+ Source: <code>forms/table-drag/_table-drag.scss</code>, line 1
</div>
</section>
</article>
diff --git a/STARTERKIT/styleguide/section-layouts.html b/STARTERKIT/styleguide/section-layouts.html
index 514639e..db51885 100644
--- a/STARTERKIT/styleguide/section-layouts.html
+++ b/STARTERKIT/styleguide/section-layouts.html
@@ -64,13 +64,18 @@
</ul>
</li>
<li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Forms</span>
+ <a class="kss-nav__menu-link" href="section-components.html">
+ <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
</a>
</li>
<li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+ <a class="kss-nav__menu-link" href="section-navigation.html">
+ <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-forms.html">
+ <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
</a>
</li>
</ul>
diff --git a/STARTERKIT/styleguide/section-navigation.html b/STARTERKIT/styleguide/section-navigation.html
new file mode 100644
index 0000000..89055d1
--- /dev/null
+++ b/STARTERKIT/styleguide/section-navigation.html
@@ -0,0 +1,711 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Zen 7.x-6.x Style Guide</title>
+
+ <meta name="description" content="">
+ <meta name="generator" content="kss-node">
+ <meta name="viewport" content="width=device-width">
+
+ <link rel="stylesheet" href="kss-assets/kss.css">
+ <link rel="stylesheet" href="../css/styles.css">
+<link rel="stylesheet" href="../css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node">
+
+<div class="kss-sidebar kss-style">
+ <header class="kss-header">
+ <h1 class="kss-doc-title">Zen 7.x-6.x Style Guide</h1>
+ </header>
+ <nav class="kss-nav">
+ <ul class="kss-nav__menu">
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="./">
+ <span class="kss-nav__ref">0</span
+ ><span class="kss-nav__name">Overview</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-sass.html">
+ <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-base.html">
+ <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-layouts.html">
+ <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-components.html">
+ <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html">
+ <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+ </a>
+ <ul class="kss-nav__menu-child">
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-breadcrumb">
+ <span class="kss-nav__ref ">5.1</span
+ ><span class="kss-nav__name">Breadcrumb navigation</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-more-link">
+ <span class="kss-nav__ref ">5.2</span
+ ><span class="kss-nav__name">&quot;More&quot; link</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-nav-menu">
+ <span class="kss-nav__ref ">5.3</span
+ ><span class="kss-nav__name">Nav menu</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-navbar">
+ <span class="kss-nav__ref ">5.4</span
+ ><span class="kss-nav__name">Navbar</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-pager">
+ <span class="kss-nav__ref ">5.5</span
+ ><span class="kss-nav__name">Pager</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-skip-link">
+ <span class="kss-nav__ref ">5.6</span
+ ><span class="kss-nav__name">Skip link</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-tabs">
+ <span class="kss-nav__ref ">5.7</span
+ ><span class="kss-nav__name">Tabs</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-tabs-stacked">
+ <span class="kss-nav__ref kss-nav__ref-child">5.7.1</span
+ ><span class="kss-nav__name">Tabs (stacked)</span>
+ </a>
+ </li>
+ </ul>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-forms.html">
+ <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+</div>
+<article role="main" class="kss-main">
+
+
+ <div id="kssref-navigation" class="kss-section kss-section--depth-1">
+ <div class="kss-style">
+ <h1 class="kss-title kss-title--level-1">
+ <a class="kss-title__permalink" href="#kssref-navigation">
+ <span class="kss-title__ref">
+ 5
+ <span class="kss-title__permalink-hash">
+ navigation
+ </span>
+ </span>
+ Navigation
+ </a>
+ </h1>
+
+ <div class="kss-description">
+ <p>Navigation components are specialized design components that are used for
+page navigation.</p>
+
+ </div>
+
+ </div>
+
+
+ <div class="kss-source kss-style">
+ Source: <code>styles.scss</code>, line 66
+ </div>
+ </div>
+ <section id="kssref-navigation-breadcrumb" class="kss-section kss-section--depth-2">
+ <div class="kss-style">
+ <h2 class="kss-title kss-title--level-2">
+ <a class="kss-title__permalink" href="#kssref-navigation-breadcrumb">
+ <span class="kss-title__ref">
+ 5.1
+ <span class="kss-title__permalink-hash">
+ navigation.breadcrumb
+ </span>
+ </span>
+ Breadcrumb navigation
+ </a>
+ </h2>
+
+ <div class="kss-description">
+ <p>The path to the current page in the form of a list of links.</p>
+
+ </div>
+
+ </div>
+
+ <div class="kss-modifier__wrapper">
+ <div class="kss-modifier__heading kss-style">
+ Example </div>
+
+
+ <div class="kss-modifier__example">
+ <nav class="breadcrumb " role="navigation">
+ <h2 class="breadcrumb__title">You are here</h2>
+
+ <ol class="breadcrumb__list">
+ <li class="breadcrumb__item"><a href="#">Home</a> › </li>
+ <li class="breadcrumb__item"><a href="#">Level 1</a> › </li>
+ <li class="breadcrumb__item"><a href="#">Level 2</a> › </li>
+ <li class="breadcrumb__item">Current item</li>
+ </ol>
+</nav>
+
+ </div>
+
+ </div>
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;nav class=&quot;breadcrumb &quot; role=&quot;navigation&quot;&gt;
+ &lt;h2 class=&quot;breadcrumb__title&quot;&gt;You are here&lt;/h2&gt;
+
+ &lt;ol class=&quot;breadcrumb__list&quot;&gt;
+ &lt;li class=&quot;breadcrumb__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt; › &lt;/li&gt;
+ &lt;li class=&quot;breadcrumb__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Level 1&lt;/a&gt; › &lt;/li&gt;
+ &lt;li class=&quot;breadcrumb__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Level 2&lt;/a&gt; › &lt;/li&gt;
+ &lt;li class=&quot;breadcrumb__item&quot;&gt;Current item&lt;/li&gt;
+ &lt;/ol&gt;
+&lt;/nav&gt;
+</code></pre>
+ </div>
+
+ <div class="kss-source kss-style">
+ Source: <code>navigation/breadcrumb/_breadcrumb.scss</code>, line 4
+ </div>
+ </section>
+ <section id="kssref-navigation-more-link" class="kss-section kss-section--depth-2">
+ <div class="kss-style">
+ <h2 class="kss-title kss-title--level-2">
+ <a class="kss-title__permalink" href="#kssref-navigation-more-link">
+ <span class="kss-title__ref">
+ 5.2
+ <span class="kss-title__permalink-hash">
+ navigation.more-link
+ </span>
+ </span>
+ &quot;More&quot; link
+ </a>
+ </h2>
+
+ <div class="kss-description">
+ <p>Styles the &quot;Read more…&quot; and &quot;Help&quot; links common in Drupal.</p>
+
+ </div>
+
+ </div>
+
+ <div class="kss-modifier__wrapper">
+ <div class="kss-modifier__heading kss-style">
+ Example </div>
+
+
+ <div class="kss-modifier__example">
+ <div class="more-link ">
+ <a href="#">Read more…</a>
+</div>
+
+<div class="more-link ">
+ <a class="more-link__help-icon" href="#">Help</a>
+</div>
+
+ </div>
+
+ </div>
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;more-link &quot;&gt;
+ &lt;a href=&quot;#&quot;&gt;Read more…&lt;/a&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;more-link &quot;&gt;
+ &lt;a class=&quot;more-link__help-icon&quot; href=&quot;#&quot;&gt;Help&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+ </div>
+
+ <div class="kss-source kss-style">
+ Source: <code>navigation/more-link/_more-link.scss</code>, line 1
+ </div>
+ </section>
+ <section id="kssref-navigation-nav-menu" class="kss-section kss-section--depth-2">
+ <div class="kss-style">
+ <h2 class="kss-title kss-title--level-2">
+ <a class="kss-title__permalink" href="#kssref-navigation-nav-menu">
+ <span class="kss-title__ref">
+ 5.3
+ <span class="kss-title__permalink-hash">
+ navigation.nav-menu
+ </span>
+ </span>
+ Nav menu
+ </a>
+ </h2>
+
+ <div class="kss-description">
+ <p>A &quot;nav menu&quot; is secondary, hierarchical navigation which can be displayed to the
+side or below the main content.</p>
+
+ </div>
+
+ </div>
+
+ <div class="kss-modifier__wrapper">
+ <div class="kss-modifier__heading kss-style">
+ Example </div>
+
+
+ <div class="kss-modifier__example">
+ <ul class="nav-menu ">
+ <li class="nav-menu__item">
+ <a href="/" class="nav-menu__link">Home</a>
+ </li>
+ <li class="nav-menu__item is-collapsed">
+ <a href="#" class="nav-menu__link">Blandit Jugis Sudo</a>
+ </li>
+ <li class="nav-menu__item is-expanded is-active-trail">
+ <a href="#" class="nav-menu__link is-active-trail">Causa Diam Jumentum Wisi</a>
+ <ul class="nav-menu">
+ <li class="nav-menu__item">
+ <a href="#" class="nav-menu__link">Dolor Huic Oppeto</a>
+ </li>
+ <li class="nav-menu__item is-active-trail is-active">
+ <a href="#" class="nav-menu__link is-active">Decet</a>
+ </li>
+ <li class="nav-menu__item is-collapsed">
+ <a href="#" class="nav-menu__link">Aliquip Similis</a>
+ </li>
+ </ul>
+ </li>
+ <li class="nav-menu__item is-collapsed">
+ <a href="#" class="nav-menu__link">Abigo Caecus Causa Illum</a>
+ </li>
+ <li class="nav-menu__item is-collapsed">
+ <a href="#" class="nav-menu__link">Ibidem Sudo</a>
+ </li>
+</ul>
+
+ </div>
+
+ </div>
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;nav-menu &quot;&gt;
+ &lt;li class=&quot;nav-menu__item&quot;&gt;
+ &lt;a href=&quot;/&quot; class=&quot;nav-menu__link&quot;&gt;Home&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
+ &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Blandit Jugis Sudo&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;nav-menu__item is-expanded is-active-trail&quot;&gt;
+ &lt;a href=&quot;#&quot; class=&quot;nav-menu__link is-active-trail&quot;&gt;Causa Diam Jumentum Wisi&lt;/a&gt;
+ &lt;ul class=&quot;nav-menu&quot;&gt;
+ &lt;li class=&quot;nav-menu__item&quot;&gt;
+ &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Dolor Huic Oppeto&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;nav-menu__item is-active-trail is-active&quot;&gt;
+ &lt;a href=&quot;#&quot; class=&quot;nav-menu__link is-active&quot;&gt;Decet&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
+ &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Aliquip Similis&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
+ &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Abigo Caecus Causa Illum&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
+ &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Ibidem Sudo&lt;/a&gt;
+ &lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+ </div>
+
+ <div class="kss-source kss-style">
+ Source: <code>navigation/nav-menu/_nav-menu.scss</code>, line 1
+ </div>
+ </section>
+ <section id="kssref-navigation-navbar" class="kss-section kss-section--depth-2">
+ <div class="kss-style">
+ <h2 class="kss-title kss-title--level-2">
+ <a class="kss-title__permalink" href="#kssref-navigation-navbar">
+ <span class="kss-title__ref">
+ 5.4
+ <span class="kss-title__permalink-hash">
+ navigation.navbar
+ </span>
+ </span>
+ Navbar
+ </a>
+ </h2>
+
+ <div class="kss-description">
+ <p>A simple method to get navigation links to appear in one line.</p>
+
+ </div>
+
+ </div>
+
+ <div class="kss-modifier__wrapper">
+ <div class="kss-modifier__heading kss-style">
+ Example </div>
+
+
+ <div class="kss-modifier__example">
+ <ul class="navbar clearfix">
+ <li class="navbar__item"><a href="#">Home</a></li>
+ <li class="navbar__item"><a href="#">Blandit Jugis</a></li>
+ <li class="navbar__item"><a href="#">Causa Diam</a></li>
+ <li class="navbar__item"><a href="#">Abigo Caecus</a></li>
+ <li class="navbar__item"><a href="#">Ibidem Sudo</a></li>
+ <li class="navbar__item"><a href="#">Luctus Luptatum</a></li>
+ <li class="navbar__item"><a href="#">Ut</a></li>
+</ul>
+
+ </div>
+
+ </div>
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;navbar clearfix&quot;&gt;
+ &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Blandit Jugis&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Causa Diam&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Abigo Caecus&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Ibidem Sudo&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Luctus Luptatum&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Ut&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+ </div>
+
+ <div class="kss-source kss-style">
+ Source: <code>navigation/navbar/_navbar.scss</code>, line 4
+ </div>
+ </section>
+ <section id="kssref-navigation-pager" class="kss-section kss-section--depth-2">
+ <div class="kss-style">
+ <h2 class="kss-title kss-title--level-2">
+ <a class="kss-title__permalink" href="#kssref-navigation-pager">
+ <span class="kss-title__ref">
+ 5.5
+ <span class="kss-title__permalink-hash">
+ navigation.pager
+ </span>
+ </span>
+ Pager
+ </a>
+ </h2>
+
+ <div class="kss-description">
+ <p>Paged navigation is a list of page numbers when more than 1 page of content
+is available.</p>
+
+ </div>
+
+ </div>
+
+ <div class="kss-modifier__wrapper">
+ <div class="kss-modifier__heading kss-style">
+ Example </div>
+
+
+ <div class="kss-modifier__example">
+ <ul class="pager ">
+ <li class="pager__item">
+ <a title="Go to first page" href="/admin/content">« first</a>
+ </li>
+ <li class="pager__item">
+ <a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
+ </li>
+ <li class="pager__item">
+ <a title="Go to page 1" href="/admin/content">1</a>
+ </li>
+ <li class="pager__item">
+ <a title="Go to page 2" href="/admin/content?page=1">2</a>
+ </li>
+ <li class="pager__current-item">3</li>
+ <li class="pager__item">
+ <a title="Go to page 4" href="/admin/content?page=3">4</a>
+ </li>
+ <li class="pager__item">
+ <a title="Go to page 5" href="/admin/content?page=4">5</a>
+ </li>
+ <li class="pager__item">
+ <a title="Go to next page" href="/admin/content?page=3">next ›</a>
+ </li>
+ <li class="pager__item">
+ <a title="Go to last page" href="/admin/content?page=4">last »</a>
+ </li>
+</ul>
+
+ </div>
+
+ </div>
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;pager &quot;&gt;
+ &lt;li class=&quot;pager__item&quot;&gt;
+ &lt;a title=&quot;Go to first page&quot; href=&quot;/admin/content&quot;&gt;« first&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;pager__item&quot;&gt;
+ &lt;a title=&quot;Go to previous page&quot; href=&quot;/admin/content?page=1&quot;&gt;‹ previous&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;pager__item&quot;&gt;
+ &lt;a title=&quot;Go to page 1&quot; href=&quot;/admin/content&quot;&gt;1&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;pager__item&quot;&gt;
+ &lt;a title=&quot;Go to page 2&quot; href=&quot;/admin/content?page=1&quot;&gt;2&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;pager__current-item&quot;&gt;3&lt;/li&gt;
+ &lt;li class=&quot;pager__item&quot;&gt;
+ &lt;a title=&quot;Go to page 4&quot; href=&quot;/admin/content?page=3&quot;&gt;4&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;pager__item&quot;&gt;
+ &lt;a title=&quot;Go to page 5&quot; href=&quot;/admin/content?page=4&quot;&gt;5&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;pager__item&quot;&gt;
+ &lt;a title=&quot;Go to next page&quot; href=&quot;/admin/content?page=3&quot;&gt;next ›&lt;/a&gt;
+ &lt;/li&gt;
+ &lt;li class=&quot;pager__item&quot;&gt;
+ &lt;a title=&quot;Go to last page&quot; href=&quot;/admin/content?page=4&quot;&gt;last »&lt;/a&gt;
+ &lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+ </div>
+
+ <div class="kss-source kss-style">
+ Source: <code>navigation/pager/_pager.scss</code>, line 1
+ </div>
+ </section>
+ <section id="kssref-navigation-skip-link" class="kss-section kss-section--depth-2">
+ <div class="kss-style">
+ <h2 class="kss-title kss-title--level-2">
+ <a class="kss-title__permalink" href="#kssref-navigation-skip-link">
+ <span class="kss-title__ref">
+ 5.6
+ <span class="kss-title__permalink-hash">
+ navigation.skip-link
+ </span>
+ </span>
+ Skip link
+ </a>
+ </h2>
+
+ <div class="kss-description">
+ <p>To make the link completely hidden until a user tabs to the link, combine it
+with the <code>visually-hidden</code> component.</p>
+
+ </div>
+
+ </div>
+
+ <div class="kss-modifier__wrapper">
+ <div class="kss-modifier__heading kss-style">
+ Examples </div>
+
+ <div class="kss-modifier__default-name kss-style">
+ Default styling
+ </div>
+
+ <div class="kss-modifier__example">
+ <p class="skip-link__wrapper">
+ <a href="#main-menu" class="skip-link visually-hidden--focusable [modifier class]">Jump to navigation</a>
+</p>
+
+ </div>
+
+ <div class="kss-modifier__name kss-style">
+ :focus
+ </div>
+ <div class="kss-modifier__description kss-style">
+ Focus styling.
+ </div>
+ <div class="kss-modifier__example">
+ <p class="skip-link__wrapper">
+ <a href="#main-menu" class="skip-link visually-hidden--focusable pseudo-class-focus">Jump to navigation</a>
+</p>
+
+ </div>
+ </div>
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class=&quot;skip-link__wrapper&quot;&gt;
+ &lt;a href=&quot;#main-menu&quot; class=&quot;skip-link visually-hidden--focusable [modifier class]&quot;&gt;Jump to navigation&lt;/a&gt;
+&lt;/p&gt;
+</code></pre>
+ </div>
+
+ <div class="kss-source kss-style">
+ Source: <code>navigation/skip-link/_skip-link.scss</code>, line 1
+ </div>
+ </section>
+ <section id="kssref-navigation-tabs" class="kss-section kss-section--depth-2">
+ <div class="kss-style">
+ <h2 class="kss-title kss-title--level-2">
+ <a class="kss-title__permalink" href="#kssref-navigation-tabs">
+ <span class="kss-title__ref">
+ 5.7
+ <span class="kss-title__permalink-hash">
+ navigation.tabs
+ </span>
+ </span>
+ Tabs
+ </a>
+ </h2>
+
+ <div class="kss-description">
+ <p>The primary and secondary tabs.</p>
+
+ </div>
+
+ </div>
+
+ <div class="kss-modifier__wrapper">
+ <div class="kss-modifier__heading kss-style">
+ Examples </div>
+
+ <div class="kss-modifier__default-name kss-style">
+ Default styling
+ </div>
+
+ <div class="kss-modifier__example">
+ <ul class="tabs [modifier class]">
+ <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
+ <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
+ <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
+</ul>
+
+ </div>
+
+ <div class="kss-modifier__name kss-style">
+ .tabs--secondary
+ </div>
+ <div class="kss-modifier__description kss-style">
+ Secondary tabs
+ </div>
+ <div class="kss-modifier__example">
+ <ul class="tabs tabs--secondary">
+ <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
+ <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
+ <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
+</ul>
+
+ </div>
+ </div>
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;tabs [modifier class]&quot;&gt;
+ &lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+ </div>
+
+ <div class="kss-source kss-style">
+ Source: <code>navigation/tabs/_tabs.scss</code>, line 4
+ </div>
+ </section>
+ <section id="kssref-navigation-tabs-stacked" class="kss-section kss-section--depth-3">
+ <div class="kss-style">
+ <h3 class="kss-title kss-title--level-3">
+ <a class="kss-title__permalink" href="#kssref-navigation-tabs-stacked">
+ <span class="kss-title__ref">
+ 5.7.1
+ <span class="kss-title__permalink-hash">
+ navigation.tabs.stacked
+ </span>
+ </span>
+ Tabs (stacked)
+ </a>
+ </h3>
+
+ <div class="kss-description">
+ <p>When the secondary tabs appear directly after the primary tabs, the styling
+is slightly different.</p>
+
+ </div>
+
+ </div>
+
+ <div class="kss-modifier__wrapper">
+ <div class="kss-modifier__heading kss-style">
+ Example </div>
+
+
+ <div class="kss-modifier__example">
+ <ul class="tabs ">
+ <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
+ <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
+ <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
+</ul>
+
+<ul class="tabs tabs--secondary">
+ <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
+ <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
+ <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
+</ul>
+
+ </div>
+
+ </div>
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;tabs &quot;&gt;
+ &lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class=&quot;tabs tabs--secondary&quot;&gt;
+ &lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
+ &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+ </div>
+
+ <div class="kss-source kss-style">
+ Source: <code>navigation/tabs/_tabs.scss</code>, line 14
+ </div>
+ </section>
+ </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script>
+ prettyPrint();
+ var spy = new ScrollSpy('#kss-node', {
+ nav: '.kss-nav__menu-child > li > a',
+ className: 'is-in-viewport'
+ });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/STARTERKIT/styleguide/section-sass.html b/STARTERKIT/styleguide/section-sass.html
index d5189a8..bca0f04 100644
--- a/STARTERKIT/styleguide/section-sass.html
+++ b/STARTERKIT/styleguide/section-sass.html
@@ -148,13 +148,18 @@
</a>
</li>
<li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Forms</span>
+ <a class="kss-nav__menu-link" href="section-components.html">
+ <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
</a>
</li>
<li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+ <a class="kss-nav__menu-link" href="section-navigation.html">
+ <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+ </a>
+ </li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-forms.html">
+ <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
</a>
</li>
</ul>
@@ -570,7 +575,7 @@ bit of the path in your Sass code like this:</p>
<pre><code class="lang-scss">content: image-url(is-quite/short.svg);
</code></pre>
<p>If you want to point at an image that is not in the components sub-directory
-of your sass directory, you can override the default $path-to-components by
+of your sass directory, you can override the default $subdirectory by
passing it in as the first parameter of <code>image-url()</code> like this:</p>
<pre><code class="lang-scss">content: image-url(base, grouping/blockquote.svg);
</code></pre>
@@ -581,21 +586,27 @@ passing it in as the first parameter of <code>image-url()</code> like this:</p>
<div class="kss-parameters__title">Parameters:</div>
<ul class="kss-parameters">
<li class="kss-parameters__item">
- <div class="kss-parameters__name"><code>$path-to-components</code></div>
+ <div class="kss-parameters__name"><code>$subdirectory</code></div>
<div class="kss-parameters__description">
- Optional. The relative path from the root sass directory to where your components usually lie. Defaults to <code>$image-url-path-to-components</code>.
+ Optional. The relative path from the root of your Sass source to the sub-directory where components usually lie.
+ <div class="kss-parameters__default-value">
+ Defaults to: <code>$image-url-subdirectory</code>
+ </div>
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name"><code>$path</code></div>
<div class="kss-parameters__description">
- Required. The path to the image relative to the components directory.
+ Required. The path to the image relative to the <code>$subdirectory</code>.
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name"><code>$path-to-source</code></div>
<div class="kss-parameters__description">
- Optional. The relative path from the css directory to the sass directory. Defaults to <code>$image-url-path-to-source</code>.
+ Optional. The relative path from the css build directory to the sass source directory.
+ <div class="kss-parameters__default-value">
+ Defaults to: <code>$image-url-path-to-source</code>
+ </div>
</div>
</li>
</ul>
@@ -629,7 +640,19 @@ work.</p>
</div>
- </div>
+ <div class="kss-parameters__title">Parameters:</div>
+ <ul class="kss-parameters">
+ <li class="kss-parameters__item">
+ <div class="kss-parameters__name"><code>$selector</code></div>
+ <div class="kss-parameters__description">
+ The RTL parent selector.
+ <div class="kss-parameters__default-value">
+ Defaults to: <code>&#039;[dir=&quot;rtl&quot;]&#039;</code>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
<div class="kss-source kss-style">
diff --git a/zen-internals/css/styles.css b/zen-internals/css/styles.css
index ffc0393..6735909 100644
--- a/zen-internals/css/styles.css
+++ b/zen-internals/css/styles.css
@@ -31,7 +31,6 @@ figcaption,
figure,
footer,
header,
-hgroup,
main,
menu,
nav,
@@ -45,7 +44,6 @@ canvas,
progress,
video {
display: inline-block;
- vertical-align: baseline;
}
audio:not([controls]) {
@@ -53,16 +51,19 @@ audio:not([controls]) {
height: 0;
}
-[hidden] {
- display: none;
+progress {
+ vertical-align: baseline;
}
-template {
+template,
+[hidden] {
display: none;
}
:link {
color: #0072b9;
+ background-color: transparent;
+ -webkit-text-decoration-skip: objects;
}
:visited {
@@ -71,12 +72,11 @@ template {
a:active {
color: #c00;
- background-color: transparent;
}
a:active,
a:hover {
- outline: 0;
+ outline-width: 0;
}
@media print {
@@ -140,7 +140,9 @@ h6 {
}
abbr[title] {
- border-bottom: 1px dotted;
+ border-bottom: 0;
+ text-decoration: underline;
+ text-decoration: underline dotted;
}
@media print {
@@ -151,7 +153,21 @@ abbr[title] {
b,
strong {
- font-weight: bold;
+ font-weight: inherit;
+}
+
+strong,
+b {
+ font-weight: bolder;
+}
+
+pre,
+code,
+kbd,
+samp,
+var {
+ font-family: Menlo, "DejaVu Sans Mono", "Ubuntu Mono", Courier, "Courier New", monospace, sans-serif;
+ font-size: 1em;
}
dfn {
@@ -159,7 +175,7 @@ dfn {
}
mark {
- background: #fd0;
+ background-color: #fd0;
color: #000;
}
@@ -175,14 +191,14 @@ sup {
vertical-align: baseline;
}
-sup {
- top: -.5em;
-}
-
sub {
bottom: -.25em;
}
+sup {
+ top: -.5em;
+}
+
.divider,
hr {
margin: 1.5rem 0;
@@ -194,6 +210,10 @@ hr {
margin-top: 1.5rem;
}
+blockquote {
+ margin: 1.5rem 2rem;
+}
+
dl,
menu,
ol,
@@ -212,7 +232,7 @@ dd {
margin: 0 0 0 32px;
}
-[dir='rtl'] dd {
+[dir="rtl"] dd {
margin: 0 32px 0 0;
}
@@ -222,16 +242,12 @@ ul {
padding: 0 0 0 32px;
}
-[dir='rtl'] menu, [dir='rtl']
-ol, [dir='rtl']
+[dir="rtl"] menu, [dir="rtl"]
+ol, [dir="rtl"]
ul {
padding: 0 32px 0 0;
}
-blockquote {
- margin: 1.5rem 2rem;
-}
-
figure {
margin: 1.5rem 0;
}
@@ -239,6 +255,7 @@ figure {
hr {
box-sizing: content-box;
height: 0;
+ overflow: visible;
}
p,
@@ -246,20 +263,8 @@ pre {
margin: 1.5rem 0;
}
-code,
-kbd,
-samp,
-var, pre {
- font-family: Menlo, "DejaVu Sans Mono", "Ubuntu Mono", Courier, "Courier New", monospace, sans-serif;
- font-size: 1em;
-}
-
-pre {
- overflow: auto;
-}
-
img {
- border: 0;
+ border-style: none;
}
img,
@@ -277,8 +282,6 @@ button,
[type='button'],
[type='reset'],
[type='submit'] {
- -moz-appearance: button;
- -webkit-appearance: button;
display: inline-block;
padding: 2px 6px;
line-height: inherit;
@@ -287,6 +290,23 @@ button,
color: #000;
}
+.button::-moz-focus-inner,
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+.button:-moz-focusring,
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
.button:hover, .button:focus, .button:active,
button:hover,
[type='button']:hover,
@@ -336,7 +356,6 @@ select,
textarea {
box-sizing: border-box;
max-width: 100%;
- color: inherit;
font: inherit;
margin: 0;
}
@@ -350,37 +369,43 @@ select {
text-transform: none;
}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-
-html input[type='button'],
+button,
+html [type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
+input {
+ overflow: visible;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
height: auto;
}
-input[type='search'] {
+[type='search'] {
-webkit-appearance: textfield;
+ outline-offset: -2px;
}
-input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
-input[type='text'], input[type='search'], input[type='tel'], input[type='url'], input[type='email'], input[type='password'], input[type='date'], input[type='time'], input[type='number'], textarea {
- line-height: inherit;
+::-webkit-input-placeholder {
+ color: inherit;
+ opacity: .54;
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
}
-input[type='checkbox'],
-input[type='radio'] {
+[type='checkbox'],
+[type='radio'] {
box-sizing: border-box;
padding: 0;
}
@@ -392,7 +417,11 @@ fieldset {
}
legend {
- border: 0;
+ box-sizing: border-box;
+ display: table;
+ max-width: 100%;
+ white-space: normal;
+ color: inherit;
margin-left: -5px;
padding: 0 5px;
}
@@ -682,55 +711,6 @@ th {
}
}
-.autocomplete,
-.form-autocomplete {
- background-image: url(../../STARTERKIT/sass/components/autocomplete/throbber-inactive.png);
- background-position: 100% center;
- background-repeat: no-repeat;
-}
-
-[dir='rtl'] .autocomplete,
-[dir='rtl'] .form-autocomplete {
- background-position: 0% center;
-}
-
-.autocomplete__list-wrapper,
-#autocomplete {
- border: 1px solid;
- overflow: hidden;
- position: absolute;
- z-index: 100;
-}
-
-.autocomplete__list,
-#autocomplete ul {
- list-style: none;
- list-style-image: none;
- margin: 0;
- padding: 0;
-}
-
-.autocomplete__list-item,
-#autocomplete li {
- background: #fff;
- color: #000;
- cursor: default;
- white-space: pre;
-}
-
-.autocomplete__list-item.is-selected, .autocomplete__list-item--is-selected,
-#autocomplete li.is-selected,
-#autocomplete .selected {
- background: #0072b9;
- color: #fff;
-}
-
-.autocomplete.is-throbbing, .autocomplete--is-throbbing,
-.is-throbbing.form-autocomplete,
-.form-autocomplete.throbbing {
- background-image: url(../../STARTERKIT/sass/components/autocomplete/throbber-active.gif);
-}
-
.box {
margin-bottom: 1.5rem;
border: 5px solid #cccccc;
@@ -749,51 +729,6 @@ th {
border-color: #0072b9;
}
-.visually-hidden,
-.visually-hidden--focusable,
-.element-focusable,
-.element-invisible,
-.breadcrumb__title,
-.main-navigation .block-menu .block__title,
-.main-navigation .block-menu-block .block__title {
- position: absolute !important;
- height: 1px;
- width: 1px;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- word-wrap: normal;
-}
-
-.visually-hidden--off,
-.visually-hidden--focusable:active,
-.visually-hidden--focusable:focus,
-.element-focusable:active,
-.element-focusable:focus {
- position: static !important;
- clip: auto;
- height: auto;
- width: auto;
- overflow: visible;
-}
-
-@media print {
- .breadcrumb {
- display: none;
- }
-}
-
-.breadcrumb__list {
- margin: 0;
- padding: 0;
-}
-
-.breadcrumb__item {
- display: inline;
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
.clearfix:before,
.header:before,
.tabs:before {
@@ -809,68 +744,6 @@ th {
clear: both;
}
-.collapsible-fieldset,
-.collapsible {
- position: relative;
-}
-
-.collapsible-fieldset__legend,
-.collapsible .fieldset-legend {
- display: block;
- padding-left: 15px;
- background-image: url(../../STARTERKIT/sass/components/collapsible-fieldset/expanded.svg);
- background-position: 4px 50%;
- background-repeat: no-repeat;
-}
-
-[dir='rtl'] .collapsible-fieldset__legend,
-[dir='rtl'] .collapsible .fieldset-legend,
-.collapsible [dir='rtl'] .fieldset-legend {
- padding-left: 0;
- padding-right: 15px;
- background-position: right 4px top 50%;
-}
-
-.collapsible-fieldset__summary,
-.collapsible .fieldset-legend .summary {
- color: #999999;
- font-size: .9em;
- margin-left: .5em;
-}
-
-.collapsible-fieldset.is-collapsed, .collapsible-fieldset--is-collapsed,
-.is-collapsed.collapsible,
-.collapsible.collapsed {
- border-bottom-width: 0;
- border-left-width: 0;
- border-right-width: 0;
- height: 1em;
-}
-
-.collapsible-fieldset.is-collapsed .collapsible-fieldset__wrapper, .collapsible-fieldset--is-collapsed__wrapper, .is-collapsed.collapsible .collapsible-fieldset__wrapper,
-.collapsible.collapsed .fieldset-wrapper {
- display: none;
-}
-
-.collapsible-fieldset.is-collapsed .collapsible-fieldset__legend, .collapsible-fieldset--is-collapsed__legend, .is-collapsed.collapsible .collapsible-fieldset__legend,
-.collapsible.collapsed .fieldset-legend,
-.collapsible-fieldset.is-collapsed .collapsible .fieldset-legend,
-.collapsible .collapsible-fieldset.is-collapsed .fieldset-legend,
-.is-collapsed.collapsible .fieldset-legend {
- background-image: url(../../STARTERKIT/sass/components/collapsible-fieldset/collapsed.svg);
- background-position: 4px 50%;
-}
-
-[dir='rtl'] .collapsible-fieldset.is-collapsed .collapsible-fieldset__legend, [dir='rtl'] .collapsible-fieldset--is-collapsed__legend, [dir='rtl'] .is-collapsed.collapsible .collapsible-fieldset__legend,
-[dir='rtl'] .collapsible.collapsed .fieldset-legend,
-.collapsible.collapsed [dir='rtl'] .fieldset-legend,
-[dir='rtl'] .collapsible-fieldset.is-collapsed .collapsible .fieldset-legend,
-.collapsible [dir='rtl'] .collapsible-fieldset.is-collapsed .fieldset-legend,
-[dir='rtl'] .is-collapsed.collapsible .fieldset-legend {
- background-image: url(../../STARTERKIT/sass/components/collapsible-fieldset/collapsed-rtl.svg);
- background-position: right 4px top 50%;
-}
-
.comment__section,
.comments {
margin: 1.5rem 0;
@@ -895,175 +768,19 @@ th {
margin-left: 32px;
}
-[dir='rtl'] .comment--nested,
-[dir='rtl'] .indented {
+[dir="rtl"] .comment--nested,
+[dir="rtl"] .indented {
margin-left: 0;
margin-right: 32px;
}
-.form-item {
- margin: 1.5rem 0;
-}
-
-.form-item__required,
-.form-required {
- color: #c00;
-}
-
-.form-item__description,
-.form-item .description {
- font-size: 0.875rem;
-}
-
-.form-item--inline div,
-.form-item--inline label, .container-inline .form-item div, .container-inline .form-item label {
- display: inline;
-}
-
-.form-item--inline__exception,
-.container-inline .fieldset-wrapper {
- display: block;
-}
-
-.form-item--tight,
-.form-item--radio,
-.form-type-radio,
-.form-type-checkbox,
-.password-parent,
-.confirm-parent,
-table .form-item {
- margin: 0;
-}
-
-.form-item--radio .form-item__label, .form-item--radio__label, .form-type-radio .form-item__label,
-.form-type-checkbox .form-item__label,
-label.option {
- display: inline;
- font-weight: normal;
-}
-
-.form-item--radio .form-item__description, .form-item--radio__description, .form-type-radio .form-item__description,
-.form-type-checkbox .form-item__description,
-.form-type-radio .description,
-.form-type-checkbox .description,
-.form-item--radio .form-item .description,
-.form-item .form-item--radio .description,
-.form-type-radio .form-item .description,
-.form-item .form-type-radio .description,
-.form-type-checkbox .form-item .description,
-.form-item
-.form-type-checkbox .description {
- margin-left: 1.4em;
-}
-
-.form-item.is-error .form-item__widget, .form-item--is-error__widget,
-.form-item.is-error input,
-.form-item.is-error textarea,
-.form-item.is-error select,
-.form-item--is-error input,
-.form-item--is-error textarea,
-.form-item--is-error select,
-.form-item input.error,
-.form-item textarea.error,
-.form-item select.error {
- border: 1px solid #c00;
-}
-
-.form-table__sticky-header,
-.sticky-header {
- position: fixed;
- visibility: hidden;
- margin-top: 0;
- background-color: #fff;
-}
-
-.form-table__sticky-header.is-sticky, .form-table__sticky-header--is-sticky,
-.is-sticky.sticky-header {
- visibility: visible;
-}
-
-.form-table__header,
-.form-table th,
-form table th {
- border-bottom: 3px solid #cccccc;
- padding-right: 1em;
- text-align: left;
-}
-
-[dir='rtl'] .form-table__header,
-[dir='rtl'] .form-table th,
-.form-table [dir='rtl'] th,
-[dir='rtl'] form table th,
-form table [dir='rtl'] th {
- text-align: right;
- padding-left: 1em;
- padding-right: 0;
-}
-
-.form-table__body,
-.form-table tbody,
-form table tbody {
- border-top: 1px solid #cccccc;
-}
-
-.form-table__row,
-.form-table tbody tr,
-form table tbody tr {
- padding: .1em .6em;
- border-bottom: 1px solid #cccccc;
- background-color: #eeeeee;
-}
-
-.form-table__row:nth-child(even),
-.form-table tbody tr:nth-child(even),
-form table tbody tr:nth-child(even) {
- background-color: #fff;
-}
-
-.form-table__row.is-active, .form-table__row--is-active,
-.form-table tbody tr.is-active,
-form table tbody tr.is-active,
-td.active {
- background-color: #dddddd;
-}
-
-.form-table__row.is-disabled, .form-table__row--is-disabled,
-.form-table tbody tr.is-disabled,
-form table tbody tr.is-disabled,
-td.menu-disabled {
- background: #cccccc;
-}
-
-.form-table__row.is-selected, .form-table__row--is-selected,
-.form-table tbody tr.is-selected,
-form table tbody tr.is-selected,
-tr.selected td {
- background: #fffdf0;
-}
-
-.form-table__list,
-.form-table ul,
-form table ul {
- margin: 0;
-}
-
-.form-table__narrow-column,
-.form-table th.form-table__narrow-column,
-form table th.form-table__narrow-column,
-td .checkbox,
-th .checkbox {
- width: -moz-min-content;
- width: -webkit-min-content;
- text-align: center;
-}
-
.header__logo {
float: left;
margin: 0 10px 0 0;
padding: 0;
}
-[dir='rtl'] .header__logo {
+[dir="rtl"] .header__logo {
float: right;
margin: 0 0 0 10px;
}
@@ -1097,7 +814,7 @@ th .checkbox {
float: right;
}
-[dir='rtl'] .header__secondary-menu {
+[dir="rtl"] .header__secondary-menu {
float: left;
}
@@ -1131,9 +848,9 @@ html.js .js-hide {
padding: 0 1em 0 0;
}
-[dir='rtl'] .inline-links__item,
-[dir='rtl'] .inline.links li,
-.inline.links [dir='rtl'] li {
+[dir="rtl"] .inline-links__item,
+[dir="rtl"] .inline.links li,
+.inline.links [dir="rtl"] li {
display: inline-block;
padding: 0 0 0 1em;
}
@@ -1145,10 +862,10 @@ span.field-label {
margin-right: 10px;
}
-[dir='rtl'] .inline-sibling,
-[dir='rtl'] .field-label-inline .field-label,
-.field-label-inline [dir='rtl'] .field-label,
-[dir='rtl'] span.field-label {
+[dir="rtl"] .inline-sibling,
+[dir="rtl"] .field-label-inline .field-label,
+.field-label-inline [dir="rtl"] .field-label,
+[dir="rtl"] span.field-label {
margin-right: 0;
margin-left: 10px;
}
@@ -1178,8 +895,8 @@ span.field-label {
border: 1px solid #0072b9;
}
-[dir='rtl'] .messages,
-[dir='rtl'] .messages--status {
+[dir="rtl"] .messages,
+[dir="rtl"] .messages--status {
padding: 10px 44px 10px 10px;
background-position: 99% 8px;
}
@@ -1194,7 +911,7 @@ span.field-label {
line-height: 1;
}
-[dir='rtl'] .messages__icon {
+[dir="rtl"] .messages__icon {
left: auto;
right: 0;
}
@@ -1260,55 +977,151 @@ span.field-label {
fill: #c00;
}
+@media print {
+ .print-none,
+ .toolbar,
+ .action-links,
+ .links,
+ .book-navigation,
+ .forum-topic-navigation,
+ .feed-icons {
+ display: none;
+ }
+}
+
+.responsive-video,
+.media-youtube-video,
+.media-vimeo-preview-wrapper {
+ position: relative;
+ padding-bottom: 56.25%;
+ padding-top: 25px;
+ height: 0;
+}
+
+.responsive-video__embed,
+.responsive-video iframe,
+.media-youtube-video iframe,
+.media-vimeo-preview-wrapper iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.responsive-video--4-3 {
+ padding-bottom: 75%;
+}
+
+.visually-hidden,
+.element-invisible,
+.element-focusable,
+.breadcrumb__title,
+.main-navigation .block-menu .block__title,
+.main-navigation .block-menu-block .block__title {
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ word-wrap: normal;
+}
+
+.visually-hidden--off,
+.visually-hidden--focusable:active,
+.visually-hidden--focusable:focus,
+.element-focusable:active,
+.element-focusable:focus {
+ position: static !important;
+ clip: auto;
+ height: auto;
+ width: auto;
+ overflow: visible;
+}
+
+.watermark {
+ font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
+ display: block;
+ height: 0;
+ overflow: visible;
+ background-color: transparent;
+ color: #eeeeee;
+ font-size: 75px;
+ line-height: 1;
+ text-align: center;
+ text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
+ word-wrap: break-word;
+}
+
+@media print {
+ .breadcrumb {
+ display: none;
+ }
+}
+
+.breadcrumb__list {
+ margin: 0;
+ padding: 0;
+}
+
+.breadcrumb__item {
+ display: inline;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
.more-link,
.more-help-link {
text-align: right;
}
-[dir='rtl'] .more-link,
-[dir='rtl'] .more-help-link {
+[dir="rtl"] .more-link,
+[dir="rtl"] .more-help-link {
text-align: left;
}
.more-link__help-icon,
.more-help-link a {
padding: 1px 0 1px 20px;
- background-image: url(../../STARTERKIT/sass/components/more-link/more-link__help-icon.svg);
+ background-image: url(../../STARTERKIT/sass/navigation/more-link/more-link__help-icon.svg);
background-position: 0 50%;
background-repeat: no-repeat;
}
-[dir='rtl'] .more-link__help-icon,
-[dir='rtl'] .more-help-link a,
-.more-help-link [dir='rtl'] a {
+[dir="rtl"] .more-link__help-icon,
+[dir="rtl"] .more-help-link a,
+.more-help-link [dir="rtl"] a {
padding: 1px 20px 1px 0;
background-position: 100% 50%;
}
.nav-menu__item,
.menu__item {
- list-style-image: url(../../STARTERKIT/sass/components/nav-menu/leaf.svg);
+ list-style-image: url(../../STARTERKIT/sass/navigation/nav-menu/leaf.svg);
list-style-type: square;
}
.nav-menu__item.is-expanded, .nav-menu__item--is-expanded,
.is-expanded.menu__item,
.menu__item.is-expanded {
- list-style-image: url(../../STARTERKIT/sass/components/nav-menu/expanded.svg);
+ list-style-image: url(../../STARTERKIT/sass/navigation/nav-menu/expanded.svg);
list-style-type: circle;
}
.nav-menu__item.is-collapsed, .nav-menu__item--is-collapsed,
.is-collapsed.menu__item,
.menu__item.is-collapsed {
- list-style-image: url(../../STARTERKIT/sass/components/nav-menu/collapsed.svg);
+ list-style-image: url(../../STARTERKIT/sass/navigation/nav-menu/collapsed.svg);
list-style-type: disc;
}
-[dir='rtl'] .nav-menu__item.is-collapsed, [dir='rtl'] .nav-menu__item--is-collapsed,
-[dir='rtl'] .is-collapsed.menu__item,
-[dir='rtl'] .menu__item.is-collapsed {
- list-style-image: url(../../STARTERKIT/sass/components/nav-menu/collapsed-rtl.svg);
+[dir="rtl"] .nav-menu__item.is-collapsed, [dir="rtl"] .nav-menu__item--is-collapsed,
+[dir="rtl"] .is-collapsed.menu__item,
+[dir="rtl"] .menu__item.is-collapsed {
+ list-style-image: url(../../STARTERKIT/sass/navigation/nav-menu/collapsed-rtl.svg);
}
.nav-menu__link.is-active, .nav-menu__link--is-active,
@@ -1324,12 +1137,12 @@ span.field-label {
text-align: left;
}
-[dir='rtl'] .navbar,
-[dir='rtl'] .main-navigation .links,
-.main-navigation [dir='rtl'] .links,
-[dir='rtl']
+[dir="rtl"] .navbar,
+[dir="rtl"] .main-navigation .links,
+.main-navigation [dir="rtl"] .links,
+[dir="rtl"]
.main-navigation .menu,
-.main-navigation [dir='rtl'] .menu {
+.main-navigation [dir="rtl"] .menu {
text-align: right;
}
@@ -1342,10 +1155,10 @@ span.field-label {
list-style-image: none;
}
-[dir='rtl'] .navbar__item, [dir='rtl']
-.navbar li, [dir='rtl'] .main-navigation .links li, .main-navigation [dir='rtl'] .links li, [dir='rtl']
+[dir="rtl"] .navbar__item, [dir="rtl"]
+.navbar li, [dir="rtl"] .main-navigation .links li, .main-navigation [dir="rtl"] .links li, [dir="rtl"]
.main-navigation .menu li,
-.main-navigation [dir='rtl'] .menu li {
+.main-navigation [dir="rtl"] .menu li {
float: right;
padding: 0 0 0 10px;
}
@@ -1382,18 +1195,407 @@ span.field-label {
font-weight: bold;
}
+.skip-link {
+ display: block;
+ padding: 2px 0 3px;
+ text-align: center;
+}
+
+.skip-link:link, .skip-link:visited {
+ background-color: #666666;
+ color: #fff;
+}
+
+.skip-link__wrapper {
+ margin: 0;
+}
+
@media print {
- .print-none,
- .toolbar,
- .action-links,
- .links,
- .book-navigation,
- .forum-topic-navigation,
- .feed-icons {
+ .skip-link__wrapper {
display: none;
}
}
+.tabs {
+ margin: 1.125rem 0 0;
+ line-height: 1.875rem;
+ border-bottom: 1px solid #cccccc \0/ie;
+ background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
+ background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
+ padding: 0 2px;
+ list-style: none;
+ white-space: nowrap;
+}
+
+@media print {
+ .tabs {
+ display: none;
+ }
+}
+
+.tabs__tab {
+ float: left;
+ margin: 0 3px;
+ border: 1px solid #cccccc;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ border-bottom-color: transparent;
+ border-bottom: 0 \0/ie;
+ overflow: hidden;
+ background: #dddddd;
+}
+
+[dir="rtl"] .tabs__tab {
+ float: right;
+}
+
+.tabs__tab.is-active {
+ border-bottom-color: #fff;
+}
+
+.tabs__tab-link {
+ padding: 0 1.5rem;
+ display: block;
+ text-decoration: none;
+ -webkit-transition: color .3s, background .3s, border .3s;
+ transition: color .3s, background .3s, border .3s;
+ text-shadow: #fff 0 1px 0;
+ color: #000;
+ background: #dddddd;
+ letter-spacing: 1px;
+}
+
+.tabs__tab-link:focus, .tabs__tab-link:hover {
+ background: #eaeaea;
+}
+
+.tabs__tab-link:active, .tabs__tab-link.is-active, .tabs__tab-link--is-active {
+ background: #fff;
+ text-shadow: none;
+}
+
+.tabs--off,
+.views-displays .secondary {
+ margin: 0;
+ border-bottom: 0;
+ padding: 0;
+ background-image: none;
+}
+
+.tabs--secondary {
+ margin-top: 1.5rem;
+ font-size: 0.875rem;
+ background-image: none;
+}
+
+.tabs + .tabs--secondary {
+ margin-top: 0;
+ background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
+ background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
+}
+
+.tabs--secondary .tabs__tab {
+ margin: 0.5625rem 0.1875rem;
+ border: 0;
+ background: transparent;
+}
+
+[dir="rtl"] .tabs--secondary .tabs__tab {
+ float: right;
+}
+
+.tabs--secondary .tabs__tab.is-active {
+ border-bottom-color: transparent;
+}
+
+.tabs--secondary .tabs__tab-link {
+ border: 1px solid #cccccc;
+ border-radius: 24px;
+ color: #666666;
+ background: #f1f1f1;
+ letter-spacing: normal;
+}
+
+.tabs--secondary .tabs__tab-link:focus, .tabs--secondary .tabs__tab-link:hover {
+ color: #333333;
+ background: #dddddd;
+ border-color: #999999;
+}
+
+.tabs--secondary .tabs__tab-link:active, .tabs--secondary .tabs__tab-link.is-active, .tabs--secondary .tabs__tab-link--is-active {
+ color: white;
+ text-shadow: #333333 0 1px 0;
+ background: #666666;
+ border-color: black;
+}
+
+.autocomplete,
+.form-autocomplete {
+ background-image: url(../../STARTERKIT/sass/forms/autocomplete/throbber-inactive.png);
+ background-position: 100% center;
+ background-repeat: no-repeat;
+}
+
+[dir="rtl"] .autocomplete,
+[dir="rtl"] .form-autocomplete {
+ background-position: 0% center;
+}
+
+.autocomplete__list-wrapper,
+#autocomplete {
+ border: 1px solid;
+ overflow: hidden;
+ position: absolute;
+ z-index: 100;
+}
+
+.autocomplete__list,
+#autocomplete ul {
+ list-style: none;
+ list-style-image: none;
+ margin: 0;
+ padding: 0;
+}
+
+.autocomplete__list-item,
+#autocomplete li {
+ background: #fff;
+ color: #000;
+ cursor: default;
+ white-space: pre;
+}
+
+.autocomplete__list-item.is-selected, .autocomplete__list-item--is-selected,
+#autocomplete li.is-selected,
+#autocomplete .selected {
+ background: #0072b9;
+ color: #fff;
+}
+
+.autocomplete.is-throbbing, .autocomplete--is-throbbing,
+.is-throbbing.form-autocomplete,
+.form-autocomplete.throbbing {
+ background-image: url(../../STARTERKIT/sass/forms/autocomplete/throbber-active.gif);
+}
+
+.collapsible-fieldset,
+.collapsible {
+ position: relative;
+}
+
+.collapsible-fieldset__legend,
+.collapsible .fieldset-legend {
+ display: block;
+ padding-left: 15px;
+ background-image: url(../../STARTERKIT/sass/forms/collapsible-fieldset/expanded.svg);
+ background-position: 4px 50%;
+ background-repeat: no-repeat;
+}
+
+[dir="rtl"] .collapsible-fieldset__legend,
+[dir="rtl"] .collapsible .fieldset-legend,
+.collapsible [dir="rtl"] .fieldset-legend {
+ padding-left: 0;
+ padding-right: 15px;
+ background-position: right 4px top 50%;
+}
+
+.collapsible-fieldset__summary,
+.collapsible .fieldset-legend .summary {
+ color: #999999;
+ font-size: .9em;
+ margin-left: .5em;
+}
+
+.collapsible-fieldset.is-collapsed, .collapsible-fieldset--is-collapsed,
+.is-collapsed.collapsible,
+.collapsible.collapsed {
+ border-bottom-width: 0;
+ border-left-width: 0;
+ border-right-width: 0;
+ height: 1em;
+}
+
+.collapsible-fieldset.is-collapsed .collapsible-fieldset__wrapper, .collapsible-fieldset--is-collapsed__wrapper, .is-collapsed.collapsible .collapsible-fieldset__wrapper,
+.collapsible.collapsed .fieldset-wrapper {
+ display: none;
+}
+
+.collapsible-fieldset.is-collapsed .collapsible-fieldset__legend, .collapsible-fieldset--is-collapsed__legend, .is-collapsed.collapsible .collapsible-fieldset__legend,
+.collapsible.collapsed .fieldset-legend,
+.collapsible-fieldset.is-collapsed .collapsible .fieldset-legend,
+.collapsible .collapsible-fieldset.is-collapsed .fieldset-legend,
+.is-collapsed.collapsible .fieldset-legend {
+ background-image: url(../../STARTERKIT/sass/forms/collapsible-fieldset/collapsed.svg);
+ background-position: 4px 50%;
+}
+
+[dir="rtl"] .collapsible-fieldset.is-collapsed .collapsible-fieldset__legend, [dir="rtl"] .collapsible-fieldset--is-collapsed__legend, [dir="rtl"] .is-collapsed.collapsible .collapsible-fieldset__legend,
+[dir="rtl"] .collapsible.collapsed .fieldset-legend,
+.collapsible.collapsed [dir="rtl"] .fieldset-legend,
+[dir="rtl"] .collapsible-fieldset.is-collapsed .collapsible .fieldset-legend,
+.collapsible [dir="rtl"] .collapsible-fieldset.is-collapsed .fieldset-legend,
+[dir="rtl"] .is-collapsed.collapsible .fieldset-legend {
+ background-image: url(../../STARTERKIT/sass/forms/collapsible-fieldset/collapsed-rtl.svg);
+ background-position: right 4px top 50%;
+}
+
+.form-item {
+ margin: 1.5rem 0;
+}
+
+.form-item__required,
+.form-required {
+ color: #c00;
+}
+
+.form-item__description,
+.form-item .description {
+ font-size: 0.875rem;
+}
+
+.form-item--inline div,
+.form-item--inline label, .container-inline .form-item div, .container-inline .form-item label {
+ display: inline;
+}
+
+.form-item--inline__exception,
+.container-inline .fieldset-wrapper {
+ display: block;
+}
+
+.form-item--tight,
+.form-item--radio,
+.form-type-radio,
+.form-type-checkbox,
+.password-parent,
+.confirm-parent,
+table .form-item {
+ margin: 0;
+}
+
+.form-item--radio .form-item__label, .form-item--radio__label, .form-type-radio .form-item__label,
+.form-type-checkbox .form-item__label,
+label.option {
+ display: inline;
+ font-weight: normal;
+}
+
+.form-item--radio .form-item__description, .form-item--radio__description, .form-type-radio .form-item__description,
+.form-type-checkbox .form-item__description,
+.form-type-radio .description,
+.form-type-checkbox .description,
+.form-item--radio .form-item .description,
+.form-item .form-item--radio .description,
+.form-type-radio .form-item .description,
+.form-item .form-type-radio .description,
+.form-type-checkbox .form-item .description,
+.form-item
+.form-type-checkbox .description {
+ margin-left: 1.4em;
+}
+
+.form-item.is-error .form-item__widget, .form-item--is-error__widget,
+.form-item.is-error input,
+.form-item.is-error textarea,
+.form-item.is-error select,
+.form-item--is-error input,
+.form-item--is-error textarea,
+.form-item--is-error select,
+.form-item input.error,
+.form-item textarea.error,
+.form-item select.error {
+ border: 1px solid #c00;
+}
+
+.form-table__sticky-header,
+.sticky-header {
+ position: fixed;
+ visibility: hidden;
+ margin-top: 0;
+ background-color: #fff;
+}
+
+.form-table__sticky-header.is-sticky, .form-table__sticky-header--is-sticky,
+.is-sticky.sticky-header {
+ visibility: visible;
+}
+
+.form-table__header,
+.form-table th,
+form table th {
+ border-bottom: 3px solid #cccccc;
+ padding-right: 1em;
+ text-align: left;
+}
+
+[dir="rtl"] .form-table__header,
+[dir="rtl"] .form-table th,
+.form-table [dir="rtl"] th,
+[dir="rtl"] form table th,
+form table [dir="rtl"] th {
+ text-align: right;
+ padding-left: 1em;
+ padding-right: 0;
+}
+
+.form-table__body,
+.form-table tbody,
+form table tbody {
+ border-top: 1px solid #cccccc;
+}
+
+.form-table__row,
+.form-table tbody tr,
+form table tbody tr {
+ padding: .1em .6em;
+ border-bottom: 1px solid #cccccc;
+ background-color: #eeeeee;
+}
+
+.form-table__row:nth-child(even),
+.form-table tbody tr:nth-child(even),
+form table tbody tr:nth-child(even) {
+ background-color: #fff;
+}
+
+.form-table__row.is-active, .form-table__row--is-active,
+.form-table tbody tr.is-active,
+form table tbody tr.is-active,
+td.active {
+ background-color: #dddddd;
+}
+
+.form-table__row.is-disabled, .form-table__row--is-disabled,
+.form-table tbody tr.is-disabled,
+form table tbody tr.is-disabled,
+td.menu-disabled {
+ background: #cccccc;
+}
+
+.form-table__row.is-selected, .form-table__row--is-selected,
+.form-table tbody tr.is-selected,
+form table tbody tr.is-selected,
+tr.selected td {
+ background: #fffdf0;
+}
+
+.form-table__list,
+.form-table ul,
+form table ul {
+ margin: 0;
+}
+
+.form-table__narrow-column,
+.form-table th.form-table__narrow-column,
+form table th.form-table__narrow-column,
+td .checkbox,
+th .checkbox {
+ width: -moz-min-content;
+ width: -webkit-min-content;
+ text-align: center;
+}
+
.progress-bar,
.progress {
font-weight: bold;
@@ -1411,7 +1613,7 @@ span.field-label {
.progress .filled {
height: 1.5em;
width: 5px;
- background: #0072b9 url(../../STARTERKIT/sass/components/progress-bar/progress-bar.gif) repeat 0 0;
+ background: #0072b9 url(../../STARTERKIT/sass/forms/progress-bar/progress-bar.gif) repeat 0 0;
}
.progress-bar__percentage,
@@ -1419,9 +1621,9 @@ span.field-label {
float: right;
}
-[dir='rtl'] .progress-bar__percentage,
-[dir='rtl'] .progress .percentage,
-.progress [dir='rtl'] .percentage {
+[dir="rtl"] .progress-bar__percentage,
+[dir="rtl"] .progress .percentage,
+.progress [dir="rtl"] .percentage {
float: left;
}
@@ -1431,8 +1633,8 @@ span.field-label {
display: inline-block;
}
-[dir='rtl'] .progress-bar--inline,
-[dir='rtl'] .ajax-progress-bar {
+[dir="rtl"] .progress-bar--inline,
+[dir="rtl"] .ajax-progress-bar {
float: right;
}
@@ -1441,23 +1643,23 @@ span.field-label {
display: inline-block;
}
-[dir='rtl'] .progress-throbber,
-[dir='rtl'] .ajax-progress {
+[dir="rtl"] .progress-throbber,
+[dir="rtl"] .ajax-progress {
float: right;
}
.progress-throbber__widget,
.ajax-progress .throbber {
- background: url(../../STARTERKIT/sass/components/progress-throbber/progress-throbber.gif) no-repeat 0 -18px transparent;
+ background: url(../../STARTERKIT/sass/forms/progress-throbber/progress-throbber.gif) no-repeat 0 -18px transparent;
float: left;
height: 15px;
margin: 2px;
width: 15px;
}
-[dir='rtl'] .progress-throbber__widget,
-[dir='rtl'] .ajax-progress .throbber,
-.ajax-progress [dir='rtl'] .throbber {
+[dir="rtl"] .progress-throbber__widget,
+[dir="rtl"] .ajax-progress .throbber,
+.ajax-progress [dir="rtl"] .throbber {
float: right;
}
@@ -1479,7 +1681,7 @@ tr .ajax-progress .throbber {
.resizable-textarea__grippie,
.resizable-textarea .grippie {
- background: url(../../STARTERKIT/sass/components/resizable-textarea/grippie.png) no-repeat center 2px #eeeeee;
+ background: url(../../STARTERKIT/sass/forms/resizable-textarea/grippie.png) no-repeat center 2px #eeeeee;
border: 1px solid #cccccc;
border-top-width: 0;
cursor: s-resize;
@@ -1487,51 +1689,6 @@ tr .ajax-progress .throbber {
overflow: hidden;
}
-.responsive-video,
-.media-youtube-video,
-.media-vimeo-preview-wrapper {
- position: relative;
- padding-bottom: 56.25%;
- padding-top: 25px;
- height: 0;
-}
-
-.responsive-video__embed,
-.responsive-video iframe,
-.media-youtube-video iframe,
-.media-vimeo-preview-wrapper iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-
-.responsive-video--4-3 {
- padding-bottom: 75%;
-}
-
-.skip-link {
- display: block;
- padding: 2px 0 3px;
- text-align: center;
-}
-
-.skip-link:link, .skip-link:visited {
- background-color: #666666;
- color: #fff;
-}
-
-.skip-link__wrapper {
- margin: 0;
-}
-
-@media print {
- .skip-link__wrapper {
- display: none;
- }
-}
-
.table-drag__wrapper,
body.drag {
cursor: move;
@@ -1558,8 +1715,8 @@ tr.drag-previous {
font-size: 12px;
}
-[dir='rtl'] .table-drag__handle,
-[dir='rtl'] .tabledrag-handle {
+[dir="rtl"] .table-drag__handle,
+[dir="rtl"] .tabledrag-handle {
float: right;
margin-right: -1em;
margin-left: 0;
@@ -1574,7 +1731,7 @@ tr.drag-previous {
.table-drag__handle-icon,
.tabledrag-handle .handle {
box-sizing: content-box;
- background: url(../../STARTERKIT/sass/components/table-drag/handle-icon.png) no-repeat 6px 9px;
+ background: url(../../STARTERKIT/sass/forms/table-drag/handle-icon.png) no-repeat 6px 9px;
height: 13px;
margin: -.4em .5em;
padding: .42em .5em;
@@ -1594,8 +1751,8 @@ tr.drag-previous {
text-align: right;
}
-[dir='rtl'] .table-drag__toggle-weight-wrapper,
-[dir='rtl'] .tabledrag-toggle-weight-wrapper {
+[dir="rtl"] .table-drag__toggle-weight-wrapper,
+[dir="rtl"] .tabledrag-toggle-weight-wrapper {
text-align: left;
}
@@ -1613,8 +1770,8 @@ tr.drag-previous {
width: 20px;
}
-[dir='rtl'] .table-drag__indentation,
-[dir='rtl'] .indentation {
+[dir="rtl"] .table-drag__indentation,
+[dir="rtl"] .indentation {
float: right;
margin: -.4em -.4em -.4em .2em;
padding: .42em .6em .42em 0;
@@ -1626,153 +1783,24 @@ tr.drag-previous {
.table-drag__tree-child-horizontal,
.tree-child-horizontal,
.tree-child {
- background: url(../../STARTERKIT/sass/components/table-drag/tree-child.png) no-repeat 11px center;
+ background: url(../../STARTERKIT/sass/forms/table-drag/tree-child.png) no-repeat 11px center;
}
-[dir='rtl'] .table-drag__tree-child,
-[dir='rtl'] .table-drag__tree-child-last,
-[dir='rtl'] .tree-child-last,
-[dir='rtl'] .table-drag__tree-child-horizontal,
-[dir='rtl'] .tree-child-horizontal,
-[dir='rtl'] .tree-child {
+[dir="rtl"] .table-drag__tree-child,
+[dir="rtl"] .table-drag__tree-child-last,
+[dir="rtl"] .tree-child-last,
+[dir="rtl"] .table-drag__tree-child-horizontal,
+[dir="rtl"] .tree-child-horizontal,
+[dir="rtl"] .tree-child {
background-position: -65px center;
}
.table-drag__tree-child-last,
.tree-child-last {
- background-image: url(../../STARTERKIT/sass/components/table-drag/tree-child-last.png);
+ background-image: url(../../STARTERKIT/sass/forms/table-drag/tree-child-last.png);
}
.table-drag__tree-child-horizontal,
.tree-child-horizontal {
background-position: -11px center;
}
-
-.tabs {
- margin: 1.125rem 0 0;
- line-height: 1.875rem;
- border-bottom: 1px solid #cccccc \0/ie;
- background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
- background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
- padding: 0 2px;
- list-style: none;
- white-space: nowrap;
-}
-
-@media print {
- .tabs {
- display: none;
- }
-}
-
-.tabs__tab {
- float: left;
- margin: 0 3px;
- border: 1px solid #cccccc;
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
- border-bottom-color: transparent;
- border-bottom: 0 \0/ie;
- overflow: hidden;
- background: #dddddd;
-}
-
-[dir='rtl'] .tabs__tab {
- float: right;
-}
-
-.tabs__tab.is-active {
- border-bottom-color: #fff;
-}
-
-.tabs__tab-link {
- padding: 0 1.5rem;
- display: block;
- text-decoration: none;
- -webkit-transition: color .3s, background .3s, border .3s;
- transition: color .3s, background .3s, border .3s;
- text-shadow: #fff 0 1px 0;
- color: #000;
- background: #dddddd;
- letter-spacing: 1px;
-}
-
-.tabs__tab-link:focus, .tabs__tab-link:hover {
- background: #eaeaea;
-}
-
-.tabs__tab-link:active, .tabs__tab-link.is-active, .tabs__tab-link--is-active {
- background: #fff;
- text-shadow: none;
-}
-
-.tabs--off,
-.views-displays .secondary {
- margin: 0;
- border-bottom: 0;
- padding: 0;
- background-image: none;
-}
-
-.tabs--secondary {
- margin-top: 1.5rem;
- font-size: 0.875rem;
- background-image: none;
-}
-
-.tabs + .tabs--secondary {
- margin-top: 0;
- background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
- background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
-}
-
-.tabs--secondary .tabs__tab {
- margin: 0.5625rem 0.1875rem;
- border: 0;
- background: transparent;
-}
-
-[dir='rtl'] .tabs--secondary .tabs__tab {
- float: right;
-}
-
-.tabs--secondary .tabs__tab.is-active {
- border-bottom-color: transparent;
-}
-
-.tabs--secondary .tabs__tab-link {
- border: 1px solid #cccccc;
- border-radius: 24px;
- color: #666666;
- background: #f1f1f1;
- letter-spacing: normal;
-}
-
-.tabs--secondary .tabs__tab-link:focus, .tabs--secondary .tabs__tab-link:hover {
- color: #333333;
- background: #dddddd;
- border-color: #999999;
-}
-
-.tabs--secondary .tabs__tab-link:active, .tabs--secondary .tabs__tab-link.is-active, .tabs--secondary .tabs__tab-link--is-active {
- color: white;
- text-shadow: #333333 0 1px 0;
- background: #666666;
- border-color: black;
-}
-
-.watermark {
- font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
- font-weight: bold;
- text-transform: uppercase;
- display: block;
- height: 0;
- overflow: visible;
- background-color: transparent;
- color: #eeeeee;
- font-size: 75px;
- line-height: 1;
- text-align: center;
- text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
- word-wrap: break-word;
-}