From c97a75769100af1b1cdfceaf4fbd62a32168aabf Mon Sep 17 00:00:00 2001 From: reverend Date: Fri, 31 Jul 2020 22:22:17 +0200 Subject: [PATCH] Several Form elements --- components/01_Atoms/_atoms.scss | 5 +++- components/01_Atoms/button/_button.scss | 13 +++++++++ components/01_Atoms/button/button.config.json | 3 +++ components/01_Atoms/button/button.hbs | 1 + components/01_Atoms/checkbox/_checkbox.scss | 13 +++++++++ .../01_Atoms/checkbox/checkbox.config.json | 3 +++ components/01_Atoms/checkbox/checkbox.hbs | 3 +++ components/01_Atoms/textField/_textField.scss | 10 +++++++ .../01_Atoms/textField/textField.config.json | 17 ++++++++++++ components/01_Atoms/textField/textField.hbs | 3 +++ public/components.css | 27 +++++++++++++++++++ 11 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 components/01_Atoms/button/_button.scss create mode 100644 components/01_Atoms/button/button.config.json create mode 100644 components/01_Atoms/button/button.hbs create mode 100644 components/01_Atoms/checkbox/_checkbox.scss create mode 100644 components/01_Atoms/checkbox/checkbox.config.json create mode 100644 components/01_Atoms/checkbox/checkbox.hbs create mode 100644 components/01_Atoms/textField/_textField.scss create mode 100644 components/01_Atoms/textField/textField.config.json create mode 100644 components/01_Atoms/textField/textField.hbs diff --git a/components/01_Atoms/_atoms.scss b/components/01_Atoms/_atoms.scss index c295569..47f1ace 100644 --- a/components/01_Atoms/_atoms.scss +++ b/components/01_Atoms/_atoms.scss @@ -1,4 +1,7 @@ @import 'link/link'; @import 'headline/headline'; @import 'text/text'; -@import 'icon/icon'; \ No newline at end of file +@import 'icon/icon'; +@import 'textField/textField'; +@import 'button/button'; +@import 'checkbox/checkbox'; \ No newline at end of file diff --git a/components/01_Atoms/button/_button.scss b/components/01_Atoms/button/_button.scss new file mode 100644 index 0000000..cb64ad2 --- /dev/null +++ b/components/01_Atoms/button/_button.scss @@ -0,0 +1,13 @@ +.LP-Button{ + background-color: $-secondary-accent-color; + color: $-secondary-color; + border: none; + padding: 8px 14px; + border-radius: 2px; + font-weight: bold; + + &:active { + background-color: $-primary-accent-color; + color: $-secondary-accent-color; + } +} \ No newline at end of file diff --git a/components/01_Atoms/button/button.config.json b/components/01_Atoms/button/button.config.json new file mode 100644 index 0000000..4eb7c3f --- /dev/null +++ b/components/01_Atoms/button/button.config.json @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file diff --git a/components/01_Atoms/button/button.hbs b/components/01_Atoms/button/button.hbs new file mode 100644 index 0000000..be4303f --- /dev/null +++ b/components/01_Atoms/button/button.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/01_Atoms/checkbox/_checkbox.scss b/components/01_Atoms/checkbox/_checkbox.scss new file mode 100644 index 0000000..4b1fe6f --- /dev/null +++ b/components/01_Atoms/checkbox/_checkbox.scss @@ -0,0 +1,13 @@ +.LP-Form{ + .LP-Form__Checkbox{ + display: none; + } + + .LP-Form__CheckBox__CheckMark{ + height: 1em; + width: 1em; + border: 1px solid black; + padding: 0 calc(.5em + 2px); + margin-right: .7em; + } +} \ No newline at end of file diff --git a/components/01_Atoms/checkbox/checkbox.config.json b/components/01_Atoms/checkbox/checkbox.config.json new file mode 100644 index 0000000..4eb7c3f --- /dev/null +++ b/components/01_Atoms/checkbox/checkbox.config.json @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file diff --git a/components/01_Atoms/checkbox/checkbox.hbs b/components/01_Atoms/checkbox/checkbox.hbs new file mode 100644 index 0000000..bf3543b --- /dev/null +++ b/components/01_Atoms/checkbox/checkbox.hbs @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/components/01_Atoms/textField/_textField.scss b/components/01_Atoms/textField/_textField.scss new file mode 100644 index 0000000..e6a4ed6 --- /dev/null +++ b/components/01_Atoms/textField/_textField.scss @@ -0,0 +1,10 @@ +.LP-Form{ + .LP-Form__Input--text{ + border: none; + border-bottom: 1px solid $-secondary-accent-color; + + &:active, &:focus{ + border-bottom: 1px solid $-primary-accent-color; + } + } +} \ No newline at end of file diff --git a/components/01_Atoms/textField/textField.config.json b/components/01_Atoms/textField/textField.config.json new file mode 100644 index 0000000..992c4a4 --- /dev/null +++ b/components/01_Atoms/textField/textField.config.json @@ -0,0 +1,17 @@ +{ + "title": "TextField", + "variants": [ + { + "name": "default", + "context": { + "type": "text" + } + }, + { + "name": "Password", + "context": { + "type": "password" + } + } + ] +} \ No newline at end of file diff --git a/components/01_Atoms/textField/textField.hbs b/components/01_Atoms/textField/textField.hbs new file mode 100644 index 0000000..45df1f6 --- /dev/null +++ b/components/01_Atoms/textField/textField.hbs @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/public/components.css b/public/components.css index 354fccb..22120f0 100644 --- a/public/components.css +++ b/public/components.css @@ -45,6 +45,33 @@ .LP-Icon__List .LP-Icon__Item { padding: 0 3px; } +.LP-Form .LP-Form__Input--text { + border: none; + border-bottom: 1px solid #C09F80; } + .LP-Form .LP-Form__Input--text:active, .LP-Form .LP-Form__Input--text:focus { + border-bottom: 1px solid #76323F; } + +.LP-Button { + background-color: #C09F80; + color: #565656; + border: none; + padding: 8px 14px; + border-radius: 2px; + font-weight: bold; } + .LP-Button:active { + background-color: #76323F; + color: #C09F80; } + +.LP-Form .LP-Form__Checkbox { + display: none; } + +.LP-Form .LP-Form__CheckBox__CheckMark { + height: 1em; + width: 1em; + border: 1px solid black; + padding: 0 calc(.5em + 2px); + margin-right: .7em; } + .LP-Logo { max-width: 100%; max-height: 100%;