Commit 5b40e92d authored by ribel's avatar ribel
Browse files

ECI-290 + ECI-292 by maikelkoopman: Theme overhaul

parent 9cc57967
### v1.1.0 -- Feb 2017
Inserted KSS based styleguide
* See gulpfile for options that are passed on
* The folder os-builder holds the assets and layout for the styleguide
* Removed hook_theme_suggestions_fieldset_alter and hook_theme_suggestions_details_alter overrides which are not needed anymore because of social base theme update (2.1.0).
* Class name updates for changed components in socialbase update 2.1.0
* Set hover color of button links to remain primary color
* Remove grid mixins (deprecated)
\ No newline at end of file
......@@ -157,99 +157,73 @@ a.text-accent:focus {
}
.bg-primary {
color: #fff;
background-color: #29abe2;
}
.bg-primary {
background-color: #29abe2;
.bg-secondary {
background-color: #1f80aa;
}
a.bg-primary:hover,
a.bg-primary:focus {
background-color: #1a8dbe;
.bg-accent {
background-color: #ffc142;
}
.bg-success {
background-color: #dff0d8;
}
a.bg-success:hover,
a.bg-success:focus {
background-color: #c1e2b3;
}
.bg-info {
background-color: #d9edf7;
.bg-warning {
background-color: #fcf8e3;
}
a.bg-info:hover,
a.bg-info:focus {
background-color: #afd9ee;
.bg-danger {
background-color: #f2dede;
}
.bg-warning {
background-color: #fcf8e3;
.bg-info {
background-color: #d9edf7;
}
a.bg-warning:hover,
a.bg-warning:focus {
background-color: #f7ecb5;
.bg-gray-base {
background-color: #000;
}
.bg-danger {
background-color: #f2dede;
.bg-gray-darker {
background-color: #222222;
}
a.bg-danger:hover,
a.bg-danger:focus {
background-color: #e4b9b9;
.bg-gray-dark {
background-color: #333333;
}
.bg-gray {
background-color: #555555;
}
a.bg-gray:hover,
a.bg-gray:focus {
background-color: #3c3c3c;
}
.bg-gray-light {
background-color: #777;
}
a.bg-gray-light:hover,
a.bg-gray-light:focus {
background-color: #5e5e5e;
.bg-gray-light-1 {
background-color: #adadad;
}
.bg-gray-lighter {
background-color: #e6e6e6;
}
a.bg-gray-lighter:hover,
a.bg-gray-lighter:focus {
background-color: #cdcdcd;
.bg-gray-lighter-1 {
background-color: #f7f7f7;
}
.bg-gray-lightest {
background-color: #f3f3f3;
}
a.bg-gray-lightest:hover,
a.bg-gray-lightest:focus {
background-color: #dadada;
}
.bg-white {
background-color: white;
}
a.bg-white:hover,
a.bg-white:focus {
background-color: #e6e6e6;
}
.brand-primary {
background-color: #29abe2;
border-color: #29abe2;
......@@ -440,6 +414,6 @@ body {
background-color: #ebcccc;
}
table .table {
table table {
background-color: #f3f3f3;
}
......@@ -41,11 +41,6 @@
border-color: #6d6d6d;
}
.btn-default:active, .btn-default.active,
.open > .btn-default.dropdown-toggle {
background-image: none;
}
.btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
......@@ -94,11 +89,6 @@ fieldset[disabled] .btn-default.focus {
border-color: #115b7b;
}
.btn-primary:active, .btn-primary.active,
.open > .btn-primary.dropdown-toggle {
background-image: none;
}
.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
......@@ -148,11 +138,6 @@ fieldset[disabled] .btn-primary.focus {
border-color: #c28200;
}
.btn-accent:active, .btn-accent.active,
.open > .btn-accent.dropdown-toggle {
background-image: none;
}
.btn-accent.disabled:hover, .btn-accent.disabled:focus, .btn-accent.disabled.focus, .btn-accent[disabled]:hover, .btn-accent[disabled]:focus, .btn-accent[disabled].focus,
fieldset[disabled] .btn-accent:hover,
fieldset[disabled] .btn-accent:focus,
......@@ -202,11 +187,6 @@ fieldset[disabled] .btn-accent.focus {
border-color: transparent;
}
.btn-flat:active, .btn-flat.active,
.open > .btn-flat.dropdown-toggle {
background-image: none;
}
.btn-flat.disabled:hover, .btn-flat.disabled:focus, .btn-flat.disabled.focus, .btn-flat[disabled]:hover, .btn-flat[disabled]:focus, .btn-flat[disabled].focus,
fieldset[disabled] .btn-flat:hover,
fieldset[disabled] .btn-flat:focus,
......@@ -224,7 +204,7 @@ fieldset[disabled] .btn-flat.focus {
.open .dropdown-toggle .btn-flat {
background-color: rgba(0, 0, 0, 0.12);
border-color: transparent;
color: inherit;
color: #29abe2;
fill: #1a8dbe;
}
......@@ -244,7 +224,6 @@ fieldset[disabled] .btn-flat.focus {
background-color: transparent;
border-color: transparent;
fill: #29abe2;
fill: #29abe2;
}
.btn-link:focus, .btn-link.focus {
......@@ -275,11 +254,6 @@ fieldset[disabled] .btn-flat.focus {
border-color: transparent;
}
.btn-link:active, .btn-link.active,
.open > .btn-link.dropdown-toggle {
background-image: none;
}
.btn-link.disabled:hover, .btn-link.disabled:focus, .btn-link.disabled.focus, .btn-link[disabled]:hover, .btn-link[disabled]:focus, .btn-link[disabled].focus,
fieldset[disabled] .btn-link:hover,
fieldset[disabled] .btn-link:focus,
......
......@@ -3,29 +3,37 @@
background-color: white;
}
.card-head {
.card__title {
border-radius: 10px 10px 0 0;
color: #777;
font-weight: 500;
text-transform: uppercase;
}
.teaser--small .card-head,
.teaser--small .card-actionbar {
.card--list .card__title,
.card--list .card__actionbar {
text-align: center;
}
.card-body:first-child {
.card__body:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card-body:last-child {
.card__body:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.card-nested-section:last-child {
.card__nested-section:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.card__link {
color: #29abe2;
}
.card__link:hover {
color: #1a8dbe;
}
.form-control {
color: #555555;
background-color: white;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 5px;
}
......@@ -26,10 +26,25 @@
.form-control[disabled], .form-control[readonly],
fieldset[disabled] .form-control {
background-color: white;
background-color: #fff;
opacity: 1;
}
input[type='range']::-webkit-slider-thumb {
background: #1d789e;
border: 2px solid #1d789e;
}
input[type='range']::-ms-thumb {
background: #1d789e;
border: 2px solid #1d789e;
}
input[type='range']::-moz-range-thumb {
background: #1d789e;
border: 2px solid #1d789e;
}
[type="radio"]:checked + label {
color: #1d789e;
}
......
This diff is collapsed.
.jumbotron {
background-color: #fff;
color: inherit;
margin-bottom: 30px;
padding-bottom: 30px;
padding-top: 30px;
}
.jumbotron h1,
.jumbotron .h1 {
color: inherit;
}
.jumbotron p {
margin-bottom: 15px;
font-size: 24px;
font-weight: 200;
}
.jumbotron > hr {
border-top-color: #e6e6e6;
}
.container .jumbotron,
.container-fluid .jumbotron {
border-radius: 12px;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.jumbotron .container {
max-width: 100%;
}
@media screen and (min-width: 960px) {
.jumbotron {
padding-top: 48px;
padding-bottom: 48px;
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-left: 60px;
padding-right: 60px;
}
.jumbotron h1,
.jumbotron .h1 {
font-size: 72px;
}
}
#kss-node .kss-doc-title {
margin: 0;
}
#kss-node .kss-nav__ref:after {
content: ' ';
}
#kss-node .kss-section {
max-width: 48em;
margin-bottom: 48px;
}
#kss-node .kss-section.is-fullscreen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
max-height: none !important;
box-sizing: border-box !important;
-o-object-fit: contain !important;
object-fit: contain !important;
-webkit-transform: none !important;
transform: none !important;
overflow: auto !important;
padding: 20px;
}
#kss-node .kss-title {
padding-bottom: 11px;
margin: 48px 0 6px;
border-bottom: 1px solid rgba(119, 119, 119, 0.2);
}
#kss-node .is-fullscreen .kss-title {
margin-top: 0;
}
#kss-node .kss-title__ref {
display: block;
font-size: 16px;
line-height: 16px;
color: #666;
}
#kss-node .kss-title__ref:before {
content: 'Section ';
}
#kss-node .kss-title__permalink {
display: block;
color: #000;
text-decoration: none;
}
#kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active {
color: #0645ad;
}
#kss-node .kss-title__permalink-hash {
display: none;
color: #ccc;
}
#kss-node .kss-toolbar {
margin: 6px 0 24px;
display: inline-block;
border: 1px solid #eee;
background-color: #f9f9f9;
border-right-color: #e0e0e0;
border-bottom-color: #e0e0e0;
line-height: 1;
padding: 3px;
}
#kss-node .kss-toolbar a {
box-sizing: content-box;
display: inline-block;
width: 16px;
height: 16px;
padding: 3px;
vertical-align: top;
position: relative;
overflow: visible;
}
#kss-node .kss-toolbar a + a {
margin-left: 6px;
}
#kss-node .kss-toolbar a .kss-toolbar__icon-fill {
fill: #ccc;
}
#kss-node .kss-toolbar a svg.on {
display: none;
}
#kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover {
border-color: #000;
}
#kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill {
fill: #000;
}
#kss-node .kss-toolbar__tooltip {
position: absolute;
z-index: 1;
display: inline-block;
bottom: 100%;
left: -10px;
margin-bottom: 5px;
border: solid 1px #666;
padding: 8px 10px 6px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
white-space: nowrap;
color: #000;
background: #fff;
cursor: help;
opacity: 0;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
word-wrap: normal;
}
#kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after {
content: '';
position: absolute;
bottom: -8px;
left: 15px;
width: 0;
height: 0;
border-width: 7px 5px 0;
border-color: #666 transparent;
border-style: solid;
}
#kss-node .kss-toolbar__tooltip:after {
bottom: -6px;
border-top-color: #fff;
}
#kss-node a:focus > .kss-toolbar__tooltip,
#kss-node a:hover > .kss-toolbar__tooltip {
opacity: 1;
clip: auto;
height: auto;
width: auto;
overflow: visible;
}
#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides],
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] {
border-color: #666;
background-color: #666;
}
#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill {
fill: #fff;
}
#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on {
display: block;
}
#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off {
display: none;
}
#kss-node .kss-parameters {
display: table;
list-style-type: none;
margin-top: 0;
margin-left: 0;
padding-left: 0;
}
#kss-node .kss-parameters__title {
font-weight: bold;
}
#kss-node .kss-parameters__item {
display: table-row;
}
#kss-node .kss-parameters__name {
display: table-cell;
padding-right: 20px;
white-space: nowrap;
}
#kss-node .kss-parameters__description {
display: table-cell;
}
#kss-node .kss-parameters__default-value code {
white-space: nowrap;
}
#kss-node .kss-modifier__wrapper {
border: 1px solid #ccc;
padding: 10px;
}
#kss-node .is-fullscreen .kss-modifier__wrapper {
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0;
border: none;
}
#kss-node .kss-modifier__heading {
margin: -10px -10px 10px -10px;
padding: 10px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-weight: bold;
}
#kss-node .is-fullscreen .kss-modifier__heading {
margin: 0 20px 10px;
border: 1px solid #ccc;
}
#kss-node .kss-modifier__default-name {
font-weight: bold;
margin-bottom: 12px;
}
#kss-node .is-fullscreen .kss-modifier__default-name {
margin-left: 20px;
margin-right: 20px;
}
#kss-node .kss-modifier__name {
float: left;
padding-right: 10px;
font-weight: bold;
}
#kss-node .kss-modifier__description {
margin-bottom: 12px;
}
#kss-node .is-fullscreen .kss-modifier__description {
margin-right: 20px;
}
#kss-node .kss-modifier__example {
clear: left;
border: 2px dashed transparent;
z-index: 0;
position: relative;
margin: -2px -2px 22px;
}
#kss-node .kss-modifier__example:last-child {
margin: 0;
}
#kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
#kss-node.kss-guides-mode .kss-modifier__example-footer:before,
#kss-node.kss-guides-mode .kss-modifier__example-footer:after {
z-index: -1;
box-sizing: border-box;