diff --git a/core/css/apps.scss b/core/css/apps.scss index becbf63cd6d03..bcb0878b3c8ec 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -92,6 +92,22 @@ kbd { border-right: 1px solid $color-border; display: flex; flex-direction: column; + + /* 'New' button */ + .app-navigation-new { + display: block; + padding: 10px; + button { + display: inline-block; + width: 100%; + padding: 10px; + padding-left: 34px; + background-position: 10px center; + text-align: left; + margin: 0; + } + } + li { position: relative; } @@ -794,14 +810,14 @@ kbd { flex: 0 0 auto; > button, > a, - > .menuitem { + > .menuitem, + > label { cursor: pointer; line-height: 36px; border: 0; background-color: transparent; display: flex; align-items: center; - width: auto; height: auto; margin: 0; font-weight: 300; @@ -865,6 +881,9 @@ kbd { margin: -2px 11px 0; } } + > input:not([type=radio]):not([type=checkbox]):not([type=image]) { + width: 150px; + } } > button { padding: 0; @@ -876,7 +895,7 @@ kbd { } } - +/* CONTENT WRAPPER --------------------------------------------------------- */ #app-content-wrapper { display: flex; position: relative; @@ -891,6 +910,8 @@ kbd { overflow-y: auto; } } + +/* CONTENT LIST ------------------------------------------------------------- */ .app-content-list { width: 300px; border-right: 1px solid nc-darken($color-main-background, 8%); @@ -1036,7 +1057,8 @@ kbd { } } } -/* App content */ + +/* CONTENT ------------------------------------------------------------------ */ .app-content-detail { /* grow full width */ flex-grow: 1; @@ -1046,6 +1068,7 @@ kbd { } } +/* MOBILE ------------------------------------------------------------------- */ /* Mobile width < 768px */ @media only screen and (max-width: 768px) { diff --git a/core/css/inputs.scss b/core/css/inputs.scss index c0576f01b09d4..7b74d645481c3 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -149,6 +149,11 @@ input[type='reset'] { cursor: pointer; box-sizing: border-box; background-color: nc-darken($color-main-background, 3%); + &.icon-confirm:not(:empty), + &.icon-confirm[value]:not([value=""]) { + background-position: calc(100% - 6px) center; + padding-right: 30px; + } } /* Buttons */ diff --git a/core/css/multiselect.scss b/core/css/multiselect.scss index 3aa9eb639ddf5..da6cbde372206 100644 --- a/core/css/multiselect.scss +++ b/core/css/multiselect.scss @@ -25,7 +25,7 @@ ul.multiselectoptions { position: absolute; max-height: 20em; overflow-y: auto; - z-index: 49; + z-index: 149; &.down { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; @@ -96,7 +96,7 @@ div.multiselect { &.active { background-color: $color-main-background; position: relative; - z-index: 50; + z-index: 150; } &.up { border-top: 0 none; @@ -116,11 +116,16 @@ div.multiselect { text-overflow: ellipsis; width: 90%; white-space: nowrap; + line-height: 20px; } &:last-child { position: absolute; right: 8px; top: 8px; + padding: 0 !important; + min-width: 16px; + min-height: 16px; + background-position: center; } } } diff --git a/settings/css/settings.scss b/settings/css/settings.scss index 05d62423d175a..ec7dbd8478043 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -137,7 +137,7 @@ input { } .personal-settings-setting-box input { - &[type="text"], &[type="email"], &[type="tel"], &[type="url"] { + &[type='text'], &[type='email'], &[type='tel'], &[type='url'] { width: 100%; } } @@ -183,7 +183,7 @@ input { } } > form span { - &[class^="icon-checkmark"], &[class^="icon-error"] { + &[class^='icon-checkmark'], &[class^='icon-error'] { position: relative; right: 8px; top: -28px; @@ -491,9 +491,12 @@ table.grid { } } -td { +td, th { &.name { padding-left: .8em; + width: 10em; + min-width: 10em; + max-width: 10em; } &.password { padding-left: .8em; @@ -504,8 +507,12 @@ td { &.displayName > img { visibility: hidden; } - &.password, &.displayName { + &.password, + &.displayName, + &.mailAddress { width: 12em; + min-width: 12em; + max-width: 12em; cursor: pointer; } &.mailAddress { @@ -524,14 +531,14 @@ span.usersLastLoginTooltip { /* dropdowns will be relative to this element */ #userlist { position: relative; - .mailAddress, .storageLocation, .userBackend, .lastLogin { + .storageLocation, .userBackend, .lastLogin { display: none; } th.name { color: #000; } tr { - height: 51px; + height: 50px; } .mailAddress .loading-small { width: 16px; @@ -543,16 +550,17 @@ span.usersLastLoginTooltip { .groupsListContainer.hidden { display: none; } + thead th, + thead tr { + z-index: 100; + background-color: $color-main-background; + position: sticky; + // positional attribute is required for position to take affect. + top: 0; + } } -/* because of accessibility the name cell is