Skip to content

Commit

Permalink
fix: Adjust legacy CSS styles for new Nextcloud 30 design
Browse files Browse the repository at this point in the history 
Signed-off-by: Ferdinand Thiessen <[email protected]>
  • Loading branch information
@susnux
susnux committed Aug 15, 2024
1 parent 2c24c3c commit d0a0be9
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 55 deletions.
27 changes: 15 additions & 12 deletions apps/settings/css/settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,25 +133,28 @@ select {

.link-button {
display: inline-block;
margin: 16px;
padding: 14px 20px;
margin: calc(2 * var(--default-grid-baseline));
padding: calc(2 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
background-color: var(--color-primary-element);
color: var(--color-primary-element-text);
border-radius: var(--border-radius-pill);
border-radius: var(--border-radius-element);
border: 1px solid var(--color-primary-element);
box-shadow: 0 2px 9px var(--color-box-shadow);

&:active,
&:hover,
&:focus,
&:focus {
background-color: var(--color-primary-element-hover);
}

&:active,
&:focus-visible {
box-shadow: 0 0 0 4px var(--color-main-background) !important;
outline: 2px solid var(--color-main-text) !important;
}

&.icon-file {
padding-left: 48px;
background-position: 24px;
padding-left: calc(var(--default-grid-baseline) + var(--default-clickable-area));
background-position: calc(2 * var(--default-grid-baseline));
}
}

Expand Down Expand Up @@ -236,17 +239,17 @@ select {
.federation-menu {
position: relative;
cursor: pointer;
width: 44px;
height: 44px;
padding: 10px;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
padding: calc(2 * var(--default-grid-baseline));
margin: 0;
background: none;
border: none;

&:hover,
&:focus {
background-color: var(--color-background-hover);
border-radius: var(--border-radius-pill);
border-radius: var(--border-radius-element);

.icon-federation-menu {
opacity: 0.8;
Expand All @@ -268,7 +271,7 @@ select {
}

.federationScopeMenu {
top: 44px;
top: var(--default-clickable-area);

&.popovermenu {
.menuitem {
Expand Down
77 changes: 38 additions & 39 deletions core/css/apps.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,6 @@ kbd {
/* APP-NAVIGATION ------------------------------------------------------------ */
/* Navigation: folder like structure */
#app-navigation:not(.vue) {
// We use fixed variable for the pill style as we have larger containers around nested list entries
--border-radius-pill: calc(var(--default-clickable-area) / 2);
// Ensure the maxcontrast color is set for the background
--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));

Expand All @@ -136,8 +134,8 @@ kbd {

.app-navigation-caption {
font-weight: bold;
line-height: 44px;
padding: 10px 44px 0 44px;
line-height: var(--default-clickable-area);
padding: 10px var(--default-clickable-area) 0 var(--default-clickable-area);
white-space: nowrap;
text-overflow: ellipsis;
box-shadow: none !important;
Expand Down Expand Up @@ -192,7 +190,7 @@ kbd {
margin: 0;
margin-bottom: 3px;
width: 100%;
border-radius: var(--border-radius-pill);
border-radius: var(--border-radius-element);

/* Pinned-to-bottom entries */
&.pinned {
Expand All @@ -204,13 +202,13 @@ kbd {

> .app-navigation-entry-deleted {
/* Ugly hack for overriding the main entry link */
padding-left: 44px !important;
padding-left: var(--default-clickable-area) !important;
}
> .app-navigation-entry-edit {
/* Ugly hack for overriding the main entry link */
/* align the input correctly with the link text
44px-6px padding for the input */
padding-left: 38px !important;
padding-left: calc(var(--default-clickable-area) - 6px) !important;
}

a:hover,
Expand Down Expand Up @@ -262,23 +260,23 @@ kbd {
> li {
display: inline-flex;
flex-wrap: wrap;
padding-left: 44px;
padding-left: var(--default-clickable-area);
width: 100%;
margin-bottom: 3px;

&:hover,
&:focus {
&,
> a {
border-radius: var(--border-radius-pill);
border-radius: var(--border-radius-element);
background-color: var(--color-background-hover);
}
}
&.active,
a.selected {
&,
> a {
border-radius: var(--border-radius-pill);
border-radius: var(--border-radius-element);
background-color: var(--color-primary-element-light);
&:first-child > img {
filter: var(--primary-invert-if-dark);
Expand All @@ -288,7 +286,7 @@ kbd {

/* align loader */
&.icon-loading-small:after {
left: 22px; /* 44px / 2 */
left: calc(var(--default-clickable-area) / 2);
}

> .app-navigation-entry-deleted {
Expand All @@ -302,7 +300,7 @@ kbd {
margin-left: 4px;
/* align the input correctly with the link text
44px+44px-4px-6px padding for the input */
padding-left: 78px !important;
padding-left: calc(2 * var(--default-clickable-area) - 10px) !important;
}
}
}
Expand All @@ -327,27 +325,28 @@ kbd {
background-repeat: no-repeat;
display: block;
justify-content: space-between;
line-height: 44px;
min-height: 44px;
padding: 0 12px 0 14px;
line-height: var(--default-clickable-area);
min-height: var(--default-clickable-area);
padding-block: 0;
padding-inline: calc(2 * var(--default-grid-baseline));
overflow: hidden;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: var(--border-radius-pill);
border-radius: var(--border-radius-element);
color: var(--color-main-text);
flex: 1 1 0px;
z-index: 100; /* above the bullet to allow click*/
/* TODO: forbid using img as icon in menu? */

&.svg {
padding: 0 12px 0 44px;
padding: 0 12px 0 var(--default-clickable-area);
:focus-visible {
padding: 0 8px 0 42px;
padding: 0 8px 0 calc(var(--default-clickable-area) - 2px);
}
}
&:first-child img {
margin-right: 11px!important;
margin-right: calc(2 * var(--default-grid-baseline)) !important;
width: 16px;
height: 16px;
// Legacy invert if bright background
Expand Down Expand Up @@ -383,7 +382,7 @@ kbd {

/* popover fix the flex positionning of the li parent */
> .app-navigation-entry-menu {
top: 44px;
top: var(--default-clickable-area);
}

/* show edit/undo field if editing/deleted */
Expand Down Expand Up @@ -427,8 +426,8 @@ kbd {
.collapse {
opacity: 0;
position: absolute;
width: 44px;
height: 44px;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
margin: 0;
z-index: 110;

Expand All @@ -445,8 +444,8 @@ kbd {
}
&:before {
position: absolute;
height: 44px;
width: 44px;
height: var(--default-clickable-area);
width: var(--default-clickable-area);
margin: 0;
padding: 0;
background: none;
Expand All @@ -472,7 +471,7 @@ kbd {

/* force padding on link no matter if 'a' has an icon class */
> a:first-child {
padding-left: 44px;
padding-left: var(--default-clickable-area);
}
&:hover,
&:focus {
Expand Down Expand Up @@ -506,8 +505,8 @@ kbd {
justify-content: flex-end;
}
li {
width: 44px !important;
height: 44px;
width: var(--default-clickable-area) !important;
height: var(--default-clickable-area);
}
button {
height: 100%;
Expand All @@ -530,7 +529,7 @@ kbd {
overflow: hidden;
text-align: right;
font-size: 9pt;
line-height: 44px;
line-height: var(--default-clickable-area);
padding: 0 12px; /* Same padding as all li > a in the app-navigation */

&.highlighted {
Expand Down Expand Up @@ -605,21 +604,21 @@ kbd {
*/
.app-navigation-entry-deleted {
display: inline-flex;
padding-left: 44px;
padding-left: var(--default-clickable-area);
transform: translateX(#{variables.$navigation-width});
.app-navigation-entry-deleted-description {
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex: 1 1 0px;
line-height: 44px;
line-height: var(--default-clickable-area);
}
.app-navigation-entry-deleted-button {
margin: 0;
height: 44px;
width: 44px;
line-height: 44px;
height: var(--default-clickable-area);
width: var(--default-clickable-area);
line-height: var(--default-clickable-area);
&:hover,
&:focus {
opacity: 1;
Expand Down Expand Up @@ -827,7 +826,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
.settings-button {
display: flex;
align-items: center;
height: 44px;
height: var(--default-clickable-area);
width: 100%;
padding: 0;
margin: 0;
Expand Down Expand Up @@ -858,8 +857,8 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
background-position: 14px center;
background-repeat: no-repeat;
content: '';
width: 44px;
height: 44px;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
top: 0;
left: 0;
display: block;
Expand Down Expand Up @@ -976,7 +975,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
}

/* POPOVER MENU ------------------------------------------------------------ */
$popoveritem-height: 44px;
$popoveritem-height: 34px;
$popovericon-size: 16px;
$outter-margin: math.div($popoveritem-height - $popovericon-size, 2);

Expand Down Expand Up @@ -1125,7 +1124,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
box-shadow: 0 0 0 2px var(--color-primary-element);
}
&.active {
border-radius: var(--border-radius-pill);
border-radius: var(--border-radius-element);
background-color: var(--color-primary-element-light);
}
/* prevent .action class to break the design */
Expand Down Expand Up @@ -1405,7 +1404,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
opacity: .5;
order: 3;
flex: 1 0;
flex-basis: calc(100% - 44px);
flex-basis: calc(100% - var(--default-clickable-area));
}

.app-content-list-item-details {
Expand Down
15 changes: 11 additions & 4 deletions core/css/inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ button:not(
&:focus,
&.active {
/* active class used for multiselect */
border-color: var(--color-primary-element);
border-color: var(--color-main-text);
outline: none;
}
&:active {
Expand Down Expand Up @@ -211,13 +211,20 @@ button:not(
input[type='button'],
input[type='submit'],
input[type='reset'] {
padding: 8px 14px;
padding: calc((var(--default-clickable-area) - 1lh) / 2) calc(3 * var(--default-grid-baseline));
font-size: var(--default-font-size);
width: auto;
min-height: var(--default-clickable-area);
cursor: pointer;
box-sizing: border-box;
background-color: var(--color-background-dark);
color: var(--color-primary-element-light-text);
background-color: var(--color-primary-element-light);
border: none;

&:hover,
&:focus {
background-color: var(--color-primary-element-light-hover);
}

&:disabled {
cursor: default;
Expand Down Expand Up @@ -303,7 +310,7 @@ input[type='button'],
input[type='submit'],
input[type='reset'] {
font-weight: bold;
border-radius: var(--border-radius-pill);
border-radius: var(--border-radius-element);

/* Get rid of the inside dotted line in Firefox */
&::-moz-focus-inner {
Expand Down

0 comments on commit d0a0be9

Please sign in to comment.