From eb383222e80b117381793b68a8171ddfe25dece2 Mon Sep 17 00:00:00 2001 From: tijsklaren Date: Fri, 23 Dec 2022 23:31:50 +0100 Subject: [PATCH] Populated the styling sheets --- src/css/colors.css | 10 ++++++++ src/css/colors.css.map | 9 +++++++ src/css/colors.scss | 15 ++++++++++- src/css/forms.css | 30 ++++++++++++++++++++++ src/css/forms.css.map | 9 +++++++ src/css/forms.scss | 53 ++++++++++++++++++++++++++++++++++++++- src/css/intermate.css | 3 +++ src/css/intermate.css.map | 9 +++++++ src/css/intermate.scss | 6 ++++- 9 files changed, 141 insertions(+), 3 deletions(-) create mode 100644 src/css/colors.css create mode 100644 src/css/colors.css.map create mode 100644 src/css/forms.css create mode 100644 src/css/forms.css.map create mode 100644 src/css/intermate.css create mode 100644 src/css/intermate.css.map diff --git a/src/css/colors.css b/src/css/colors.css new file mode 100644 index 0000000..eff3220 --- /dev/null +++ b/src/css/colors.css @@ -0,0 +1,10 @@ +:root { + --intermate-yellow: #f8a90c; + --intermate-yellow-hover: #b87e08; + --standard-blue: #3f51b5; + --standard-blue-hover: #1d34b1; + --soft-green: #63E063; + --soft-red: #f56565; + --background-white: #f4f4f4; +} +/*# sourceMappingURL=colors.css.map */ \ No newline at end of file diff --git a/src/css/colors.css.map b/src/css/colors.css.map new file mode 100644 index 0000000..f312a8a --- /dev/null +++ b/src/css/colors.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAEA,AAAA,KAAK,CAAA;EACD,kBAAkB,CAAA,cAAC;EACnB,wBAAwB,CAAA,QAAC;EAEzB,eAAe,CAAA,iBAAC;EAChB,qBAAqB,CAAA,WAAC;EAEtB,YAAY,CAAA,oBAAC;EACb,UAAU,CAAA,sBAAC;EAEX,kBAAkB,CAAA,cAAC;CACtB", + "sources": [ + "colors.scss" + ], + "names": [], + "file": "colors.css" +} \ No newline at end of file diff --git a/src/css/colors.scss b/src/css/colors.scss index f1fe988..f7f3b5e 100644 --- a/src/css/colors.scss +++ b/src/css/colors.scss @@ -1 +1,14 @@ -// This file contains the standardized colors! \ No newline at end of file +// This file contains the standardized colors! + +:root{ + --intermate-yellow: #f8a90c; + --intermate-yellow-hover: #b87e08; + + --standard-blue: #3f51b5; + --standard-blue-hover: #1d34b1; + + --soft-green: #63E063; + --soft-red: #f56565; + + --background-white: #f4f4f4; +} \ No newline at end of file diff --git a/src/css/forms.css b/src/css/forms.css new file mode 100644 index 0000000..6cc5c9d --- /dev/null +++ b/src/css/forms.css @@ -0,0 +1,30 @@ +input, button, textarea, select, .button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + border: 1px solid; + border-radius: 5px; + padding: 10px 10px; + margin: 10px 0; + color: black; + text-decoration: none; + background: white; +} + +inputbutton, inputinput[type='submit'], inputinput[type='button'], input.button, buttonbutton, buttoninput[type='submit'], buttoninput[type='button'], button.button, textareabutton, textareainput[type='submit'], textareainput[type='button'], textarea.button, selectbutton, selectinput[type='submit'], selectinput[type='button'], select.button, .buttonbutton, .buttoninput[type='submit'], .buttoninput[type='button'], .button.button { + text-align: center; + background-color: var(--intermate-yellow); + color: white; + font-weight: bold; + cursor: pointer; +} + +inputbutton.decline, inputinput[type='submit'].decline, inputinput[type='button'].decline, input.button.decline, buttonbutton.decline, buttoninput[type='submit'].decline, buttoninput[type='button'].decline, button.button.decline, textareabutton.decline, textareainput[type='submit'].decline, textareainput[type='button'].decline, textarea.button.decline, selectbutton.decline, selectinput[type='submit'].decline, selectinput[type='button'].decline, select.button.decline, .buttonbutton.decline, .buttoninput[type='submit'].decline, .buttoninput[type='button'].decline, .button.button.decline { + background-color: var(--soft-red); +} + +inputbutton.accept, inputinput[type='submit'].accept, inputinput[type='button'].accept, input.button.accept, buttonbutton.accept, buttoninput[type='submit'].accept, buttoninput[type='button'].accept, button.button.accept, textareabutton.accept, textareainput[type='submit'].accept, textareainput[type='button'].accept, textarea.button.accept, selectbutton.accept, selectinput[type='submit'].accept, selectinput[type='button'].accept, select.button.accept, .buttonbutton.accept, .buttoninput[type='submit'].accept, .buttoninput[type='button'].accept, .button.button.accept { + background-color: var(--soft-green); +} +/*# sourceMappingURL=forms.css.map */ \ No newline at end of file diff --git a/src/css/forms.css.map b/src/css/forms.css.map new file mode 100644 index 0000000..bfce055 --- /dev/null +++ b/src/css/forms.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "forms.scss" + ], + "names": [], + "file": "forms.css" +} \ No newline at end of file diff --git a/src/css/forms.scss b/src/css/forms.scss index 5f867ce..2462375 100644 --- a/src/css/forms.scss +++ b/src/css/forms.scss @@ -1 +1,52 @@ -// This file formats the forms and inputfields \ No newline at end of file +// This file formats the forms and inputfields + +input, button, textarea, select, .button{ + // We don't want the stupid browser appearance + appearance: none; + + // Style the border + border: none; + border: 1px solid; + border-radius: 5px; + + // Make it a bit bigger + padding: 10px 10px; + + // And give it some space + margin: 10px 0; + + color: black; + text-decoration: none; + + // White background looks nice and distinct + // (at least when using the slightly off-white background-white as background for the overall page) + background: white; + + // If it is a button + &button, &input[type='submit'], &input[type='button'], &.button{ + // Align text in the center + text-align: center; + + // The standard background color is intermate yellos + background-color: var(--intermate-yellow); + + // White looks good on intermate yellow + color: white; + + // We should be able to see it, so let's make the text bold + font-weight: bold; + + // When we hover over a buttton, we should see a pointer + cursor: pointer; + + // Here we give the buttons a different background color + // For example when you use it as a decline or accept button + &.decline{ + background-color: var(--soft-red); + } + + &.accept{ + background-color: var(--soft-green); + } + } +} \ No newline at end of file diff --git a/src/css/intermate.css b/src/css/intermate.css new file mode 100644 index 0000000..0dd14c3 --- /dev/null +++ b/src/css/intermate.css @@ -0,0 +1,3 @@ +@use 'colors.scss'; +@use 'forms.scss'; +/*# sourceMappingURL=intermate.css.map */ \ No newline at end of file diff --git a/src/css/intermate.css.map b/src/css/intermate.css.map new file mode 100644 index 0000000..76ab3ab --- /dev/null +++ b/src/css/intermate.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAGA,IAAI,CAAJ,aAAI;AACJ,IAAI,CAAJ,YAAI", + "sources": [ + "intermate.scss" + ], + "names": [], + "file": "intermate.css" +} \ No newline at end of file diff --git a/src/css/intermate.scss b/src/css/intermate.scss index 07add03..56147bf 100644 --- a/src/css/intermate.scss +++ b/src/css/intermate.scss @@ -1 +1,5 @@ -// This file combines the other stylesheets \ No newline at end of file +// This file combines the other stylesheets + +// This basically just inserts the other files here +@use 'colors.scss'; +@use 'forms.scss'; \ No newline at end of file