Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[stable14] Fix invalid inline input confirm border #11426

Merged
merged 1 commit into from
Sep 28, 2018
Merged

[stable14] Fix invalid inline input confirm border #11426

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
320 changes: 160 additions & 160 deletions core/css/inputs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,13 @@ div[contenteditable=true],
cursor: default;
opacity: 0.5;
}
&:required {
box-shadow: none;
}
&:invalid {
box-shadow: none !important;
border-color: var(--color-error);
}
&:required {
box-shadow: none;
}
&:invalid {
box-shadow: none !important;
border-color: var(--color-error);
}
/* Primary action button, use sparingly */
&.primary {
background-color: var(--color-primary-element);
Expand Down Expand Up @@ -248,6 +248,11 @@ input {

/* only show confirm borders if input is not focused */
&:not(:active):not(:hover):not(:focus){
&:invalid {
+ .icon-confirm {
border-color: var(--color-error);
}
}
+ .icon-confirm {
&:active,
&:hover,
Expand All @@ -263,15 +268,10 @@ input {
&:active,
&:hover,
&:focus {
&:invalid {
+ .icon-confirm {
border-color: var(--color-error);
}
}
+ .icon-confirm {
border-color: var(--color-primary-element) !important;
border-left-color: transparent !important;
/* above previous input */
/* above previous input */
z-index: 2;
}
}
Expand Down Expand Up @@ -635,63 +635,63 @@ input {

/* Vue multiselect */
.multiselect.multiselect-vue {
margin: 1px 2px;
padding: 0 !important;
display: inline-block;
width: 160px;
position: relative;
background-color: var(--color-main-background);
&.multiselect--active {
/* Opened: force display the input */
input.multiselect__input {
margin: 1px 2px;
padding: 0 !important;
display: inline-block;
width: 160px;
position: relative;
background-color: var(--color-main-background);
&.multiselect--active {
/* Opened: force display the input */
input.multiselect__input {
opacity: 1 !important;
cursor: text !important;
}
}
&.multiselect--disabled,
&.multiselect--disabled .multiselect__single {
background-color: var(--color-background-dark) !important;
}
.multiselect__tags {
}
}
&.multiselect--disabled,
&.multiselect--disabled .multiselect__single {
background-color: var(--color-background-dark) !important;
}
.multiselect__tags {
/* space between tags and limit tag */
$space-between: 5px;

display: flex;
flex-wrap: nowrap;
overflow: hidden;
border: 1px solid var(--color-border-dark);
cursor: pointer;
position: relative;
border-radius: 3px;
height: 34px;
/* tag wrapper */
.multiselect__tags-wrap {
align-items: center;
display: inline-flex;
overflow: hidden;
max-width: 100%;
position: relative;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
border: 1px solid var(--color-border-dark);
cursor: pointer;
position: relative;
border-radius: 3px;
height: 34px;
/* tag wrapper */
.multiselect__tags-wrap {
align-items: center;
display: inline-flex;
overflow: hidden;
max-width: 100%;
position: relative;
padding: 3px $space-between;
flex-grow: 1;
/* no tags or simple select? Show input directly
/* no tags or simple select? Show input directly
input is used to display single value */
&:empty ~ input.multiselect__input {
opacity: 1 !important;
/* hide default empty text, show input instead */
+ span:not(.multiselect__single) {
display: none;
}
}
/* selected tag */
.multiselect__tag {
flex: 1 0 0;
line-height: 20px;
padding: 1px 5px;
background-image: none;
color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
&:empty ~ input.multiselect__input {
opacity: 1 !important;
/* hide default empty text, show input instead */
+ span:not(.multiselect__single) {
display: none;
}
}
/* selected tag */
.multiselect__tag {
flex: 1 0 0;
line-height: 20px;
padding: 1px 5px;
background-image: none;
color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
border-radius: 3px;
/* require to override the default width
and force the tag to shring properly */
Expand All @@ -714,114 +714,114 @@ input {
text-overflow: ellipsis;
overflow: hidden;
}
}
}
/* Single select default value */
.multiselect__single {
padding: 8px 10px;
flex: 0 0 100%;
z-index: 1; /* above input */
background-color: var(--color-main-background);
cursor: pointer;
}
/* displayed text if tag limit reached */
}
}
/* Single select default value */
.multiselect__single {
padding: 8px 10px;
flex: 0 0 100%;
z-index: 1; /* above input */
background-color: var(--color-main-background);
cursor: pointer;
}
/* displayed text if tag limit reached */
.multiselect__strong,
.multiselect__limit {
flex: 0 0 auto;
line-height: 20px;
color: var(--color-text-lighter);
display: inline-flex;
align-items: center;
flex: 0 0 auto;
line-height: 20px;
color: var(--color-text-lighter);
display: inline-flex;
align-items: center;
opacity: .7;
margin-right: $space-between;
/* above the input */
z-index: 5;
}
/* default multiselect input for search and placeholder */
input.multiselect__input {
width: 100% !important;
position: absolute !important;
margin: 0;
opacity: 0;
/* let's leave it on top of tags but hide it */
height: 100%;
border: none;
/* override hide to force show the placeholder */
}
/* default multiselect input for search and placeholder */
input.multiselect__input {
width: 100% !important;
position: absolute !important;
margin: 0;
opacity: 0;
/* let's leave it on top of tags but hide it */
height: 100%;
border: none;
/* override hide to force show the placeholder */
display: block !important;
/* only when not active */
cursor: pointer;
}
}
/* results wrapper */
.multiselect__content-wrapper {
position: absolute;
width: 100%;
margin-top: -1px;
border: 1px solid var(--color-border-dark);
background: var(--color-main-background);
z-index: 50;
max-height: 250px;
overflow-y: auto;
.multiselect__content {
width: 100%;
padding: 5px 0;
}
li {
padding: 5px;
position: relative;
display: flex;
align-items: center;
background-color: transparent;
&,
span {
cursor: pointer;
}
> span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 20px;
margin: 0;
min-height: 1em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-flex;
align-items: center;
background-color: transparent !important;
color: var(--color-text-lighter);
width: 100%;
/* selected checkmark icon */
&::before {
content: ' ';
background-image: url('../img/actions/checkmark.svg?v=1');
background-repeat: no-repeat;
background-position: center;
min-width: 16px;
min-height: 16px;
display: block;
opacity: .5;
margin-right: 5px;
visibility: hidden;
}
&.multiselect__option--disabled {
}
}
/* results wrapper */
.multiselect__content-wrapper {
position: absolute;
width: 100%;
margin-top: -1px;
border: 1px solid var(--color-border-dark);
background: var(--color-main-background);
z-index: 50;
max-height: 250px;
overflow-y: auto;
.multiselect__content {
width: 100%;
padding: 5px 0;
}
li {
padding: 5px;
position: relative;
display: flex;
align-items: center;
background-color: transparent;
&,
span {
cursor: pointer;
}
> span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 20px;
margin: 0;
min-height: 1em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-flex;
align-items: center;
background-color: transparent !important;
color: var(--color-text-lighter);
width: 100%;
/* selected checkmark icon */
&::before {
content: ' ';
background-image: url('../img/actions/checkmark.svg?v=1');
background-repeat: no-repeat;
background-position: center;
min-width: 16px;
min-height: 16px;
display: block;
opacity: .5;
margin-right: 5px;
visibility: hidden;
}
&.multiselect__option--disabled {
background-color: var(--color-background-dark);
opacity: .5;
}
/* add the prop tag-placeholder="create" to add the +
}
/* add the prop tag-placeholder="create" to add the +
* icon on top of an unknown-and-ready-to-be-created entry
*/
&[data-select='create'] {
&::before {
background-image: url('../img/actions/add.svg?v=1');
visibility: visible;
}
}
&.multiselect__option--highlight {
color: var(--color-main-text);
}
&[data-select='create'] {
&::before {
background-image: url('../img/actions/add.svg?v=1');
visibility: visible;
}
}
&.multiselect__option--highlight {
color: var(--color-main-text);
}
&:not(.multiselect__option--disabled):hover::before {
opacity: .3;
}
Expand All @@ -831,9 +831,9 @@ input {
visibility: visible;
}
}
}
}
}
}
}
}
}

/* Progressbar */
Expand Down