Merge remote-tracking branch 'adrinux/bulma-css-variables' into bulma-css-variables
All checks were successful
continuous-integration/drone/pr Build is passing
All checks were successful
continuous-integration/drone/pr Build is passing
# Conflicts: # package.json # src/components/misc/no-auth-wrapper.vue # yarn.lock
This commit is contained in:
commit
df62580768
|
@ -7,5 +7,11 @@ const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFu
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Logo alt="Vikunja" />
|
||||
<Logo alt="Vikunja" class="logo" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.logo {
|
||||
color: var(--logo-text-color);
|
||||
}
|
||||
</style>
|
|
@ -5,7 +5,7 @@
|
|||
class="navbar main-theme is-fixed-top"
|
||||
role="navigation"
|
||||
>
|
||||
<router-link :to="{name: 'home'}" class="navbar-item logo">
|
||||
<router-link :to="{name: 'home'}" class="logo-link">
|
||||
<Logo width="164" height="48"/>
|
||||
</router-link>
|
||||
<MenuButton class="menu-button"/>
|
||||
|
@ -137,19 +137,18 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
$vikunja-nav-logo-full-width: 164px;
|
||||
$user-dropdown-width-mobile: 5rem;
|
||||
|
||||
$hamburger-menu-icon-spacing: 1rem;
|
||||
$hamburger-menu-icon-width: 28px;
|
||||
|
||||
.navbar {
|
||||
z-index: 4 !important;
|
||||
}
|
||||
|
||||
.logo {
|
||||
.logo-link {
|
||||
display: none;
|
||||
color: var(--logo-text-color);
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
}
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
align-self: stretch;
|
||||
|
|
|
@ -38,7 +38,6 @@ const motd = computed(() => store.state.config.motd)
|
|||
}
|
||||
|
||||
.logo {
|
||||
max-width: 100%;
|
||||
color: var(--logo-text-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -33,17 +33,12 @@ $transition-duration: 150ms;
|
|||
$transition: $transition-duration ease;
|
||||
|
||||
$button-height: 34px;
|
||||
|
||||
$switch-view-height: 2.69rem;
|
||||
|
||||
$user-dropdown-width-mobile: 5rem;
|
||||
$hamburger-menu-icon-spacing: 1rem;
|
||||
$hamburger-menu-icon-width: 28px;
|
||||
$navbar-height: 4rem;
|
||||
$navbar-width: 300px;
|
||||
$navbar-icon-width: 40px;
|
||||
|
||||
|
||||
$lists-per-row: 5;
|
||||
$list-height: 150px;
|
||||
$list-spacing: 1rem;
|
|
@ -24,45 +24,49 @@
|
|||
--grey-lighter: var(--grey-200);
|
||||
--grey-lightest: var(--grey-100);
|
||||
--input-border-color: var(--grey-200);
|
||||
|
||||
--white-h: 0deg;
|
||||
--white-s: 0%;
|
||||
--white-l: 100%;
|
||||
--white-a: 1;
|
||||
--white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
|
||||
--white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75);
|
||||
|
||||
--black-h: 0deg;
|
||||
--black-s: 0%;
|
||||
--black-l: 4%;
|
||||
--black-a: 1;
|
||||
--black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
|
||||
// $warning / $orange: #ff851b or hsl(27.9, 100%, 55.3%)
|
||||
|
||||
// $warning / $orange: #ff851b
|
||||
--warning-h: 27.9deg;
|
||||
--warning-s: 100%;
|
||||
--warning-l: 55.3%;
|
||||
--warning-a: 1;
|
||||
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
||||
// $success / $green is #00db60 or hsl(146.3, 100%, 42.9%)
|
||||
|
||||
// $success / $green is #00db60
|
||||
--success-h: 146.3deg;
|
||||
--success-s: 100%;
|
||||
--success-l: 42.9%;
|
||||
--success-a: 1;
|
||||
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
||||
// $danger / $red is #ff4136 or hsl(3.3, 100%, 60.6%)
|
||||
|
||||
// $danger / $red is #ff4136
|
||||
--danger-h: 3.3deg;
|
||||
--danger-s: 100%;
|
||||
--danger-l: 60.6%;
|
||||
--danger-a: 1;
|
||||
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
||||
// var(--primary) / $blue is #1973ff or hsl(216.5, 100%, 54.9%)
|
||||
|
||||
// var(--primary) / $blue is #1973ff
|
||||
--primary-h: 216.5deg;
|
||||
--primary-s: 100%;
|
||||
--primary-l: 54.9%;
|
||||
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
|
||||
--primary-light-l: 73%;
|
||||
--primary-a: 1;
|
||||
--primary-hsl: 216.5deg, 100%, 54.9%;
|
||||
--primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
|
||||
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
||||
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
|
||||
// END Overrides of Bulma defaults
|
||||
|
||||
|
||||
// Define custom color variable to prevent change in dark mode
|
||||
|
|
|
@ -843,20 +843,18 @@ $flash-background-duration: 750ms;
|
|||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
// HACK: these styles are repeated from bulma-css-variables/sass/form/shared.sass
|
||||
$input-background-color: var(--scheme-main, #{$scheme-main});
|
||||
$input-border-color: var(--border, #{$border});
|
||||
$input-focus-border-color: var(--link, #{$link});
|
||||
|
||||
&:hover, &:active {
|
||||
background: $input-background-color;
|
||||
border-color: $input-border-color;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: var(--scheme-main);
|
||||
border-color: var(--border);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $input-background-color;
|
||||
border-color: $input-focus-border-color;
|
||||
&:hover,
|
||||
&:active {
|
||||
cursor: text;
|
||||
border-color: var(--link)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -922,6 +920,11 @@ $flash-background-duration: 750ms;
|
|||
}
|
||||
}
|
||||
|
||||
.task-view-container {
|
||||
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
|
||||
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
|
||||
}
|
||||
|
||||
.flash-background-enter-from,
|
||||
.flash-background-enter-active {
|
||||
animation: flash-background $flash-background-duration ease 1;
|
||||
|
|
Reference in New Issue
Block a user