diff options
Diffstat (limited to 'reporting/3rd_party/sass/components/_tiles.scss')
| -rw-r--r-- | reporting/3rd_party/sass/components/_tiles.scss | 258 |
1 files changed, 258 insertions, 0 deletions
diff --git a/reporting/3rd_party/sass/components/_tiles.scss b/reporting/3rd_party/sass/components/_tiles.scss new file mode 100644 index 0000000..cecbbbe --- /dev/null +++ b/reporting/3rd_party/sass/components/_tiles.scss @@ -0,0 +1,258 @@ +///
+/// Phantom by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Tiles */
+
+ .tiles {
+ $gutter: _size(gutter);
+ $duration: 0.5s;
+ $ease: 'ease';
+
+ @include vendor('display', 'flex');
+ @include vendor('flex-wrap', 'wrap');
+ postiion: relative;
+ margin: ($gutter * -1) 0 0 ($gutter * -1);
+
+ article {
+ @include vendor('transition', (
+ 'transform #{$duration} #{$ease}',
+ 'opacity #{$duration} #{$ease}'
+ ));
+ position: relative;
+ width: calc(#{(100% / 3)} - #{$gutter * 1});
+ margin: $gutter 0 0 $gutter;
+
+ > .image {
+ @include vendor('transition', 'transform #{$duration} #{$ease}');
+ position: relative;
+ display: block;
+ width: 100%;
+ border-radius: _size(border-radius);
+ overflow: hidden;
+
+ img {
+ display: block;
+ width: 100%;
+ }
+
+ &:before {
+ @include vendor('pointer-events', 'none');
+ @include vendor('transition', (
+ 'background-color #{$duration} #{$ease}',
+ 'opacity #{$duration} #{$ease}'
+ ));
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 1.0;
+ z-index: 1;
+ opacity: 0.8;
+ }
+
+ &:after {
+ @include vendor('pointer-events', 'none');
+ @include vendor('transition', 'opacity #{$duration} #{$ease}');
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 0.25px; stroke: #ffffff; }</style><line x1="0" y1="0" x2="100" y2="100" /><line x1="100" y1="0" x2="0" y2="100" /></svg>');
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ opacity: 0.25;
+ z-index: 2;
+ }
+ }
+
+ > a {
+ @include vendor('display', 'flex');
+ @include vendor('flex-direction', 'column');
+ @include vendor('align-items', 'center');
+ @include vendor('justify-content', 'center');
+ @include vendor('transition', (
+ 'background-color #{$duration} #{$ease}',
+ 'transform #{$duration} #{$ease}'
+ ));
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding: 1em;
+ border-radius: _size(border-radius);
+ border-bottom: 0;
+ color: _palette(fg-accent);
+ text-align: center;
+ text-decoration: none;
+ z-index: 3;
+
+ > :last-child {
+ margin: 0;
+ }
+
+ &:hover {
+ color: _palette(fg-accent) !important;
+ }
+
+ h2 {
+ margin: 0;
+ }
+
+ .content {
+ @include vendor('transition', (
+ 'max-height #{$duration} #{$ease}',
+ 'opacity #{$duration} #{$ease}'
+ ));
+ width: 100%;
+ max-height: 0;
+ line-height: 1.5;
+ margin-top: 0.35em;
+ opacity: 0;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ &.style1 {
+ > .image:before {
+ background-color: _palette(accent1);
+ }
+ }
+
+ &.style2 {
+ > .image:before {
+ background-color: _palette(accent2);
+ }
+ }
+
+ &.style3 {
+ > .image:before {
+ background-color: _palette(accent3);
+ }
+ }
+
+ &.style4 {
+ > .image:before {
+ background-color: _palette(accent4);
+ }
+ }
+
+ &.style5 {
+ > .image:before {
+ background-color: _palette(accent5);
+ }
+ }
+
+ &.style6 {
+ > .image:before {
+ background-color: _palette(accent6);
+ }
+ }
+
+ body:not(.is-touch) & {
+ &:hover {
+ > .image {
+ @include vendor('transform', 'scale(1.1)');
+
+ &:before {
+ background-color: _palette(bg-accent);
+ opacity: 0.35;
+ }
+
+ &:after {
+ opacity: 0;
+ }
+ }
+
+ .content {
+ max-height: 15em;
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ * + & {
+ margin-top: _size(element-margin);
+ }
+
+ body.is-loading & {
+ article {
+ @include vendor('transform', 'scale(0.9)');
+ opacity: 0;
+ }
+ }
+
+ body.is-touch & {
+ article {
+ .content {
+ max-height: 15em;
+ opacity: 1;
+ }
+ }
+ }
+
+ @include breakpoint(large) {
+ $gutter: _size(gutter) * 0.5;
+
+ margin: ($gutter * -1) 0 0 ($gutter * -1);
+
+ article {
+ width: calc(#{(100% / 3)} - #{$gutter * 1});
+ margin: $gutter 0 0 $gutter;
+ }
+ }
+
+ @include breakpoint(medium) {
+ $gutter: _size(gutter);
+
+ margin: ($gutter * -1) 0 0 ($gutter * -1);
+
+ article {
+ width: calc(#{(100% / 2)} - #{$gutter * 1});
+ margin: $gutter 0 0 $gutter;
+ }
+ }
+
+ @include breakpoint(small) {
+ $gutter: _size(gutter) * 0.5;
+
+ margin: ($gutter * -1) 0 0 ($gutter * -1);
+
+ article {
+ width: calc(#{(100% / 2)} - #{$gutter * 1});
+ margin: $gutter 0 0 $gutter;
+
+ &:hover {
+ > .image {
+ @include vendor('transform', 'scale(1.0)');
+ }
+ }
+ }
+ }
+
+ @include breakpoint(xsmall) {
+ $gutter: _size(gutter) * 0.5;
+
+ margin: 0;
+
+ article {
+ width: 100%;
+ margin: $gutter 0 0 0;
+ }
+ }
+ }
+
|