Develop

.gitignore

@@ -1 +1,6 @@
 /vendor/
+/node_modules/
+package-lock.json
+composer.lock
+npm-debug.log
+css/style.css.map

README.md

@@ -1 +1,42 @@
-# funkywave_theme
+# Funkywave theme
+
+Drupal 8 theme with Sass and Gulp task runner.
+
+## Development setup
+
+Requirements:
+- [Node.js](https://nodejs.org/en/): `>= 8`
+- Gulp 
+
+#### How to install node.js?
+
+To find out if node is allready installed, open a terminal window and type:
+```
+node -v
+```
+If you see a see a version >=8, you are ok. If not install or update your node. The following article is helpfull.
+https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04
+
+#### Install gulp globally
+
+```
+sudo npm install -g gulp
+```
+
+#### Install the node dependencies:
+Make sure you are in the theme folder before you enter the following command
+All packages in package.json will be installed.
+
+```
+$ npm install
+```
+
+#### Start watching your Sass and JS files:
+
+```
+$ gulp
+```
+
+Watch your terminal to see what happens if you change sass and js files.
+
+# funkywave_theme

composer.json

@@ -7,5 +7,8 @@
             "email": "peter.neyens@telenet.be"
         }
     ],
-    "require": {}
+    "require": {
+    	"drupal/group": "^1.0",
+    	"drupal/components": "^1.0"
+    }
 }

css/autocomplete.css

@@ -0,0 +1,12 @@
+/**
+ * @file
+ * Table drag behavior.
+ *
+ * @see tabledrag.js
+ */
+.field-multiple-drag,
+.tabledrag-hide,
+.tabledrag-toggle-weight-wrapper,
+a.tabledrag-handle .handle {
+    display: none;
+}

css/override.css

