Skip to content

Theming using SCSS variables #3531

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

Merged
MorrisJobke merged 5 commits into from
Apr 25, 2017
Merged

Theming using SCSS variables #3531

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
68a63ad
Implement scss variable injection by OC_Defaults
juliusknorr Feb 17, 2017
1c54463
Use theming cachebuster for server resources
juliusknorr Apr 22, 2017
bc1efdf
Fix theming tests
juliusknorr Apr 24, 2017
bedd500
Logo and background URLs must be relative
nickvergessen Apr 24, 2017
6448cf5
Mock it
nickvergessen Apr 25, 2017
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
Next Next commit
Implement scss variable injection by OC_Defaults 
Signed-off-by: Julius Haertl <[email protected]>

Add Scss variables to example theme and theming app

Signed-off-by: Julius Haertl <[email protected]>

Use SCSSCacher to build theming css

Signed-off-by: Julius Härtl <[email protected]>

Update theming.scss

Signed-off-by: Julius Härtl <[email protected]>

Code cleanup

Signed-off-by: Julius Härtl <[email protected]>

Fix tests

Signed-off-by: Julius Härtl <[email protected]>

Inject SCSSCacher for easier testing

Signed-off-by: Julius Härtl <[email protected]>

Fix typehint

Signed-off-by: Lukas Reschke <[email protected]>

Generate absolute URLs

Signed-off-by: Lukas Reschke <[email protected]>

Fix tests to always use absolute urls for theming images

Signed-off-by: Julius Härtl <[email protected]>

MailheaderColor -> ColorPrimary

Signed-off-by: Roeland Jago Douma <[email protected]>
  • Loading branch information
@juliusknorr @nickvergessen
juliusknorr authored and nickvergessen committed Apr 25, 2017
commit 68a63ad3f33c683d726219a508bb31de7b9ab1d0
64 changes: 64 additions & 0 deletions apps/theming/css/theming.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
.nc-theming-main-background {
background-color: $color-primary;
}

.nc-theming-main-text {
color: $color-primary-text;
}

.nc-theming-contrast {
color: $color-primary-text;
}

/* invert header icons on bright background */
@if (lightness($color-primary) > 50) {
#header .icon-caret {
background-image: url(../../../core/img/actions/caret-dark.svg);
}
.searchbox input[type="search"] {
background: transparent url(../../../core/img/actions/search.svg) no-repeat 6px center;
}
#appmenu li a img {
-webkit-filter: invert(1);
filter: invert(1);
filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}
}

/* Colorized svg images */
.icon-file, .icon-filetype-text {
background-image: url(../img/core/filetypes/text.svg?v=#{$theming-cachebuster});
}

.icon-folder, .icon-filetype-folder {
background-image: url(./img/core/filetypes/folder.svg?v=#{$theming-cachebuster});
}

.icon-filetype-folder-drag-accept {
background-image: url(./img/core/filetypes/folder-drag-accept.svg?v=#{$theming-cachebuster}) !important;
}

/* override styles for login screen in guest.css */
#header .logo,
#header .logo-icon {
background-size: contain;
background-image: url(#{$image-logo}?v=#{$theming-cachebuster});
}

#body-login,
#firstrunwizard .firstrunwizard-header {
background-image: url(#{$image-login-background}?v=#{$theming-cachebuster});
background-color: $color-primary;
}

input.primary {
background-color: nc-lighten($color-primary, .9);
border: 1px solid $color-primary;
color: $color-primary-text;
}

@if (lightness($color-primary) > 50) {
#body-login input.login {
background-image: url(../../../core/img/actions/confirm.svg);
}
}
Loading