Commit 80272dfb authored by maikelkoopman's avatar maikelkoopman
Browse files

Issue #2864305 by maikelkoopman: document atoms in styleguide

parent f6884238
### v2.1.2 -- Mar 2017
* Replaced Bootstrap list-group component with custom list component
* Merge label component with badges and extend badge modifiers
* Improve card documentation with seperation of `card__block` and `card__body`
* Document and rename alert, badge, list in style guide
* Add Bar chart and Donut chart to MorrisJs documentation
* Optimise small teaser templates
* Add two columns and three columns layout, with sidebar_first and sidebar_second regions.
* Renamed in page-full twig block nodefull_header to metainfo and added twig block metaengage.
### v2.1.1 -- Feb 2017
* Removed pug style guide files
* Removed content folder which contained assets for the old style guide
......
.alert {
padding: 15px;
padding: 0.75rem 1.25rem;
margin-bottom: 24px;
border: 1px solid transparent;
}
.alert h4 {
.alert * {
margin-top: 0;
color: inherit;
}
.alert .alert-link {
font-weight: bold;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
......@@ -22,16 +18,11 @@
margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
top: -0.75rem;
right: -1.25rem;
padding: 0.75rem 1.25rem;
color: inherit;
}
......
.badge {
display: inline-block;
margin-bottom: 3px;
margin-right: 3px;
padding: 4px 0.4em;
font-size: 75%;
font-weight: 500;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
min-width: 10px;
max-width: 100%;
}
.badge:empty {
display: none;
}
small .badge,
.small .badge {
font-size: 90%;
position: relative;
top: -1px;
margin: 0;
}
.btn .badge {
position: relative;
top: -1px;
text-transform: none;
margin: 0;
}
a .badge {
cursor: pointer;
}
.badge--pill {
padding-right: 0.6em;
padding-left: 0.6em;
}
.badge--large {
padding: 0 1em;
font-size: 0.875rem;
line-height: 2;
}
.badge__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.badge__icon {
width: 15px;
height: 18px;
padding: 0 1px;
}
.badge__icon ~ .badge__label {
padding-left: 2px;
font-weight: lighter;
}
.badge__icon ~ .badge__label:first-of-type {
padding-left: 4px;
}
.badge__label--description {
display: none;
}
@media (min-width: 600px) {
.badge__label--description {
display: inline;
}
}
.badge {
display: inline-block;
min-width: 10px;
max-width: 100%;
font-weight: 500;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
text-align: center;
padding: 4px 8px;
margin-bottom: 5px;
font-size: 12px;
}
.badge:empty {
display: none;
}
.btn .badge {
position: relative;
top: -1px;
}
.btn-xs .badge,
.btn-group-xs > .btn .badge {
top: 0;
padding: 1px 5px;
}
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
.badge--large {
padding-left: 1em;
padding-right: 1em;
font-size: 0.875rem;
}
.badge label {
margin-bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 8px;
overflow: hidden;
}
.badge--likes-count,
.badge--visibility,
a.badge--comment-count {
padding: 0;
}
.badge--likes-count .icon-badge,
.badge--visibility .icon-badge,
a.badge--comment-count .icon-badge {
width: 23px;
height: 18px;
padding-left: 8px;
}
.badge--likes-count .icon-badge {
margin-top: 2px;
}
a.badge--comment-count label:hover {
cursor: pointer;
}
.badge--likes-count__number,
.badge--visibility__label,
.badge--comment-count__number {
padding: 5px 10px;
font-size: 0.75rem;
line-height: 1.5;
}
.badge--likes-count__text,
.badge--comment-count__text {
padding-right: 10px;
}
.badge--likes-count__text,
.badge--comment-count__text {
display: none;
}
.badge--toggle {
padding: 0;
background-color: transparent;
-webkit-transition: width 0.3s ease;
transition: width 0.3s ease;
}
.badge--toggle,
.badge--toggle * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.js .badge--toggle .badge--toggle__label {
width: 0;
opacity: 0;
display: inline-block;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.js .badge--toggle input[type=checkbox]:checked ~ .icon-badge-toggle,
.js .badge--toggle input[type=checkbox]:checked ~ .badge--toggle__label {
background-color: rgba(0, 0, 0, 0.1);
color: #4d4d4d;
}
.js .badge--toggle .badge--toggle__label {
border-radius: 0 8px 8px 0;
}
.js .badge--toggle input[type=checkbox]:checked ~ .badge--toggle__label {
width: auto;
padding: 4px 12px 4px 6px;
opacity: 1;
}
.js .badge--toggle label {
cursor: pointer;
}
@media (min-width: 600px) {
.badge--likes-count__text,
.badge--comment-count__text {
display: block;
}
}
......@@ -532,14 +532,6 @@ em.placeholder {
line-height: 1.25;
}
small {
font-size: 80%;
}
small .label {
font-size: 90%;
}
.text-align-left {
text-align: left;
}
......@@ -929,6 +921,19 @@ img.align-center {
display: none !important;
}
.list-inline {
padding-left: 0;
list-style: none;
}
.list-inline-item {
display: inline-block;
}
.list-inline-item:not(:last-child) {
margin-right: 5px;
}
@-ms-viewport {
width: device-width;
}
......@@ -974,12 +979,6 @@ svg[class^="icon-"] {
vertical-align: middle;
}
.icon-badge-toggle {
width: 20px;
height: 20px;
padding: 1px 1px 1px 4px;
}
.icon-responsive {
width: 100%;
height: 100%;
......@@ -1044,6 +1043,30 @@ a.icon-after .glyphicon {
margin-right: -.25em;
}
.close {
float: right;
font-size: 1.5rem;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: 0.5;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
opacity: .75;
}
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
@media (min-width: 600px) {
body {
font-size: 16px;
......
.breadcrumbs {
.region--breadcrumb {
display: none;
}
......@@ -24,7 +24,8 @@
@media (min-width: 900px) {
.breadcrumbs {
.region--breadcrumb {
display: block;
background-color: #fff;
}
}
......@@ -155,10 +155,6 @@ input[type="button"].btn-block {
transition: box-shadow, .15s ease-out;
}
.btn-raised.btn-default {
border: 0;
}
.btn-raised:active, .btn-raised.active, .btn-raised:hover {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
}
......@@ -346,7 +342,6 @@ input[type="button"].btn-block {
.btn-lg .caret, .btn-group-lg > .btn .caret {
border-width: 5px 5px 0;
border-bottom-width: 0;
}
.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret {
......@@ -382,3 +377,31 @@ input[type="button"].btn-block {
margin-top: -1px;
margin-left: 0;
}
.block-group-add-event-block,
.block-group-add-topic-block,
.block-event-add-block,
.block-topic-add-block,
.block-group-add-block {
display: inline-block;
}
@media (min-width: 900px) {
.block-group-add-event-block,
.block-group-add-topic-block,
.block-event-add-block,
.block-topic-add-block,
.block-group-add-block {
display: block;
}
.block-group-add-event-block .btn,
.block-group-add-topic-block .btn,
.block-event-add-block .btn,
.block-topic-add-block .btn,
.block-group-add-block .btn {
width: 100%;
margin-bottom: 0.75rem;
}
}
.card {
box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 0.75rem;
background-clip: padding-box;
}
......@@ -14,15 +21,11 @@
clear: both;
}
.card img {
max-width: 100%;
}
.card__title {
position: relative;
vertical-align: middle;
margin: 0;
padding: 15px 20px 0;
padding: 15px 1.25rem 0;
line-height: 1;
font-size: 0.875rem;
}
......@@ -37,29 +40,45 @@
padding-bottom: 15px;
}
.card__body {
.card__block {
position: relative;
padding: 20px;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
z-index: 1;
}
.card__body p:last-child {
margin-bottom: 0;
.card__block + .card__block {
padding-top: 0;
}
.card__block--list:not(:first-child) {
padding-top: 0;
}
.card__block--list:not(:last-child) {
padding-bottom: 0;
}
.card__body {
position: relative;
padding: 1.25rem;
}
.card__nested-section {
margin-top: 10px;
margin-right: -20px;
margin-bottom: -20px;
margin-left: -20px;
padding: 20px;
margin-top: 0.625rem;
margin-right: -1.25rem;
margin-bottom: -1.25rem;
margin-left: -1.25rem;
padding: 1.25rem;
background: #f7f7f7;
border-top: 1px solid #e6e6e6;
}
.card__actionbar {
margin-top: -20px;
padding: 20px 20px 16px 16px;
margin-top: -1.25rem;
padding: 1.25rem;
position: relative;
z-index: 2;
}
......@@ -82,23 +101,17 @@
text-transform: uppercase;
}
@media (min-width: 600px) {
.card__body--fat {
padding: 48px;
}
.card__text {
margin-top: 0;
}
.card__body--fat .card__nested-section {
margin-left: -48px;
margin-right: -48px;
padding: 20px 48px;
}
.card__text:last-child {
margin-bottom: 0;
}
.card__body--fat .card__nested-section:last-child {
margin-bottom: -48px;
}
@media (min-width: 900px) {
.card__body--fat + .card__actionbar {
margin-top: -48px;
.card__body {
padding: 2.5rem;
}
}
......@@ -340,14 +340,6 @@ em.placeholder {
line-height: 1.25;
}
small {
font-size: 80%;
}
small .label {
font-size: 90%;
}
.text-align-left {
text-align: left;
}
......@@ -737,6 +729,19 @@ img.align-center {
display: none !important;
}
.list-inline {
padding-left: 0;
list-style: none;
}
.list-inline-item {
display: inline-block;
}
.list-inline-item:not(:last-child) {
margin-right: 5px;
}
@-ms-viewport {
width: device-width;
}
......
.close {
float: right;
font-size: 24px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: 0.2;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: 0.5;
}
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
......@@ -45,7 +45,13 @@
}
.comment__text p {
margin-bottom: 0;
}
.comment__text .badge {
margin: 0;
line-height: 1;
padding: 2px 0.6em;
}
.comments {
......
......@@ -111,6 +111,7 @@ input[type='text'].form-time {
height: 30px;
border-radius: 4px;
border: none;
padding: 0;
font-weight: 500;
}
......
......@@ -162,61 +162,22 @@
white-space: nowrap;
}
.dropdown-men