mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

TABS :D 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-09-28 09:38:21 +02:00
parent e744b029ff
commit 4bfe88d2af
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
1 changed files with 160 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

320
core/css/inputs.scss
View File

@ -75,13 +75,13 @@ div[contenteditable=true],
cursor: default; cursor: default;
opacity: 0.5; opacity: 0.5;
} }
&:required { &:required {
box-shadow: none; box-shadow: none;
} }
&:invalid { &:invalid {
box-shadow: none !important; box-shadow: none !important;
border-color: var(--color-error); border-color: var(--color-error);
} }
/* Primary action button, use sparingly */ /* Primary action button, use sparingly */
&.primary { &.primary {
background-color: var(--color-primary-element); background-color: var(--color-primary-element);
@ -248,11 +248,11 @@ input {
/* only show confirm borders if input is not focused */ /* only show confirm borders if input is not focused */
&:not(:active):not(:hover):not(:focus){ &:not(:active):not(:hover):not(:focus){
&:invalid { &:invalid {
+ .icon-confirm { + .icon-confirm {
border-color: var(--color-error); border-color: var(--color-error);
} }
} }
+ .icon-confirm { + .icon-confirm {
&:active, &:active,
&:hover, &:hover,
@ -271,7 +271,7 @@ input {
+ .icon-confirm { + .icon-confirm {
border-color: var(--color-primary-element) !important; border-color: var(--color-primary-element) !important;
border-left-color: transparent !important; border-left-color: transparent !important;
/* above previous input */ /* above previous input */
z-index: 2; z-index: 2;
} }
} }
@ -635,63 +635,63 @@ input {
/* Vue multiselect */ /* Vue multiselect */
.multiselect.multiselect-vue { .multiselect.multiselect-vue {
margin: 1px 2px; margin: 1px 2px;
padding: 0 !important; padding: 0 !important;
display: inline-block; display: inline-block;
width: 160px; width: 160px;
position: relative; position: relative;
background-color: var(--color-main-background); background-color: var(--color-main-background);
&.multiselect--active { &.multiselect--active {
/* Opened: force display the input */ /* Opened: force display the input */
input.multiselect__input { input.multiselect__input {
opacity: 1 !important; opacity: 1 !important;
cursor: text !important; cursor: text !important;
} }
} }
&.multiselect--disabled, &.multiselect--disabled,
&.multiselect--disabled .multiselect__single { &.multiselect--disabled .multiselect__single {
background-color: var(--color-background-dark) !important; background-color: var(--color-background-dark) !important;
} }
.multiselect__tags { .multiselect__tags {
/* space between tags and limit tag */ /* space between tags and limit tag */
$space-between: 5px; $space-between: 5px;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border-dark); border: 1px solid var(--color-border-dark);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
height: 34px; height: 34px;
/* tag wrapper */ /* tag wrapper */
.multiselect__tags-wrap { .multiselect__tags-wrap {
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
overflow: hidden; overflow: hidden;
max-width: 100%; max-width: 100%;
position: relative; position: relative;
padding: 3px $space-between; padding: 3px $space-between;
flex-grow: 1; 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 */ input is used to display single value */
&:empty ~ input.multiselect__input { &:empty ~ input.multiselect__input {
opacity: 1 !important; opacity: 1 !important;
/* hide default empty text, show input instead */ /* hide default empty text, show input instead */
+ span:not(.multiselect__single) { + span:not(.multiselect__single) {
display: none; display: none;
} }
} }
/* selected tag */ /* selected tag */
.multiselect__tag { .multiselect__tag {
flex: 1 0 0; flex: 1 0 0;
line-height: 20px; line-height: 20px;
padding: 1px 5px; padding: 1px 5px;
background-image: none; background-image: none;
color: var(--color-text-lighter); color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark); border: 1px solid var(--color-border-dark);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border-radius: 3px; border-radius: 3px;
/* require to override the default width /* require to override the default width
and force the tag to shring properly */ and force the tag to shring properly */
@ -714,114 +714,114 @@ input {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
} }
} }
/* Single select default value */ /* Single select default value */
.multiselect__single { .multiselect__single {
padding: 8px 10px; padding: 8px 10px;
flex: 0 0 100%; flex: 0 0 100%;
z-index: 1; /* above input */ z-index: 1; /* above input */
background-color: var(--color-main-background); background-color: var(--color-main-background);
cursor: pointer; cursor: pointer;
} }
/* displayed text if tag limit reached */ /* displayed text if tag limit reached */
.multiselect__strong, .multiselect__strong,
.multiselect__limit { .multiselect__limit {
flex: 0 0 auto; flex: 0 0 auto;
line-height: 20px; line-height: 20px;
color: var(--color-text-lighter); color: var(--color-text-lighter);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
opacity: .7; opacity: .7;
margin-right: $space-between; margin-right: $space-between;
/* above the input */ /* above the input */
z-index: 5; z-index: 5;
} }
/* default multiselect input for search and placeholder */ /* default multiselect input for search and placeholder */
input.multiselect__input { input.multiselect__input {
width: 100% !important; width: 100% !important;
position: absolute !important; position: absolute !important;
margin: 0; margin: 0;
opacity: 0; opacity: 0;
/* let's leave it on top of tags but hide it */ /* let's leave it on top of tags but hide it */
height: 100%; height: 100%;
border: none; border: none;
/* override hide to force show the placeholder */ /* override hide to force show the placeholder */
display: block !important; display: block !important;
/* only when not active */ /* only when not active */
cursor: pointer; cursor: pointer;
} }
} }
/* results wrapper */ /* results wrapper */
.multiselect__content-wrapper { .multiselect__content-wrapper {
position: absolute; position: absolute;
width: 100%; width: 100%;
margin-top: -1px; margin-top: -1px;
border: 1px solid var(--color-border-dark); border: 1px solid var(--color-border-dark);
background: var(--color-main-background); background: var(--color-main-background);
z-index: 50; z-index: 50;
max-height: 250px; max-height: 250px;
overflow-y: auto; overflow-y: auto;
.multiselect__content { .multiselect__content {
width: 100%; width: 100%;
padding: 5px 0; padding: 5px 0;
} }
li { li {
padding: 5px; padding: 5px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
&, &,
span { span {
cursor: pointer; cursor: pointer;
} }
> span { > span {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 20px; height: 20px;
margin: 0; margin: 0;
min-height: 1em; min-height: 1em;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background-color: transparent !important; background-color: transparent !important;
color: var(--color-text-lighter); color: var(--color-text-lighter);
width: 100%; width: 100%;
/* selected checkmark icon */ /* selected checkmark icon */
&::before { &::before {
content: ' '; content: ' ';
background-image: url('../img/actions/checkmark.svg?v=1'); background-image: url('../img/actions/checkmark.svg?v=1');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
min-width: 16px; min-width: 16px;
min-height: 16px; min-height: 16px;
display: block; display: block;
opacity: .5; opacity: .5;
margin-right: 5px; margin-right: 5px;
visibility: hidden; visibility: hidden;
} }
&.multiselect__option--disabled { &.multiselect__option--disabled {
background-color: var(--color-background-dark); background-color: var(--color-background-dark);
opacity: .5; 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 * icon on top of an unknown-and-ready-to-be-created entry
*/ */
&[data-select='create'] { &[data-select='create'] {
&::before { &::before {
background-image: url('../img/actions/add.svg?v=1'); background-image: url('../img/actions/add.svg?v=1');
visibility: visible; visibility: visible;
} }
} }
&.multiselect__option--highlight { &.multiselect__option--highlight {
color: var(--color-main-text); color: var(--color-main-text);
} }
&:not(.multiselect__option--disabled):hover::before { &:not(.multiselect__option--disabled):hover::before {
opacity: .3; opacity: .3;
} }
@ -831,9 +831,9 @@ input {
visibility: visible; visibility: visible;
} }
} }
} }
} }
} }
} }
/* Progressbar */ /* Progressbar */