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

.bowerrc

+{
+  "directory" : "libraries"
+}
\ No newline at end of file

.gitignore

@@ -13,6 +13,7 @@ lib
 # Applications & Tools
 .idea
 bower_components
+libraries
 config.codekit
 node_modules
 npm-debug.log

CHANGELOG.md

+### v2.1.0 -- Feb 2017
+
+Complete overhaul of theme_hooks and clean up of templates
+
+* All theme_hooks_suggestions and theme_hook_preprocess functions are moved to individual files in the includes folder
+* Cleaned up form hooks
+* Renamed classes in `card` component
+* Renamed classes in `teaser` component
+* Removed Pug version of styleguide -> styleguide is moved to socialblue theme
+* Inserted documentation in component scss files for existing components in styleguide
+* Added range slider to atoms > form-controls
+* Moved layout from base component to template component folder
+* Added Javascript library folder to components for better abstraction of javascript libraries/enhancements
+* Added Morris.js dependency via bower (gulp plugin)
+* Removed theme settings options that are default
+* Removed bootstrap function to colorize and iconize buttons. This is now done via form hooks
+* Updated the way we override the bootstrap panel implementation for details and fieldsets. Updated corresponding template files
+* Merged container templates
+* Merged views templates
+* Merged form templates 
+* Updated teaser templates

README.md

@@ -32,8 +32,10 @@ This is working folder. The folder is categorised following atomic design princi
 Drupal installation files
 ### Content
 Images that are used in our style guide, not used by Drupal.
-### JS
+### JS - deprecated
 Old javascript folder, needs to cleaned up (all JS should be in components are generated to assets folder)
+### Libraries
+External libraries. Install via Gulp Bower task.
 ### Pug
 Holds our current style guide. This one is published at http://styleguide.getopensocial.com/
 ### Template

assets/css/badges.css

@@ -89,7 +89,7 @@
 
 .js .badge--toggle input[type=checkbox]:checked ~ .badge--toggle__label {
   width: auto;
-  padding: 3px 12px 3px 6px;
+  padding: 4px 12px 4px 6px;
   opacity: 1;
 }
 

assets/css/base.css

