upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-02-20 00:12:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 38

Merge pull request #25774 from nextcloud/add-ripple-color-variables

Browse source
This commit is contained in:
Pytal 2021-10-06 17:33:08 -07:00 committed by GitHub
commit 005ed982eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/theming/css/theming.scss
View file

@ -260,6 +260,9 @@ input.primary,
/** Handle primary buttons for bright colors */
@if (luma($color-primary) > 0.8) {
:root {
--color-primary-light-text: var(--color-primary-text);
}
select,
button, .button,
input:not([type='range']),
@ -278,7 +281,6 @@ input.primary,
}
}
}
}
@if ($color-primary == #ffffff) {

11
core/css/css-variables.scss
View file

@ -18,15 +18,23 @@
--color-placeholder-dark: #{$color-placeholder-dark};
--color-primary: #{$color-primary};
--color-primary-hover: #{$color-primary-hover};
--color-primary-light: #{$color-primary-light};
--color-primary-light-hover: #{$color-primary-light-hover};
--color-primary-text: #{$color-primary-text};
--color-primary-light-text: #{$color-primary-light-text};
--color-primary-text-dark: #{$color-primary-text-dark};
--color-primary-element: #{$color-primary-element};
--color-primary-element-hover: #{$color-primary-element-hover};
--color-primary-element-light: #{$color-primary-element-light};
--color-primary-element-lighter: #{$color-primary-element-lighter};
--color-error: #{$color-error};
--color-error-hover: #{$color-error-hover};
--color-warning: #{$color-warning};
--color-warning-hover: #{$color-warning-hover};
--color-success: #{$color-success};
--color-success-hover: #{$color-success-hover};
--color-text-maxcontrast: #{$color-text-maxcontrast};
--color-text-light: #{$color-main-text};
@ -44,6 +52,8 @@
--color-border: #{$color-border};
--color-border-dark: #{$color-border-dark};
--border-radius: #{$border-radius};
--border-radius-large: #{$border-radius-large};
--border-radius-pill: #{$border-radius-pill};
@ -58,3 +68,4 @@
--header-height: #{$header-height};
}

16
core/css/inputs.scss
View file

@ -24,7 +24,7 @@ $default-height: 34px;
/* Simple selector to allow easy overriding */
select,
button,
button:not(.button-vue),
input,
textarea,
div[contenteditable=true],
@ -43,7 +43,7 @@ div[contenteditable=false] {
/* Default global values */
div.select2-drop .select2-search input, // TODO: REMOVE WHEN DROPPING SELECT2
select,
button, .button,
button:not(.button-vue), .button:not(.button-vue),
input:not([type='range']),
textarea,
div[contenteditable=true],
@ -168,8 +168,8 @@ input {
/* 'Click' inputs */
select,
button, .button,
input[type='button'],
button:not(.button-vue), .button:not(.button-vue),
input[type='button']:not(.button-vue),
input[type='submit'],
input[type='reset'] {
padding: 6px 16px;
@ -184,7 +184,7 @@ input[type='reset'] {
}
}
select,
button, .button {
button:not(.button-vue), .button:not(.button-vue) {
* {
cursor: pointer;
}
@ -197,8 +197,8 @@ button, .button {
}
/* Buttons */
button, .button,
input[type='button'],
button:not(.button-vue), .button:not(.button-vue),
input[type='button']:not(.button-vue),
input[type='submit'],
input[type='reset'] {
font-weight: bold;
@ -215,7 +215,7 @@ input[type='reset'] {
color: #fff !important;
}
}
button, .button {
button:not(.button-vue), .button:not(.button-vue) {
> span {
/* icon position inside buttons */
&[class^='icon-'],

11
core/css/variables.scss
View file

@ -44,17 +44,27 @@ $color-placeholder-light: nc-darken($color-main-background, 10%) !default;
$color-placeholder-dark: nc-darken($color-main-background, 20%) !default;
$color-primary: #0082c9 !default;
$color-primary-hover: mix($color-primary, $color-main-background, 80%) !default;
$color-primary-light: mix($color-primary, $color-main-background, 10%) !default;
$color-primary-light-text: $color-primary !default;
$color-primary-light-hover: mix($color-primary-light, $color-main-text, 95%) !default;
$color-primary-text: #ffffff !default;
// do not use nc-darken/lighten in case of overriding because
// primary-text is independent of color-main-text
$color-primary-text-dark: darken($color-primary-text, 7%) !default;
$color-primary-element: $color-primary !default;
$color-primary-element-hover: mix($color-primary-element, $color-main-background, 80%) !default;
$color-primary-element-light: lighten($color-primary-element, 15%) !default;
$color-primary-element-lighter: mix($color-primary-element, $color-main-background, 15%) !default;
$color-error: #e9322d;
$color-error-hover: mix($color-error, $color-main-background, 80%) !default;
$color-warning: #eca700;
$color-warning-hover: mix($color-warning, $color-main-background, 80%) !default;
$color-success: #46ba61;
$color-success-hover: mix($color-success, $color-main-background, 80%) !default;
// used for svg
$color-white: #fff;
$color-black: #000;
@ -81,6 +91,7 @@ $color-box-shadow: transparentize(nc-darken($color-main-background, 70%), 0.5) !
$color-border: nc-darken($color-main-background, 7%) !default;
// darker border like inputs or very visible elements
$color-border-dark: nc-darken($color-main-background, 14%) !default;
$border-radius: 3px !default;
$border-radius-large: 10px !default;
// Pill-style button, value is large so big buttons also have correct roundness