Feature ngm theme

app/views/styles/theme-ngm/_form-grid.scss

@@ -0,0 +1,5 @@
+@import "../../../../node_modules/enketo-core/src/sass/core/main";
+@import "../../../../node_modules/enketo-core/src/sass/core/responsive";
+@import "../component/widgets";
+@import "../../../../node_modules/enketo-core/src/sass/core/slider";
+@import "../../../../node_modules/enketo-core/src/sass/grid/main";

app/views/styles/theme-ngm/_mixins.scss

@@ -0,0 +1,26 @@
+@mixin font-normal {
+    font-family: 'Roboto', Arial, sans-serif;
+    font-weight: 100;
+    font-style: normal;
+}
+
+@mixin font-bold {
+    font-family: 'Roboto', Arial, sans-serif;
+    font-weight: 200;
+    font-style: normal;
+}
+
+@mixin translate($x, $y) {
+    -webkit-transform: translate($x, $y);
+    -moz-transform: translate($x, $y);
+    -o-transform: translate($x, $y);
+    transform: translate($x, $y);
+}
+
+@mixin loader-image($loader-size) {
+    //background: url("/images/fading-loader.svg") 50% 50% no-repeat;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMTEwcHgiIGhlaWdodD0iMTEwcHgiPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUgNSkiIGZpbGw9IiNGMTVBMjkiPgogICAgPGNpcmNsZSBjeD0iNTAiIGN5PSIwIiByPSI1IiBzdHlsZT0ib3BhY2l0eTowLjMiPgogICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVUeXBlPSJDU1MiIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjMiIGR1cj0iMS4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwcyIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iNzUiIGN5PSI2LjY5ODcyOTgiIHI9IjUiIHN0eWxlPSJvcGFjaXR5OjAuMyI+CiAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZVR5cGU9IkNTUyIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMyIgZHVyPSIxLjJzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49IjAuMXMiIC8+CiAgICA8L2NpcmNsZT4KICAgIDxjaXJjbGUgY3g9IjkzLjMwMTI3MDIiIGN5PSIyNSIgcj0iNSIgc3R5bGU9Im9wYWNpdHk6MC4zIj4KICAgICAgPGFuaW1hdGUgYXR0cmlidXRlVHlwZT0iQ1NTIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4zIiBkdXI9IjEuMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMC4ycyIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iMTAwIiBjeT0iNTAiIHI9IjUiIHN0eWxlPSJvcGFjaXR5OjAuMyI+CiAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZVR5cGU9IkNTUyIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMyIgZHVyPSIxLjJzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49IjAuM3MiIC8+CiAgICA8L2NpcmNsZT4KICAgIDxjaXJjbGUgY3g9IjkzLjMwMTI3MDIiIGN5PSI3NSIgcj0iNSIgc3R5bGU9Im9wYWNpdHk6MC4zIj4KICAgICAgPGFuaW1hdGUgYXR0cmlidXRlVHlwZT0iQ1NTIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4zIiBkdXI9IjEuMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMC40cyIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iNzUiIGN5PSI5My4zMDEyNzAyIiByPSI1IiBzdHlsZT0ib3BhY2l0eTowLjMiPgogICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVUeXBlPSJDU1MiIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjMiIGR1cj0iMS4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwLjVzIiAvPgogICAgPC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjEwMCIgcj0iNSIgc3R5bGU9Im9wYWNpdHk6MC4zIj4KICAgICAgPGFuaW1hdGUgYXR0cmlidXRlVHlwZT0iQ1NTIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4zIiBkdXI9IjEuMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMC42cyIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iMjUiIGN5PSI5My4zMDEyNzAyIiByPSI1IiBzdHlsZT0ib3BhY2l0eTowLjMiPgogICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVUeXBlPSJDU1MiIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjMiIGR1cj0iMS4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwLjdzIiAvPgogICAgPC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI2LjY5ODcyOTgiIGN5PSI3NSIgcj0iNSIgc3R5bGU9Im9wYWNpdHk6MC4zIj4KICAgICAgPGFuaW1hdGUgYXR0cmlidXRlVHlwZT0iQ1NTIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4zIiBkdXI9IjEuMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMC44cyIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iMCIgY3k9IjUwIiByPSI1IiBzdHlsZT0ib3BhY2l0eTowLjMiPgogICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVUeXBlPSJDU1MiIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjMiIGR1cj0iMS4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwLjlzIiAvPgogICAgPC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI2LjY5ODcyOTgiIGN5PSIyNSIgcj0iNSIgc3R5bGU9Im9wYWNpdHk6MC4zIj4KICAgICAgPGFuaW1hdGUgYXR0cmlidXRlVHlwZT0iQ1NTIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4zIiBkdXI9IjEuMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMXMiIC8+CiAgICA8L2NpcmNsZT4KICAgIDxjaXJjbGUgY3g9IjI1IiBjeT0iNi42OTg3Mjk4IiByPSI1IiBzdHlsZT0ib3BhY2l0eTowLjMiPgogICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVUeXBlPSJDU1MiIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjMiIGR1cj0iMS4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIxLjFzIiAvPgogICAgPC9jaXJjbGU+CiAgPC9nPgo8L3N2Zz4K);
+    background-size: $loader-size $loader-size;
+    height: $loader-size;
+    width: $loader-size;
+}

