diff --git a/components/01_Atoms/button/_button.scss b/components/01_Atoms/button/_button.scss index d98a86e..a7a3b20 100644 --- a/components/01_Atoms/button/_button.scss +++ b/components/01_Atoms/button/_button.scss @@ -1,4 +1,4 @@ -.LP-Button{ +.LP-Button { background-color: $-light-brown; color: $-grey; border: none; @@ -6,16 +6,18 @@ border-radius: 2px; font-weight: bold; cursor: pointer; + white-space: nowrap; - &:active{ + &:active { background-color: $-wine-red; - color:$-almost-white; + color: $-almost-white; } - &--cancel{ + &--cancel { background-color: $-grey; color: $-almost-white; - &:active{ + + &:active { color: $-grey; background-color: $-almost-white; } diff --git a/components/01_Atoms/input/_input.scss b/components/01_Atoms/input/_input.scss index 30a0e99..d1ab74f 100644 --- a/components/01_Atoms/input/_input.scss +++ b/components/01_Atoms/input/_input.scss @@ -1,26 +1,45 @@ -.LP-Input{ +.LP-Input { $-margin-bottom: 30px; display: flex; flex-direction: column; margin-bottom: -$-margin-bottom; padding: 10px 0; - .LP-Input__Field{ + &--tagging { + + .LP-Button { + height: 53px; + } + + .LP-Input__Field { + min-height: 36px; + height: max-content; + font-family: $-primary-sans-serif-font; + font-size: 1em; + padding: 0; + padding-left: 8px; + } + } + + .LP-Input__Field { border: none; border-bottom: 1px solid $-grey; - padding: 8px 0; - margin-bottom: $-margin-bottom; - width: 100%; + padding: 8px 0; + margin-bottom: $-margin-bottom; + width: 100%; - &:focus, &:active, &:invalid{ + &:focus, + &:active, + &:invalid, + &--active { margin-bottom: $-margin-bottom - 1px; border-bottom: 2px solid $-wine-red; background-color: $-almost-white; border-radius: 3px 3px 0 0; box-shadow: none; } - - &[type=submit]{ + + &[type=submit] { background-color: $-light-brown; color: $-grey; border: none; @@ -29,64 +48,67 @@ font-weight: bold; cursor: pointer; - &:active{ + &:active { background-color: $-wine-red; - color:$-almost-white; + color: $-almost-white; } } } - .LP-Input__Label{ + .LP-Input__Label { font-family: $-primary-sans-serif-font; - font-size: 16px; - white-space: wrap; - overflow: hidden; + font-size: 16px; + white-space: wrap; + overflow: hidden; } - .LP-Input__Message{ + .LP-Input__Message { font-family: $-primary-sans-serif-font; font-style: italic; font-size: 13px; padding: 3px; position: relative; - top: -$-margin-bottom; - overflow: hidden; + top: -$-margin-bottom; + overflow: hidden; } - &--error{ - .LP-Input__Field{ + &--error { + .LP-Input__Field { margin-bottom: 25px; border-bottom: 2px solid $-wine-red; margin-bottom: $-margin-bottom - 1px; } - .LP-Input__Message{ + .LP-Input__Message { color: $-wine-red; } } - - &--disabled{ - .LP-Input__Field, .LP-Input__Field:disabled{ + + &--disabled { + + .LP-Input__Field, + .LP-Input__Field:disabled { background-color: transparent; border-bottom: 1px dashed $-grey; cursor: not-allowed; - - label + &{ + + label+& { color: red; } - &:focus, &:active{ + &:focus, + &:active { margin-bottom: $-margin-bottom; border-radius: 0; } - ~.LP-Input__Message{ + ~.LP-Input__Message { visibility: hidden; - } + } } - .LP-Input__Label{ + .LP-Input__Label { color: $-grey; } } diff --git a/components/01_Atoms/tag/_tag.scss b/components/01_Atoms/tag/_tag.scss index 249cb4a..011a2b1 100644 --- a/components/01_Atoms/tag/_tag.scss +++ b/components/01_Atoms/tag/_tag.scss @@ -1,10 +1,14 @@ -.LP-Tag{ +.LP-Tag { padding: 8px 14px; - background-color: #D7CEC7; + background-color: $-beige; border-radius: 2px; width: max-content; - .LP-Paragraph{ + &:hover { + background-color: #bdbdbd; + } + + .LP-Paragraph { padding: 0; margin: 0; font-family: $-primary-sans-serif-font; diff --git a/components/02_Molecules/tagList/_tagList.scss b/components/02_Molecules/tagList/_tagList.scss index f6a35d5..9afd62b 100644 --- a/components/02_Molecules/tagList/_tagList.scss +++ b/components/02_Molecules/tagList/_tagList.scss @@ -1,13 +1,13 @@ -.LP-TagList{ - .LP-TagList__List{ +.LP-TagList { + .LP-TagList__List { list-style-type: none; display: flex; flex-wrap: wrap; - padding:0; + padding: 0; margin: 0; - .LP-TagList__Item{ - margin: 6px; + .LP-TagList__Item { + margin: 3px; } } } \ No newline at end of file diff --git a/components/03_Organisms/form/_form.scss b/components/03_Organisms/form/_form.scss index fb46870..0884804 100644 --- a/components/03_Organisms/form/_form.scss +++ b/components/03_Organisms/form/_form.scss @@ -1,72 +1,90 @@ -.LP-Form{ +.LP-Form { - &--inline { - .LP-Form__Legend, .LP-Input__Label { - display: none; - } + &--tagging { + margin-top: 25px; - .LP-Form__Button { - @include RV-FlexRow__Item--fixedSize(max-content); - } - } + div.LP-Form__Composition { + gap: 25px; + } + } - &:not(.LP-Form--inline){ - .LP-Form__Composition { - @media(max-width: $-viewport-extra-small){ - @include RV-FlexRow__Container--multiRow; - } - } + &--inline { - .LP-Form__Button { - @include RV-FlexRow__Item--fixedSize(130px); + .LP-Form__Legend, + .LP-Input__Label { + display: none; + } - @media(max-width: $-viewport-extra-small) { - @include RV-FlexRow__Item--fixedSize(100%); - } - } - } + .LP-Form__Button { + @include RV-FlexRow__Item--fixedSize(max-content); + } - .LP-Form__Fieldset{ - @include RV-Reset; + fieldset.LP-Form__Fieldset { + max-width: unset; + } + + div.LP-Form__Composition { + padding: 0; + } + } + + &:not(.LP-Form--inline) { + .LP-Form__Composition { + @media(max-width: $-viewport-extra-small) { + @include RV-FlexRow__Container--multiRow; + } + } + + .LP-Form__Button { + @include RV-FlexRow__Item--fixedSize(130px); + + @media(max-width: $-viewport-extra-small) { + @include RV-FlexRow__Item--fixedSize(100%); + } + } + } + + .LP-Form__Fieldset { + @include RV-Reset; max-width: 1200px; - min-width: $-viewport-medium; - - @media(max-width: $-viewport-medium){ - min-width: unset; - } - } + min-width: $-viewport-medium; - .LP-Form__Legend{ - margin: 0; - padding: 0; - font-family: $-primary-sans-serif-font; - font-size: 21px; - } + @media(max-width: $-viewport-medium) { + min-width: unset; + } + } - .LP-Form__Composition{ - @include RV-FlexRow__Container; - @include RV-Spacing__Inner--small(''); + .LP-Form__Legend { + margin: 0; + padding: 0; + font-family: $-primary-sans-serif-font; + font-size: 21px; + } - &--breakable { - @media(max-width: $-viewport-small){ - @include RV-FlexRow__Container--multiRow; - } - } + .LP-Form__Composition { + @include RV-FlexRow__Container; + @include RV-Spacing__Inner--small(''); - &--buttons{ - justify-content: flex-end; - @include RV-Spacing__Inner--small; - } - } + &--breakable { + @media(max-width: $-viewport-small) { + @include RV-FlexRow__Container--multiRow; + } + } - .LP-Form__Field{ - @include RV-FlexRow__Item; - } - - .LP-Form__InfoText{ - .LP-Paragraph{ - font-family: $-primary-sans-serif-font; - color: $-grey; - } - } + &--buttons { + justify-content: flex-end; + @include RV-Spacing__Inner--small; + } + } + + .LP-Form__Field { + @include RV-FlexRow__Item; + } + + .LP-Form__InfoText { + .LP-Paragraph { + font-family: $-primary-sans-serif-font; + color: $-grey; + } + } } \ No newline at end of file diff --git a/components/_tagify.scss b/components/_tagify.scss new file mode 100644 index 0000000..a82098b --- /dev/null +++ b/components/_tagify.scss @@ -0,0 +1,80 @@ +.tagify { + @extend .LP-Input__Field; + + &+input, + &+textarea { + display: none; + } + + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; +} + +.tagify--focus { + @extend .LP-Input__Field--active +} + +.tagify__tag { + @extend .LP-Tag; + @extend .LP-TagList__Item; + background-color: #bdbdbd; + + &:hover { + background-color: #e9e9e9; + } + + display: inline-flex; + cursor: default; + transition: .13s ease-out; + height: max-content; + + align-items: center; + gap: 3px; +} + +.tagify__input { + flex-grow: 1; + display: inline-block; + min-width: 110px; + margin: 5px; + line-height: inherit; + position: relative; + white-space: pre-wrap; + margin-left: 15px; +} + +.tagify__tag__removeBtn { + order: 5; + cursor: pointer; + font: 1em/1 Arial; + transition: .2s ease-out; + color: $-wine-red; +} + +.tagify__tag__removeBtn::after { + content: "\00D7" +} + +.tagify__tag__removeBtn:hover { + color: $-grey; +} + +.tagify__tag__removeBtn:hover+div>span { + opacity: .5 +} + +.tagify__tag__removeBtn:hover+div::before { + box-shadow: 0 0 0 1.1em rgba(211, 148, 148, .3) inset !important; + box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset !important; + transition: .2s +} + +.tagify__tag--loading .tagify__tag__removeBtn { + display: none +} + +.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn { + display: none +} \ No newline at end of file diff --git a/components/main.scss b/components/main.scss index 660edea..e926c20 100644 --- a/components/main.scss +++ b/components/main.scss @@ -5,18 +5,16 @@ src: url('fonts/Crimson/CrimsonText-Regular.ttf'), url('fonts/Crimson/CrimsonText-Bold.ttf'), - url('fonts/Crimson/CrimsonText-Italic.ttf') - ; - } + url('fonts/Crimson/CrimsonText-Italic.ttf'); +} - @font-face { +@font-face { font-family: Montserrat; src: url('fonts/Montserrat/Montserrat-Regular.ttf'), url('fonts/Montserrat/Montserrat-Bold.ttf'), - url('fonts/Montserrat/Montserrat-Italic.ttf') - ; - } + url('fonts/Montserrat/Montserrat-Italic.ttf'); +} $-beige: #D7CEC7; $-grey: #565656; @@ -24,9 +22,15 @@ $-wine-red: #76323F; $-light-brown: #C09F80; $-almost-white: #f9f9f9; -$-primary-sans-serif-font: Montserrat, Helvetica, sans-serif; -$-primary-serif-font: Crimson, Times, serif; -$-primary-sans-serif-accent-font: Roboto, Arial, sans-serif; +$-primary-sans-serif-font: Montserrat, +Helvetica, +sans-serif; +$-primary-serif-font: Crimson, +Times, +serif; +$-primary-sans-serif-accent-font: Roboto, +Arial, +sans-serif; $-viewport-extra-small: 450px; $-viewport-small: 650px; @@ -37,83 +41,83 @@ $-viewport-toggle-sidebar: $-viewport-small; $-sidebar-width: 250px; -html{ - height:100%; - margin: 0; - padding: 0; +html { + height: 100%; + margin: 0; + padding: 0; } -body{ - height: 100%; - margin: 0; - padding: 0; +body { + height: 100%; + margin: 0; + padding: 0; } -.LP-Wrapper__Site{ +.LP-Wrapper__Site { display: grid; grid-template-columns: $-sidebar-width 1fr; grid-template-rows: auto 1fr; - grid-template-areas: "header header" "sidebar content"; + grid-template-areas: "header header""sidebar content"; margin: 0; padding: 0; min-height: 100vh; } -.LP-Main__Content{ - min-height: 1px; - padding: 25px; - grid-area: content; +.LP-Main__Content { + min-height: 1px; + padding: 25px; + grid-area: content; } -.LP-Main__Sidebar{ +.LP-Main__Sidebar { grid-area: sidebar; background-color: #f9f9f9; } -.LP-Section{ +.LP-Section { clear: both; padding: 25px 0px; padding-left: 25px; - .LP-Headline{ + .LP-Headline { margin-left: -25px; } } -.LP-Menu__Trigger{ +.LP-Menu__Trigger { display: none; } -@media(max-width: $-viewport-normal){ - .LP-Wrapper__Site{ +@media(max-width: $-viewport-normal) { + .LP-Wrapper__Site { grid-template-columns: (0.75 * $-sidebar-width) 1fr; } } -@media(max-width: $-viewport-small){ - .LP-Section{ +@media(max-width: $-viewport-small) { + .LP-Section { padding-left: 0; padding-right: 0; - .LP-Headline{ + .LP-Headline { margin: 0; } } } -@media(max-width: $-viewport-extra-small){ - .LP-Main__Sidebar{ +@media(max-width: $-viewport-extra-small) { + .LP-Main__Sidebar { max-width: 100vw; } } -@media(max-width: $-viewport-toggle-sidebar){ - .LP-Wrapper__Site{ +@media(max-width: $-viewport-toggle-sidebar) { + .LP-Wrapper__Site { grid-template-columns: 0 1fr; } - .LP-Main__Sidebar{ - grid-area:unset; + .LP-Main__Sidebar { + grid-area: unset; width: $-sidebar-width; z-index: 15; position: fixed; @@ -123,23 +127,23 @@ body{ border-right: 1px solid $-light-brown; transition: left 0.3s; - &--hidden{ + &--hidden { visibility: hidden; } } - #toggle_sidebar:checked ~ .LP-Main__Sidebar{ - left: 0 ; + #toggle_sidebar:checked~.LP-Main__Sidebar { + left: 0; } - #toggle_sidebar ~ .LP-Main__Sidebar{ + #toggle_sidebar~.LP-Main__Sidebar { left: -1 * $-sidebar-width - 1; } - .LP-Menu__TriggerLabel{ + .LP-Menu__TriggerLabel { z-index: 20; height: 60px; - width: 60px; + width: 60px; background-image: url('icons/hamburger_menu.svg'); background-repeat: no-repeat; background-clip: content-box; @@ -147,12 +151,12 @@ body{ position: fixed; } - .LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel{ + .LP-Menu__Trigger:checked~.LP-Menu__TriggerLabel { background-color: invert($-grey); filter: invert(1); } - .LP-Main__Content{ + .LP-Main__Content { margin-top: 60px; } } @@ -161,4 +165,6 @@ body{ @import '02_Molecules/molecules'; @import '03_Organisms/organisms'; @import '04_Templates/templates'; -@import '05_Pages/pages'; \ No newline at end of file +@import '05_Pages/pages'; + +@import './tagify'; \ No newline at end of file diff --git a/public/main.css b/public/main.css index 712a8e5..3cffc43 100644 --- a/public/main.css +++ b/public/main.css @@ -574,7 +574,8 @@ body { padding: 8px 14px; border-radius: 2px; font-weight: bold; - cursor: pointer; } + cursor: pointer; + white-space: nowrap; } .LP-Button:active { background-color: #76323F; color: #f9f9f9; } @@ -600,19 +601,28 @@ body { flex-direction: column; margin-bottom: -30px; padding: 10px 0; } - .LP-Input .LP-Input__Field { + .LP-Input--tagging .LP-Button { + height: 53px; } + .LP-Input--tagging .LP-Input__Field, .LP-Input--tagging .tagify { + min-height: 36px; + height: max-content; + font-family: Montserrat, Helvetica, sans-serif; + font-size: 1em; + padding: 0; + padding-left: 8px; } + .LP-Input .LP-Input__Field, .LP-Input .tagify { border: none; border-bottom: 1px solid #565656; padding: 8px 0; margin-bottom: 30px; width: 100%; } - .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid { + .LP-Input .LP-Input__Field:focus, .LP-Input .tagify:focus, .LP-Input .LP-Input__Field:active, .LP-Input .tagify:active, .LP-Input .LP-Input__Field:invalid, .LP-Input .tagify:invalid, .LP-Input .LP-Input__Field--active, .LP-Input .tagify--focus { margin-bottom: 29px; border-bottom: 2px solid #76323F; background-color: #f9f9f9; border-radius: 3px 3px 0 0; box-shadow: none; } - .LP-Input .LP-Input__Field[type=submit] { + .LP-Input .LP-Input__Field[type=submit], .LP-Input .tagify[type=submit] { background-color: #C09F80; color: #565656; border: none; @@ -620,7 +630,7 @@ body { border-radius: 2px; font-weight: bold; cursor: pointer; } - .LP-Input .LP-Input__Field[type=submit]:active { + .LP-Input .LP-Input__Field[type=submit]:active, .LP-Input .tagify[type=submit]:active { background-color: #76323F; color: #f9f9f9; } .LP-Input .LP-Input__Label { @@ -636,22 +646,30 @@ body { position: relative; top: -30px; overflow: hidden; } - .LP-Input--error .LP-Input__Field { + .LP-Input--error .LP-Input__Field, .LP-Input--error .tagify { margin-bottom: 25px; border-bottom: 2px solid #76323F; margin-bottom: 29px; } .LP-Input--error .LP-Input__Message { color: #76323F; } - .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .LP-Input__Field:disabled { + .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .tagify, + .LP-Input--disabled .LP-Input__Field:disabled, + .LP-Input--disabled .tagify:disabled { background-color: transparent; border-bottom: 1px dashed #565656; cursor: not-allowed; } - label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .LP-Input__Field:disabled { + label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .tagify, label + .LP-Input--disabled .LP-Input__Field:disabled, label + .LP-Input--disabled .tagify:disabled { color: red; } - .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .LP-Input__Field:disabled:focus, .LP-Input--disabled .LP-Input__Field:disabled:active { + .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .tagify:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .tagify:active, + .LP-Input--disabled .LP-Input__Field:disabled:focus, + .LP-Input--disabled .tagify:disabled:focus, + .LP-Input--disabled .LP-Input__Field:disabled:active, + .LP-Input--disabled .tagify:disabled:active { margin-bottom: 30px; border-radius: 0; } - .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message { + .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .tagify ~ .LP-Input__Message, + .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message, + .LP-Input--disabled .tagify:disabled ~ .LP-Input__Message { visibility: hidden; } .LP-Input--disabled .LP-Input__Label { color: #565656; } @@ -670,12 +688,14 @@ body { width: auto; object-fit: contain; } -.LP-Tag { +.LP-Tag, .tagify__tag { padding: 8px 14px; background-color: #D7CEC7; border-radius: 2px; width: max-content; } - .LP-Tag .LP-Paragraph { + .LP-Tag:hover, .tagify__tag:hover { + background-color: #bdbdbd; } + .LP-Tag .LP-Paragraph, .tagify__tag .LP-Paragraph { padding: 0; margin: 0; font-family: Montserrat, Helvetica, sans-serif; @@ -861,8 +881,8 @@ body { flex-wrap: wrap; padding: 0; margin: 0; } - .LP-TagList .LP-TagList__List .LP-TagList__Item { - margin: 6px; } + .LP-TagList .LP-TagList__List .LP-TagList__Item, .LP-TagList .LP-TagList__List .tagify__tag { + margin: 3px; } .LP-Menu { border-left: 1px solid #C09F80; } @@ -1189,7 +1209,13 @@ body { .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { background-color: inherit; } -.LP-Form--inline .LP-Form__Legend, .LP-Form--inline .LP-Input__Label { +.LP-Form--tagging { + margin-top: 25px; } + .LP-Form--tagging div.LP-Form__Composition { + gap: 25px; } + +.LP-Form--inline .LP-Form__Legend, +.LP-Form--inline .LP-Input__Label { display: none; } .LP-Form--inline .LP-Form__Button { @@ -1198,6 +1224,12 @@ body { width: min-content; flex-basis: max-content; } +.LP-Form--inline fieldset.LP-Form__Fieldset { + max-width: unset; } + +.LP-Form--inline div.LP-Form__Composition { + padding: 0; } + @media (max-width: 450px) { .LP-Form:not(.LP-Form--inline) .LP-Form__Composition { flex-wrap: wrap; } } @@ -1411,3 +1443,60 @@ body { margin: 0; padding: 0; margin-bottom: 25px; } } + +.tagify { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; } + .tagify + input, + .tagify + textarea { + display: none; } + +.tagify__tag { + background-color: #bdbdbd; + display: inline-flex; + cursor: default; + transition: .13s ease-out; + height: max-content; + align-items: center; + gap: 3px; } + .tagify__tag:hover { + background-color: #e9e9e9; } + +.tagify__input { + flex-grow: 1; + display: inline-block; + min-width: 110px; + margin: 5px; + line-height: inherit; + position: relative; + white-space: pre-wrap; + margin-left: 15px; } + +.tagify__tag__removeBtn { + order: 5; + cursor: pointer; + font: 1em/1 Arial; + transition: .2s ease-out; + color: #76323F; } + +.tagify__tag__removeBtn::after { + content: "\00D7"; } + +.tagify__tag__removeBtn:hover { + color: #565656; } + +.tagify__tag__removeBtn:hover + div > span { + opacity: .5; } + +.tagify__tag__removeBtn:hover + div::before { + box-shadow: 0 0 0 1.1em rgba(211, 148, 148, 0.3) inset !important; + box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset !important; + transition: .2s; } + +.tagify__tag--loading .tagify__tag__removeBtn { + display: none; } + +.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn { + display: none; }