CSS for tags *ough*
This commit is contained in:
parent
607de24c14
commit
179db0f9b7
@ -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;
|
||||
}
|
||||
|
||||
@ -1,18 +1,37 @@
|
||||
.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;
|
||||
@ -20,7 +39,7 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
min-width: $-viewport-medium;
|
||||
|
||||
@media(max-width: $-viewport-medium){
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
@media(max-width: $-viewport-medium) {
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Form__Legend{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: $-primary-sans-serif-font;
|
||||
font-size: 21px;
|
||||
}
|
||||
.LP-Form__Legend {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: $-primary-sans-serif-font;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.LP-Form__Composition{
|
||||
@include RV-FlexRow__Container;
|
||||
@include RV-Spacing__Inner--small('');
|
||||
.LP-Form__Composition {
|
||||
@include RV-FlexRow__Container;
|
||||
@include RV-Spacing__Inner--small('');
|
||||
|
||||
&--breakable {
|
||||
@media(max-width: $-viewport-small){
|
||||
@include RV-FlexRow__Container--multiRow;
|
||||
}
|
||||
}
|
||||
&--breakable {
|
||||
@media(max-width: $-viewport-small) {
|
||||
@include RV-FlexRow__Container--multiRow;
|
||||
}
|
||||
}
|
||||
|
||||
&--buttons{
|
||||
justify-content: flex-end;
|
||||
@include RV-Spacing__Inner--small;
|
||||
}
|
||||
}
|
||||
&--buttons {
|
||||
justify-content: flex-end;
|
||||
@include RV-Spacing__Inner--small;
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Form__Field{
|
||||
@include RV-FlexRow__Item;
|
||||
}
|
||||
.LP-Form__Field {
|
||||
@include RV-FlexRow__Item;
|
||||
}
|
||||
|
||||
.LP-Form__InfoText{
|
||||
.LP-Paragraph{
|
||||
font-family: $-primary-sans-serif-font;
|
||||
color: $-grey;
|
||||
}
|
||||
}
|
||||
.LP-Form__InfoText {
|
||||
.LP-Paragraph {
|
||||
font-family: $-primary-sans-serif-font;
|
||||
color: $-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
80
components/_tagify.scss
Normal file
80
components/_tagify.scss
Normal file
@ -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
|
||||
}
|
||||
@ -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,20 +127,20 @@ 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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -162,3 +166,5 @@ body{
|
||||
@import '03_Organisms/organisms';
|
||||
@import '04_Templates/templates';
|
||||
@import '05_Pages/pages';
|
||||
|
||||
@import './tagify';
|
||||
119
public/main.css
119
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; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user