Initial commit.

CHANGELOG.md

+### Release 1.5
+* Updated Gulptasks. 
+* All 3rd party libraries are removed from the theme and need to be included via
+composer (or drush). Libraries now refer to files in html/libraries folder. 
+* Gulp task `minify-js` has been removed and the `scripts` task has been added.
+* All gulp plugins are updated to the latest version.  
+
+
+### Release 1.4
+* Moved rounded avatars style from socialbase to socialblue. For existing
+installations: Add border-radius properties to base/utilities/images, atoms/list
+and molecules/navigation/navbar components in your subtheme to keep rounded
+styles.
+
+### v2.1.4 -- May 2017
+* Added method for autogrow behaviour and changed event triggers.
+* Changed overflow styles for autogrow form elements.
+* Update class on icons in navbar https://www.drupal.org/node/2872929
+* Update instruction: In your sub theme provide a fill color for either
+`.navbar-nav__icon` which is the new icon class. Or like we did in social blue
+provide a fill for `.navbar-nav > li > a`. The default color is white. The size
+of the icon is in socialbase. The float class is removed and not needed.
+* Provide a condition before printing the *topic type* in
+`node--topic--teaser.html.twig`. Although topic type in a required field by
+default, this can be changed in an installation.
+
+### v2.1.3 -- Apr 2017
+* Changed wave-effect styles.
+* Changed book navigation styles.
+* Made image widget crop being collapsed by default.
+
+### 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 separation 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
+* Updated readme file
+* Updated gulpfile and added more documentation
+* Revised and updated all base components
+* Revised and updated all mixins
+
+### 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

