diff --git a/components/01_Atoms/_atoms.scss b/components/01_Atoms/_atoms.scss index c295569..8141cf9 100644 --- a/components/01_Atoms/_atoms.scss +++ b/components/01_Atoms/_atoms.scss @@ -1,4 +1,5 @@ @import 'link/link'; @import 'headline/headline'; @import 'text/text'; -@import 'icon/icon'; \ No newline at end of file +@import 'icon/icon'; +@import 'input/input'; \ No newline at end of file diff --git a/components/01_Atoms/input/_input.scss b/components/01_Atoms/input/_input.scss new file mode 100644 index 0000000..e6dcf2e --- /dev/null +++ b/components/01_Atoms/input/_input.scss @@ -0,0 +1,67 @@ +.LP-Input{ + $-margin-bottom: 30px; + display: flex; + flex-direction: column; + margin-bottom: -$-margin-bottom; + padding: 10px 0; + + .LP-Input__Field{ + border: none; + border-bottom: 1px solid $-secondary-color; + padding: 8px; + margin-bottom: $-margin-bottom; + + &:focus, &:active{ + margin-bottom: $-margin-bottom - 1px; + border-bottom: 2px solid $-primary-accent-color; + background-color: $-secondary-background-color; + border-radius: 3px 3px 0 0; + } + } + .LP-Input__Label{ + font-family: $-primary-sans-serif-font; + font-size: 18px; + } + .LP-Input__Message{ + font-family: $-primary-sans-serif-font; + font-style: italic; + font-size: 13px; + padding: 3px; + position: relative; + top: -$-margin-bottom; + + &:before{ + content: '* '; + } + } + + &--error{ + .LP-Input__Field{ + margin-bottom: 25px; + border-bottom: 2px solid $-primary-accent-color; + margin-bottom: $-margin-bottom - 1px; + } + + .LP-Input__Message{ + color: $-primary-accent-color; + } + } +} + +@media(max-width: $-viewport-small){ + .LP-Input{ + .LP-Input__Label{ + font-family: $-primary-sans-serif-font; + font-size: 2.5vw; + } + } +} + +@media(max-width: $-viewport-extra-small){ + .LP-Input{ + .LP-Input__Label{ + font-family: $-primary-sans-serif-font; + font-size: 18px; + } + } +} \ No newline at end of file diff --git a/components/01_Atoms/input/input.config.json b/components/01_Atoms/input/input.config.json new file mode 100644 index 0000000..544b7b4 --- /dev/null +++ b/components/01_Atoms/input/input.config.json @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file diff --git a/components/01_Atoms/input/input.hbs b/components/01_Atoms/input/input.hbs new file mode 100644 index 0000000..13f2b1b --- /dev/null +++ b/components/01_Atoms/input/input.hbs @@ -0,0 +1,5 @@ +
+ + + Field is required +
\ No newline at end of file