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

CHANGELOG.md

+### 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

assets/css/base.css

@@ -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;
 }

assets/css/button.css

@@ -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,

assets/css/cards.css

@@ -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;
+}

assets/css/form-controls.css

 .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;
 }

assets/css/jumbotron.css

-.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;
-  }
-}

assets/css/kss.css

+#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;