explosion/spaCy
1
1
Fork 0
mirror of https://github.com/explosion/spaCy.git synced 2025-02-04 21:50:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

Combine table scroll shadows if row has only one cell

Browse Source
This commit is contained in:
ines 2017-10-29 03:56:37 +01:00
parent b11928abc2
commit 47fd254ba7
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
website/assets/css/_components/_tables.sass
View File

@ -62,9 +62,15 @@
&:last-child &:last-child
@include scroll-shadow-cover(right, $color-back) @include scroll-shadow-cover(right, $color-back)
&:first-child:last-child
@include scroll-shadow-cover(both, $color-back)
.c-table__row--foot .c-table__cell .c-table__row--foot .c-table__cell
&:first-child &:first-child
@include scroll-shadow-cover(left, lighten($color-subtle-light, 2)) @include scroll-shadow-cover(left, lighten($color-subtle-light, 2))
&:last-child &:last-child
@include scroll-shadow-cover(right, lighten($color-subtle-light, 2)) @include scroll-shadow-cover(right, lighten($color-subtle-light, 2))
&:first-child:last-child
@include scroll-shadow-cover(both, lighten($color-subtle-light, 2))

13
website/assets/css/_mixins.sass
View File

@ -42,6 +42,9 @@
// $scroll-shadow-side - side to cover shadow (left or right) // $scroll-shadow-side - side to cover shadow (left or right)
// $scroll-shadow-background - original background color to match // $scroll-shadow-background - original background color to match
@function scroll-shadow-gradient($scroll-gradient-direction, $scroll-shadow-background)
@return linear-gradient(to #{$scroll-gradient-direction}, rgba($scroll-shadow-background, 1) 50%, rgba($scroll-shadow-background, 0) 100%)
@mixin scroll-shadow-base($scroll-shadow-color, $scroll-shadow-intensity: 0.2) @mixin scroll-shadow-base($scroll-shadow-color, $scroll-shadow-intensity: 0.2)
background: radial-gradient(ellipse at 0 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, rgba(0,0,0,0) 75%) 0 center, radial-gradient(ellipse at 100% 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, transparent 75%) 100% center background: radial-gradient(ellipse at 0 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, rgba(0,0,0,0) 75%) 0 center, radial-gradient(ellipse at 100% 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, transparent 75%) 100% center
background-attachment: scroll, scroll background-attachment: scroll, scroll
@ -50,16 +53,20 @@
@mixin scroll-shadow-cover($scroll-shadow-side, $scroll-shadow-background) @mixin scroll-shadow-cover($scroll-shadow-side, $scroll-shadow-background)
$scroll-gradient-direction: right !default $scroll-gradient-direction: right !default
background-repeat: no-repeat
@if $scroll-shadow-side == right @if $scroll-shadow-side == right
$scroll-gradient-direction: left $scroll-gradient-direction: left
background-position: 100% 0 background-position: 100% 0
background-image: linear-gradient(to #{$scroll-gradient-direction}, rgba($scroll-shadow-background, 1) 50%, rgba($scroll-shadow-background, 0) 100%) @if $scroll-shadow-side == both
background-repeat: no-repeat background-image: scroll-shadow-gradient(left, $scroll-shadow-background), scroll-shadow-gradient(right, $scroll-shadow-background)
background-position: 100% 0, 0 0
background-size: 20px 100%, 20px 100%
@else
background-image: scroll-shadow-gradient($scroll-gradient-direction, $scroll-shadow-background)
background-size: 20px 100% background-size: 20px 100%
// Full vertical scroll shadows // Full vertical scroll shadows
// adapted from: https://codepen.io/laustdeleuran/pen/DBaAu // adapted from: https://codepen.io/laustdeleuran/pen/DBaAu