+# Base theme #
+The Social Base theme is designed as a base theme for Open Social. This base
+theme holds has a lot of sensible defaults. It doesn't however contain much
+styling. We expect developers to want to change this for their own project.
+As you can see there is also a theme called **socialblue**. Socialblue is the
+demo/styling sub theme for Open Social.
+
+
+# Changing the style of the theme  #
+If you are a Drupal themer you know how to create a (sub)theme. There are no
+tricks in our setup you need to know for Open Social. The easiest way to start
+is to grab a copy of Social Blue and rename all instances of Social Blue to your
+new theme name. Social Base and Social Blue will get updates each release, so it
+is best not to make changes in here you want to keep.
+
+Make sure that Social Base is always set as the base theme and inherit the
+regions from social Base if you do not change the page template.
+
+# Development of your theme #
+Before you start theming there are a few things that might be convenient. In
+html/sites/default there is a development.services.yml file. Make sure to set
+* twig.config -> debug: true
+* twig.config -> auto_reload: true
+* twig.config -> cache: false
+
+Also in sites default you will find an example.settings.local.php file.
+Duplicate this file and remove the example part from the filename. 
+After you have configured these files you need to rebuild the caches. 
+This will speed up you development process.
+
+### Goodies used
+
+- [Gulp](http://gulpjs.com/) 
+- [Yarn](https://yarnpkg.com)
+- [Sass](http://sass-lang.com/)
+- [KSS Node](https://github.com/kss-node/kss-node)
+- [Twig](https://www.drupal.org/docs/8/theming/twig)
+
+## Structure
+
+<dl>
+<dt># assets</dt>
+<dd>Our gulp tasks will generate our CSS, JS and images that Drupal uses.</dd>
+<dt># components</dt>
+<dd>This is source folder. The folder is categorised following atomic design
+principles. Most re-usable css values are turned into variables for consistency.
+</dd>
+<dt># config</dt>
+<dd>Drupal installation files</dd>
+<dt># node_modules</dt>
+<dd>Yarn will install all devDependencies in this folder. 
+What gets installed is listed in package.json</dd>
+<dt># src</dt>
+<dd>Drupal plugins - contains most functions and template suggestions.  
+[Drupal Bootstrap documentation](https://drupal-bootstrap.org/api/bootstrap/docs%21plugins%21README.md/group/plugins/8)
+on how to extend this in your subtheme.</dd>
+<dt># Templates</dt>
+<dd>This folder contains all twig templates for the theme.</dd>
+
+
+
+# Contributing to socialbase #
+
+Social Base uses Gulp.js as a task runner, so that it can do many tasks
+automatically:
+ - Build CSS from your Sass.
+ - Add vendor prefixes for the browsers you want to support using Autoprefixer.
+ - Watch all of your files as you develop and re-build everything on the fly.
+
+Set up your front-end development build tools:
+
+1. [Install Yarn](https://yarnpkg.com/en/docs/install), see their website for
+documentation
+
+2. Install the gulp-cli tool globally. Normally, installing a Node.js globally
+  is not recommended, which is why both Gulp and Grunt have created wrapper
+  commands that will allow you to run "gulp" or "grunt" from anywhere, while
+  using the local version of gulp or grunt that is installed in your project.
+  To install gulp's global wrapper, run:
+    ```
+    npm install -g gulp-cli
+    ```
+
+3. The package.json file contains the versions of all the node packages you
+need. To install them run from the theme:
+    ```
+    yarn install
+    ```
+    
+4. Set the URL used to access the Drupal website under development. Edit your
+    gulpfile.js file and change the options.drupalURL setting:
+    ```
+    options.drupalURL = 'http://localhost';
+    ```
+
+4. There are different gulp tasks. What each gulp task does is described in the
+gulpfile with the task itself. To run a gulp task, type:
+    ```
+    gulp [taskname]
+    ``` 
+
+# Notice
+We are constantly improving and updating the theme setup for Open Social. It
+might be the readme is not always up to date. Also check the changelog file for
+changes. You can report issues via the drupal.org
+[issue queue](https://www.drupal.org/project/issues/social?categories=All).
+The following items are on our roadmap:
+* Add components library module and create twig templates in the components
+folder.
+* Provide a starterkit in favor a manual copying Social Blue to start a new
+theme.

assets/css/admin-toolbar.css

+.toolbar-vertical #block-filter:target {
+  -webkit-transform: translateY(39px) translateX(0);
+          transform: translateY(39px) translateX(0);
+}
+
+.toolbar-vertical .off-canvas-right {
+  -webkit-transform: translateY(39px) translateX(280px);
+          transform: translateY(39px) translateX(280px);
+}
+
+.toolbar-vertical .off-canvas-right.is-open {
+  -webkit-transform: translateY(39px) translateX(0);
+          transform: translateY(39px) translateX(0);
+}
+
+.toolbar-vertical .toolbar .toolbar-bar,
+.toolbar-fixed .toolbar .toolbar-bar {
+  z-index: 1080;
+}
+
+.toolbar-horizontal .toolbar-tray .menu-item:hover .toolbar-icon.toolbar-icon-social-lets-connect-main:before, .toolbar-horizontal .toolbar-tray .menu-item:focus .toolbar-icon.toolbar-icon-social-lets-connect-main:before {
+  background-color: transparent;
+}
+
+@media (min-width: 900px) {
+  .toolbar-vertical .off-canvas-right {
+    -webkit-transform: none;
+            transform: none;
+  }
+  .toolbar-vertical .off-canvas-right.is-open {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@media (max-width: 975px) {
+  .toolbar-vertical .navbar-default,
+  .toolbar-fixed .navbar-default {
+    position: relative;
+  }
+  .toolbar-fixed .main-container,
+  .toolbar-vertical .main-container {
+    padding-top: 0;
+  }
+}

assets/css/ajax.css

+/**
+ * AJAX (throbber) styling.
+ */
+@-webkit-keyframes glyphicon-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+@keyframes glyphicon-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+.glyphicon-spin {
+  display: inline-block;
+  -webkit-animation: glyphicon-spin 1s infinite linear;
+          animation: glyphicon-spin 1s infinite linear;
+}
+
+a .glyphicon-spin {
+  display: inline-block;
+  text-decoration: none;
+}
+
+html.js .btn .ajax-throbber {
+  margin-left: .5em;
+  margin-right: -.25em;
+}
+
+html.js .input-group-addon .glyphicon {
+  color: #777777;
+  opacity: .5;
+  transition: 150ms color, 150ms opacity;
+}
+
+html.js .input-group-addon .glyphicon.glyphicon-spin {
+  opacity: 1;
+}
+
+html.js .ajax-new-content:empty {
+  display: none !important;
+}
+
+.form-type-managed-file label {
+  display: block;
+}
+
+.form-managed-file {
+  position: relative;
+}
+
+.form-managed-file .form-submit[data-drupal-selector*='upload-button'] {
+  font-size: 0;
+  color: transparent;
+}
+
+.form-managed-file .js-hide.form-submit[disabled] {
+  position: relative;
+  display: inline-block !important;
+  width: 40px;
+  height: 40px;
+  top: 0;
+  right: 0;
+  padding: 0;
+}
+
+.form-managed-file .js-hide.form-submit[disabled] .ajax-throbber {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
+.form-managed-file .js-hide.form-submit[disabled] .ajax-throbber:before {
+  top: 0;
+}

assets/css/alert.css

+.alert {
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 24px;
+  border: 1px solid transparent;
+}
+
+.alert * {
+  margin-top: 0;
+  color: inherit;
+}
+
+.alert > p,
+.alert > ul {
+  margin-bottom: 0;
+}
+
+.alert > p + p {
+  margin-top: 5px;
+}
+
+.alert-dismissible .close {
+  margin-top: -0.75rem;
+  margin-right: -1.25rem;
+  padding: 0.75rem 1.25rem;
+  color: inherit;
+}
+
+.alert em {
+  font-weight: 500;
+  font-style: normal;
+}
+
+.alert-sm {
+  padding: 0.25rem 0.75rem;
+}

assets/css/autocomplete.css

+.ui-autocomplete.ui-widget-content {
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
+  background: white;
+  padding: 0;
+  list-style: none;
+  max-height: 305px;
+  overflow-y: auto;
+}
+
+.ui-autocomplete.ui-widget-content.upward {
+  bottom: 38px;
+  top: auto !important;
+}
+
+.ui-autocomplete.ui-widget-content .ui-menu-item {
+  font-size: 0.875rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #555555;
+  cursor: pointer;
+}
+
+.ui-autocomplete.ui-widget-content .ui-menu-item > a {
+  padding: 7px 10px;
+  display: flex;
+}
+
+.ui-autocomplete.ui-widget-content .ui-menu-item .ui-state-active {
+  background-color: #e6e6e6;
+}
+
+.ui-autocomplete.ui-widget-content .ui-menu-item .mention__avatar {
+  flex: 0 0 24px;
+  max-width: 24px;
+  margin-right: 10px;
+}
+
+.ui-autocomplete.ui-widget-content .ui-menu-item .mention__name {
+  align-self: center;
+  flex-grow: 1;
+}
+
+.ui-autocomplete.ui-widget-content .ui-menu-item:hover {
+  background: #e6e6e6;
+  border: 0;
+}
+
+.ui-autocomplete.ui-widget-content::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #f7f7f7;
+}
+
+.ui-autocomplete.ui-widget-content::-webkit-scrollbar {
+  width: 12px;
+  background-color: #f7f7f7;
+}
+
+.ui-autocomplete.ui-widget-content::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #777777;
+}
+
+.ui-autocomplete {
+  margin-top: -1px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.ui-front {
+  z-index: 1060;
+}
+
+.ui-widget-header {
+  font-weight: 700;
+}
+
+.ui-menu .ui-state-focus,
+.ui-menu .ui-state-active {
+  margin: 0;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited {
+  color: #555555;
+}
+
+.ui-autocomplete .ui-state-hover,
+.ui-autocomplete .ui-state-focus {
+  background: #e6e6e6;
+}
+
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited,
+.ui-state-focus a,
+.ui-state-focus a:hover,
+.ui-state-focus a:link,
+.ui-state-focus a:visited {
+  color: #212121;
+  text-decoration: none;
+}
+
+.ui-autocomplete .ui-state-active a,
+.ui-autocomplete .ui-state-active a:link,
+.ui-autocomplete .ui-state-active a:visited {
+  color: #212121;
+  text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+  border: 1px solid #e6e6e6;
+  background: #e6e6e6;
+  color: #363636;
+}
+
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+  color: #363636;
+}
+
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+  border: 1px solid #cd0a0a;
+  background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
+  color: #cd0a0a;
+}
+
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+  color: #cd0a0a;
+}
+
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+  color: #cd0a0a;
+}
+
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+  font-weight: bold;
+}
+
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+  opacity: .7;
+  filter: Alpha(Opacity=70);
+  /* support: IE8 */
+  font-weight: normal;
+}
+
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+  opacity: .35;
+  filter: Alpha(Opacity=35);
+  /* support: IE8 */
+  background-image: none;
+}
+
+.ui-state-disabled .ui-icon {
+  filter: Alpha(Opacity=35);
+  /* support: IE8 - See #6059 */
+}
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+  display: none;
+}
+
+.ui-helper-hidden-accessible {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.ui-helper-reset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  line-height: 1.3;
+  text-decoration: none;
+  font-size: 100%;
+  list-style: none;
+}
+
+.ui-helper-clearfix {
+  min-height: 0;
+  /* support: IE7 */
+}
+
+.ui-helper-zfix {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  opacity: 0;
+  filter: Alpha(Opacity=0);
+  /* support: IE8 */
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+  cursor: default !important;
+}
+
+/* Misc visuals
+----------------------------------*/
+/* Overlays */
+.ui-widget-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

assets/css/badge.css

+.badge {
+  display: inline-block;
+  margin-bottom: 3px;
+  margin-right: 3px;
+  padding: 4px 0.4em;
+  font-size: 75%;
+  font-weight: 500;
+  line-height: 1;
+  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: