Merge pull request #19 from ministryofjustice/add-sass

Add sass via npm to compile stylesheets

.gitignore

@@ -163,4 +163,6 @@ cython_debug/
 #static files dirs
 staticfiles/
 
-local.py
+local.py
+
+node_modules

README.md

@@ -1,14 +1,12 @@
 ## Quick start
 
-Project contains a poetry dependency file for installation with `poetry install`
-To run `poetry run python manage.py runserver`
+You will need npm (for javascript dependencies) and poetry (for python dependencies).
 
-## Configuration
+1. Run `poetry install` to install python dependencies
+2. Set environment variables CATALOGUE_URL and CATALOGUE_TOKEN (TODO: add dotenv support)
+3. Run `poetry run python manage.py runserver`
 
-The following should be set using environment variables:
-
-- CATALOGUE_URL
-- CATALOGUE_TOKEN
+Run `npm install` and then `npm run sass` to compile the stylesheets.
 
 ## Current Endpoints
 

package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "@ministryofjustice/frontend": "^2.0.1",
+    "govuk-frontend": "^5.0.0",
+    "sass": "^1.70.0"
+  },
+  "scripts": {
+    "sass": "sass --load-path=. scss:static/assets/css"
+  }
+}

scss/base.scss

@@ -0,0 +1,8 @@
+$govuk-assets-path: '/static/';
+$moj-assets-path: '/static';
+
+// Removes need to put classes on all elements
+$govuk-global-styles: true;
+
+@import "node_modules/govuk-frontend/dist/govuk/all";
+@import "node_modules/@ministryofjustice/frontend/moj/all";

scss/search.scss

@@ -0,0 +1,31 @@
+.search-container {
+    display: flex;
+}
+.search-icon {
+    height: 100%;
+}
+
+.search-button {
+    background: #1d70b8;
+    border: 0;
+    color: #fff;
+    cursor: pointer;
+    height: 40px;
+    margin-bottom: 0;
+    padding: 0;
+    width: 40px;
+}
+
+.govuk-input.search-input {
+    border-right-width: 0;
+}
+
+.search-button:focus {
+    box-shadow: inset 0 0 0 4px #0b0c0c;
+    outline: 3px solid #fd0
+}
+
+.search-input:focus {
+    border-right-width: 2px;
+    z-index: 1
+}