app/views/styles/theme-ngm/_roboto.scss

@@ -0,0 +1,42 @@
+@font-face {
+    font-family: "Roboto";
+    src: local(Roboto Thin),
+        url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");
+    font-weight: 200;
+}
+@font-face {
+    font-family: "Roboto";
+    src: local(Roboto Light),
+        url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Light.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype");
+    font-weight: 300;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src:
+        local(Roboto Regular),
+        url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype");
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype");
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype");
+    font-weight: 700;
+}

app/views/styles/theme-ngm/_style.scss

@@ -0,0 +1,41 @@
+/***************
+  HTML Styles
+***************/
+
+.or h3 {
+  border-bottom: 1px solid #e0e0e0 !important;
+}
+
+.or h4 {
+  margin-bottom: 20px;
+  border-bottom: 1px solid #e0e0e0 !important;
+}
+
+.required-subtle {
+  top: 0px;
+  right: 5px;
+}
+
+.question .question-label {
+  color: #000000 !important; 
+}
+
+.focus > .question-label {
+  font-weight: 300 !important;
+  color: $input-highlight !important; 
+}
+
+input[type=text]:focus:not([readonly]),
+input[type=password]:focus:not([readonly]),
+input[type=email]:focus:not([readonly]),
+input[type=url]:focus:not([readonly]),
+input[type=time]:focus:not([readonly]),
+input[type=date]:focus:not([readonly]),
+input[type=datetime-local]:focus:not([readonly]),
+input[type=tel]:focus:not([readonly]),
+input[type=number]:focus:not([readonly]),
+input[type=search]:focus:not([readonly]),
+textarea.materialize-textarea:focus:not([readonly]) {
+  border-bottom: 1px solid $input-highlight !important;
+  box-shadow: 0 1px 0 0 $input-highlight !important;
+}

app/views/styles/theme-ngm/_variables.scss

@@ -0,0 +1,42 @@
+/** GRID THEME **/
+
+$font-size-base: 16px;
+$roboto-font-path: "/fonts/roboto/" !default;
+
+// colors
+$brand-primary-color: #ee6e73;
+$brand-secondary-color: none;
+$radiocheck-unchecked-color: #666666;
+$radiocheck-checked-color: #009688;
+$question-bg: white;
+$question-hover-bg: none;
+$question-focus-bg: none;
+$input-highlight: #009688;
+$input-bg: transparent;
+
+// grid
+$default-grid-width: 4;
+$max-columns: 10;
+$grid-border: none;
+
+// questions
+$question-margin: 0;
+$q-pad-top: 6px;
+$q-pad-right: 6px;
+$q-pad-bottom: 13px;
+$q-pad-left: 6px;
+$question-padding: $q-pad-top $q-pad-right $q-pad-bottom $q-pad-left;
+
+// notes
+$note-border-radius: 0;
+
+// general form elements
+$groupline: #bbbbbb;
+$line: 3px solid $groupline;
+$input-height: 34px;
+$input-min-width: 0.2 * 720px;
+$input-max-width: 80%;
+
+// reponsiveness
+$max-content-width: 1100px;
+$main-breakpoint: $max-content-width;

app/views/styles/theme-ngm/theme-ngm.print.scss

@@ -0,0 +1 @@
+@import "../../../../node_modules/enketo-core/src/sass/grid/grid-print";

app/views/styles/theme-ngm/theme-ngm.scss

@@ -0,0 +1,42 @@
+
+// variables
+@import "variables";
+@import "../../../../node_modules/enketo-core/src/sass/core/variables";
+
+// fonts
+@import "roboto";
+
+// mixins, in the right order
+@import "../../../../node_modules/enketo-core/src/sass/core/mixins";
+@import "../../../../node_modules/enketo-core/src/sass/formhub/mixins";
+@import "../../../../node_modules/enketo-core/src/sass/grid/mixins";
+@import "mixins";
+
+// reset
+@import "../../../../node_modules/enketo-core/src/sass/core/reset";
+
+// common styles
+@import "../component/common";
+
+// utilities
+@import "../../../../node_modules/enketo-core/src/sass/core/utilities";
+
+// icons
+@import "../component/icons";
+
+// buttons
+@import "../component/buttons";
+
+// layout
+@import "../../../../node_modules/enketo-core/src/sass/core/layout";
+@import "../../../../node_modules/enketo-core/src/sass/core/pages";
+
+// components
+@import "../component/side-slider";
+@import "form-grid";
+@import "../component/form_header";
+@import "../component/form_footer";
+
+
+// custom style overrides
+@import "style";