@@ -107,6 +107,7 @@ textarea {
   font: inherit;
   margin: 0;
   box-shadow: none;
+  line-height: inherit;
 }
 
 button {
@@ -163,9 +164,9 @@ input[type="search"]::-webkit-search-decoration {
 }
 
 fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+  border: 0;
+  margin: 0;
+  padding: 0;
 }
 
 legend {
@@ -432,8 +433,8 @@ svg {
 }
 
 .icon-badge-toggle {
-  width: 18px;
-  height: 18px;
+  width: 20px;
+  height: 20px;
   padding: 1px 1px 1px 4px;
 }
 
@@ -561,32 +562,6 @@ img.align-center {
   margin: 3px;
 }
 
-.container {
-  position: relative;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.main-container {
-  overflow: hidden;
-  min-height: 100%;
-  min-height: calc(100vh - 50px);
-  padding-top: 50px;
-  padding-bottom: 100px;
-  position: relative;
-  z-index: 0;
-}
-
-.region--main-content {
-  padding-left: 1em;
-  padding-right: 1em;
-}
-
-.region--complementary {
-  padding-left: 1em;
-  padding-right: 1em;
-}
-
 a {
   text-decoration: none;
   font-weight: 500;
@@ -998,11 +973,6 @@ p {
   margin: 0 0 0.75rem;
 }
 
-.subtitle {
-  font-size: 0.75rem;
-  line-height: 1;
-}
-
 blockquote {
   margin: 20px 0;
   padding-left: 1.5em;
@@ -1293,32 +1263,6 @@ address {
   h4, .h4 {
     font-size: 1.25rem;
   }
-  .container {
-    max-width: 1200px;
-  }
-  .row {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-  .region--main-content {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 66.66667%;
-    flex: 0 0 66.66667%;
-    max-width: 66.66667%;
-  }
-  .region--complementary {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 33.33333%;
-    flex: 0 0 33.33333%;
-    -webkit-box-ordinal-group: 3;
-    -ms-flex-order: 2;
-    order: 2;
-    max-width: 33.33333%;
-  }
-  .complementary-top {
-    margin-top: 3.875rem;
-  }
 }
 
 @media (max-width: 599px) {

assets/css/button.css

@@ -39,10 +39,6 @@
   margin-left: 3px;
 }
 
-.btn, .btn:active, .btn.active {
-  box-shadow: none;
-}
-
 .btn:hover, .btn:focus, .btn.focus {
   text-decoration: none;
   outline: 0;

assets/css/cards.css

@@ -18,134 +18,87 @@
   max-width: 100%;
 }
 
-.card-head {
+.card__title {
   position: relative;
   vertical-align: middle;
+  margin: 0;
   padding: 15px 20px 0;
   line-height: 1;
+  font-size: 0.875rem;
+}
+
+.card__subtitle {
+  font-size: 0.75rem;
+  display: block;
 }
 
-.card-underline .card-head {
+.card__title--underline {
   border-bottom: 1px solid #e6e6e6;
   padding-bottom: 15px;
 }
 
-.card-body {
+.card__body {
   position: relative;
   padding: 20px;
+  z-index: 1;
 }
 
-.card-with-actionbar .card-body {
-  padding-bottom: 48px;
-  overflow: hidden;
-}
-
-.card-head header {
-  vertical-align: middle;
-  font-size: 0.875rem;
-}
-
-.card__label {
-  text-transform: uppercase;
-  font-size: 14px;
-  color: #4d4d4d;
+.card__body p:last-child {
+  margin-bottom: 0;
 }
 
-.card-nested-section {
-  margin: 10px -20px -20px;
+.card__nested-section {
+  margin-top: 10px;
+  margin-right: -20px;
+  margin-bottom: -20px;
+  margin-left: -20px;
   padding: 20px;
   background: #f7f7f7;
   border-top: 1px solid #e6e6e6;
 }
 
-.card-nested-section.indented {
-  margin: -20px;
-  background: transparent;
-  border-top: 0;
-}
-
-.card-nested-section:last-child {
-  margin-bottom: -20px;
-  border-bottom: 0;
-}
-
-.card p:first-child {
-  margin-top: 0;
-}
-
-.card p:last-child {
-  margin-bottom: 0;
-}
-
-.card-actionbar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  background-color: inherit;
-  padding: 6px 20px 6px 16px;
+.card__actionbar {
+  margin-top: -20px;
+  padding: 20px 20px 16px 16px;
+  position: relative;
+  z-index: 2;
 }
 
-.card-actionbar:before, .card-actionbar:after {
+.card__actionbar:before, .card__actionbar:after {
   content: " ";
   display: table;
 }
 
-.card-actionbar:after {
+.card__actionbar:after {
   clear: both;
 }
 
-.card-actionbar .actionbar {
-  position: absolute;
-  z-index: 1;
-}
-
-.card-actionbar--with-border {
-  border-top: 1px solid #e6e6e6;
-}
-
-.card-buttonbar {
-  padding: 6px 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
-  border-top: 1px solid #e6e6e6;
-}
-
-.card-buttonbar .btn-link {
-  padding: 6px;
-}
-
-.card-buttonbar .justify-end {
-  margin-left: auto;
-  text-align: right;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+.card__link {
+  font-size: 0.875rem;
+  margin-left: 24px;
+  float: right;
+  -webkit-transition: color .3s ease;
+  transition: color .3s ease;
+  text-transform: uppercase;
 }
 
 @media (min-width: 600px) {
 
-  .card-body.extra-padding {
+  .card__body--fat {
     padding: 48px;
   }
 
-  .extra-padding .card-nested-section {
+  .card__body--fat .card__nested-section {
     margin-left: -48px;
     margin-right: -48px;
     padding: 20px 48px;
   }
 
-  .extra-padding .card-nested-section:last-child {
+  .card__body--fat .card__nested-section:last-child {
     margin-bottom: -48px;
   }
 
-  .card-buttonbar {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
+  .card__body--fat + .card__actionbar {
+    margin-top: -48px;
   }
 }

assets/css/ckeditor.css

@@ -560,11 +560,6 @@ p {
   margin: 0 0 0.75rem;
 }
 
-.subtitle {
-  font-size: 0.75rem;
-  line-height: 1;
-}
-
 blockquote {
   margin: 20px 0;
   padding-left: 1.5em;

assets/css/dropdown.css

@@ -162,8 +162,9 @@
   white-space: nowrap;
 }
 
-.dropdown-menu.dropdown-md {
+.dropdown-menu--post {
   min-width: 240px;
+  left: auto;
   right: -70px;
 }
 
@@ -242,7 +243,7 @@
     padding-right: 8px;
   }
 
-  .dropdown-menu.dropdown-md {
+  .dropdown-menu--post {
     right: 0;
   }
 

assets/css/form-controls.css

 @charset "UTF-8";
-input,
-button,
-select,
-textarea {
-  font-family: inherit;
+.form-control {
+  display: block;
+  width: 100%;
+  max-width: 23rem;
+  height: 38px;
+  padding: 6px 12px;
   font-size: inherit;
-  line-height: inherit;
+  line-height: 1.5;
+  background-image: none;
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.form-control::-moz-placeholder {
+  opacity: 1;
+}
+
+.form-control::-ms-expand {
+  border: 0;
+  background-color: transparent;
+}
+
+.form-control[disabled],
+fieldset[disabled] .form-control {
+  cursor: not-allowed;
 }
 
 input[type="search"] {
@@ -23,11 +41,6 @@ input[type="file"] {
   display: block;
 }
 
-input[type="range"] {
-  display: block;
-  width: 100%;
-}
-
 select[multiple],
 select[size] {
   height: auto;
@@ -40,48 +53,14 @@ input[type="checkbox"]:focus {
   outline-offset: -2px;
 }
 
-.form-control {
-  display: block;
-  width: 100%;
-  max-width: 23rem;
-  height: 38px;
-  padding: 6px 12px;
-  font-size: inherit;
-  line-height: 1.5;
+input[type="search"] {
   -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-image: none;
-  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-}
-
-.form-control::-moz-placeholder {
-  opacity: 1;
-}
-
-.form-control::-ms-expand {
-  border: 0;
-  background-color: transparent;
-}
-
-.form-control[disabled],
-fieldset[disabled] .form-control {
-  cursor: not-allowed;
 }
 
 textarea.form-control {
   height: auto;
 }
 
-input[type="search"] {
-  -webkit-appearance: none;
-}
-
-.form-managed-file {
-  font-size: 0.875rem;
-}
-
 .radio,
 .checkbox {
   position: relative;
@@ -291,9 +270,6 @@ input[type="search"] {
   margin-bottom: 1rem;
 }
 
-/***************
-     Switch
-***************/
 .switch * {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -327,6 +303,10 @@ input[type="search"] {
   height: 0;
 }
 
+.switch label {
+  font-weight: 300;
+}
+
 .switch .lever {
   content: "";
   display: inline-block;
@@ -374,6 +354,101 @@ input[type=checkbox]:not(:disabled) ~ .lever:active:after {
   background-color: #BDBDBD;
 }
 
+[type='range'] {
+  -webkit-appearance: none;
+  width: 100%;
+  border: 0;
+}
+
+[type='range']:focus {
+  outline: 0;
+}
+
+[type='range']:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
+}
+
+[type='range']:focus::-moz-range-thumb {
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
+}
+
+[type='range']:focus::-ms-thumb {
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
+}
+
+[type='range']::-webkit-slider-runnable-track {
+  cursor: pointer;
+  height: 8px;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  width: 100%;
+  background: #e6e6e6;
+  border: 2px solid #e6e6e6;
+  border-radius: 5px;
+}
+
+[type='range']::-webkit-slider-thumb {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+  border-radius: 12px;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+  -webkit-appearance: none;
+  margin-top: -10px;
+}
+
+[type='range']::-moz-range-track {
+  cursor: pointer;
+  height: 8px;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  width: 100%;
+  background: #e6e6e6;
+  border: 2px solid #e6e6e6;
+  border-radius: 5px;
+}
+
+[type='range']::-moz-range-thumb {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+  border-radius: 12px;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+}
+
+[type='range']::-ms-track {
+  cursor: pointer;
+  height: 8px;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  width: 100%;
+  background: transparent;
+  border-color: transparent;
+  border-width: 12px 0;
+  color: transparent;
+}
+
+[type='range']::-ms-fill-lower {
+  background: #d9d9d9;
+  border: 2px solid #e6e6e6;
+  border-radius: 10px;
+}
+
+[type='range']::-ms-fill-upper {
+  background: #e6e6e6;
+  border: 2px solid #e6e6e6;
+  border-radius: 10px;
+}
+
+[type='range']::-ms-thumb {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+  border-radius: 12px;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+  margin-top: 0;
+}
+
 .select-wrapper {
   position: relative;
   width: 100%;
@@ -438,30 +513,4 @@ input[type=checkbox]:not(:disabled) ~ .lever:active:after {
   input[type="month"].form-control{
     line-height: 24px;
   }
-  input[type="date"].input-sm,
-  .input-group-sm input[type="date"],
-  input[type="time"].input-sm,
-  .input-group-sm
-  input[type="time"],
-  input[type="datetime-local"].input-sm,
-  .input-group-sm
-  input[type="datetime-local"],
-  input[type="month"].input-sm,
-  .input-group-sm
-  input[type="month"]{
-    line-height: 21px;
-  }
-  input[type="date"].input-lg,
-  .input-group-lg input[type="date"],
-  input[type="time"].input-lg,
-  .input-group-lg
-  input[type="time"],
-  input[type="datetime-local"].input-lg,
-  .input-group-lg
-  input[type="datetime-local"],
-  input[type="month"].input-lg,
-  .input-group-lg
-  input[type="month"]{
-    line-height: 27px;
-  }
 }

assets/css/form-elements.css

@@ -20,6 +20,43 @@ label {