@@ -0,0 +1,297 @@
+/**
+ * @file
+ * Seven styles for Tables.
+ */
+
+table {
+  width: 100%;
+  margin: 0 0 10px;
+}
+
+/* custom */
+
+table h4 {
+  margin: 0;
+  padding: 0;
+}
+
+button.link {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  margin-bottom: 0px;
+  padding: 0;
+  font-size: 1em;
+}
+
+caption {
+  text-align: left; /* LTR */
+}
+[dir="rtl"] caption {
+  text-align: right;
+}
+th {
+  text-align: left; /* LTR */
+  padding: 10px 12px;
+}
+[dir="rtl"] th {
+  text-align: right;
+}
+thead th {
+  background: #26252B;
+  border: solid #bfbfba;
+  border-width: 1px 0;
+  color: #ffffff;
+  text-transform: uppercase;
+}
+
+fieldset thead th {
+  background: none;
+  color: #333333;
+}
+
+tr {
+  border-bottom: 1px solid #e6e4df;
+  padding: 0.1em 0.6em;
+}
+thead > tr {
+  border-bottom: 1px solid #000;
+}
+tbody tr:hover,
+tbody tr:focus {
+  background: #f7fcff;
+}
+/* See colors.css */
+tbody tr.color-warning:hover,
+tbody tr.color-warning:focus {
+  background: #fdf8ed;
+}
+tbody tr.color-error:hover,
+tbody tr.color-error:focus {
+  background: #fcf4f2;
+}
+
+table.no-highlight tr.selected td {
+  background: transparent;
+}
+
+td,
+th {
+  vertical-align: middle;
+}
+td {
+  padding: 10px 12px;
+  text-align: left; /* LTR */
+}
+[dir="rtl"] td {
+  text-align: right;
+}
+th > a {
+  position: relative;
+  display: block;
+}
+
+/* 1. Must match negative bottom padding of the parent <th> */
+th > a:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: -10px; /* 1. */
+  left: 0;
+  right: 0;
+  border-bottom: 2px solid transparent;
+  -webkit-transition: all 0.1s;
+  transition: all 0.1s;
+}
+th.is-active > a {
+  color: #004875;
+}
+th.is-active img {
+  position: absolute;
+  right: 0; /* LTR */
+  top: 50%;
+}
+[dir="rtl"] th.is-active img {
+  right: auto;
+  left: 0;
+}
+th.is-active > a:after {
+  border-bottom-color: #004875;
+}
+th > a:hover,
+th > a:focus,
+th.is-active > a:hover,
+th.is-active > a:focus {
+  color: #008ee6;
+  text-decoration: none;
+}
+th > a:hover:after,
+th > a:focus:after,
+th.is-active > a:hover:after,
+th.is-active > a:focus:after {
+  border-bottom-color: #008ee6;
+}
+td .item-list ul {
+  margin: 0;
+}
+/* This is required to win over specificity of [dir="rtl"] .item-list ul */
+[dir="rtl"] td .item-list ul {
+  margin: 0;
+}
+td.is-active {
+  background: none;
+}
+
+/* Force browsers to calculate the width of a 'select all' <th> element. */
+th.select-all {
+  width: 1px;
+}
+
+/**
+ * Captions.
+ */
+.caption {
+  margin-bottom: 1.2em;
+}
+
+/**
+ * Responsive tables.
+ */
+@media screen and (max-width: 37.5em) { /* 600px */
+  th.priority-low,
+  td.priority-low,
+  th.priority-medium,
+  td.priority-medium {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 60em) { /* 920px */
+  th.priority-low,
+  td.priority-low {
+    display: none;
+  }
+}
+
+/* forms */
+
+fieldset:not(.fieldgroup) {
+    display: table-cell;
+}
+fieldset:not(.fieldgroup) {
+  border-radius: 2px;
+  margin: 1em 0;
+  padding: 35px 0 0 0;
+  min-width: 0;
+  position: relative;
+}
+
+fieldset:not(.fieldgroup) > legend {
+  font-size: 1em;
+  font-weight: bold;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 0;
+}
+
+legend {
+  border: 0;
+  padding: 0;
+}
+
+fieldset > legend {
+  padding-inline-start: 2px;
+  padding-inline-end: 2px;
+  inline-size: -moz-fit-content;
+}
+
+legend {
+  display: block;
+}
+
+.fieldset-legend {
+  display: inline-block;
+}
+
+/* required form field theming */
+
+.form-required::after {
+    background-size: 7px 7px;
+    width: 7px;
+    height: 7px;
+}
+.form-required::after {
+    content: '';
+    vertical-align: super;
+    display: inline-block;
+    background-image: url(../images/required.svg);
+    background-repeat: no-repeat;
+    background-size: 6px 6px;
+    width: 6px;
+    height: 6px;
+    margin: 0 0.3em;
+}
+
+.description {
+  color: #777777;
+  border-left: 5px solid #ccc;
+  padding-left: 20px;
+  font-size: 14px;
+  margin: 20px 0 20px 0;
+}
+
+a.tabledrag-handle {
+  box-shadow: none;
+  padding: 0 5px 0 5px;
+}
+
+a.tabledrag-handle .handle {
+  background-position: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+
+}
+
+h4.label {
+  display: inline;
+}
+
+.field-multiple-table .form-wrapper,
+.field--name-field-ngf-cover-image .js-form-item.form-wrapper .form-wrapper,
+.details-wrapper .form-wrapper,
+details.form-wrapper {
+  padding: 0;
+}
+
+/* border to fix */
+
+fieldset {
+  border: none;
+}
+
+
+.field-multiple-table .paragraphs-subform {
+  padding: 0 15px 0 15px;
+}
+
+.field-multiple-table fieldset.form-wrapper {
+  padding-top: 50px;
+}
+
+.container-inline.js-form-wrapper {
+  padding-bottom: 0;
+}
+
+tr.draggable.even {
+  background: #f5f5f2;
+}
+
+.ui-widget.ui-widget-content.ui-autocomplete {
+  border: 1px solid #cccccc;
+}
+