xarxaprod
/
oficinasuport-wp-theme
3
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

added gradient in site-header

This commit is contained in:
jorge 2022-12-23 23:12:24 +01:00
parent 8af80ae258
commit 688c628021
4 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sass/abstracts/variables/_colors.scss
View File

@ -1,11 +1,13 @@
$color__white: #fff; $color__white: #fff;
$color__white-dark: #fdfdfd; $color__white-dark: #fdfdfd;
$color__white-transparent: rgba(255,255,255,0.95);
$color__grey-lighter: #eee; $color__grey-lighter: #eee;
$color__grey-light: #ccc; $color__grey-light: #ccc;
$color__grey-dark: #666; $color__grey-dark: #666;
$color__black-light: #333; $color__black-light: #333;
$color__black-grey: #111; $color__black-grey: #111;
$color__black: #000; $color__black: #000;
$color__black-transparent: rgba(0,0,0,0.95);
$color__orange: #ff8d76; $color__orange: #ff8d76;
$color__yellow: #f6cc4c; $color__yellow: #f6cc4c;
$color__pink: #f877c3; $color__pink: #f877c3;

28
sass/layouts/_no-sidebar.scss
View File

@ -15,7 +15,33 @@
position: sticky; position: sticky;
z-index: 900; z-index: 900;
top: 0; top: 0;
background-color: $color__white; height: 10rem;
margin-bottom: 2rem;
background-color: hsla(0, 0%, 100%, 0.95);
&::after {
content: "";
display: inline-block;
width: 100%;
height: 5rem;
position: absolute;
top:10rem;
// https://css-tricks.com/easing-linear-gradients/
background-image: linear-gradient(
hsla(0, 0%, 100%, 0.95) 5%,
hsla(0, 0%, 100%, 0.738) 19%,
hsla(0, 0%, 100%, 0.541) 34%,
hsla(0, 0%, 100%, 0.382) 47%,
hsla(0, 0%, 100%, 0.278) 56.5%,
hsla(0, 0%, 100%, 0.194) 65%,
hsla(0, 0%, 100%, 0.126) 73%,
hsla(0, 0%, 100%, 0.075) 80.2%,
hsla(0, 0%, 100%, 0.042) 86.1%,
hsla(0, 0%, 100%, 0.021) 91%,
hsla(0, 0%, 100%, 0.008) 95.2%,
hsla(0, 0%, 100%, 0.002) 98.2%,
hsla(0, 0%, 100%, 0) 100%
);
}
.main { .main {
display: flex; display: flex;
flex-flow: row; flex-flow: row;

13
style.css
View File

@ -744,7 +744,18 @@ textarea {
position: sticky; position: sticky;
z-index: 900; z-index: 900;
top: 0; top: 0;
background-color: #fff; height: 10rem;
margin-bottom: 2rem;
background-color: rgba(255, 255, 255, 0.95);
}
.no-sidebar .site-header::after {
content: "";
display: inline-block;
width: 100%;
height: 5rem;
position: absolute;
top: 10rem;
background-image: linear-gradient(rgba(255, 255, 255, 0.95) 5%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, rgba(255, 255, 255, 0) 100%);
} }
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
display: flex; display: flex;

2
style.css.map
View File

File diff suppressed because one or more lines are too long