From d938a333c208c67c890a9e4888d4cbabcc2b1e87 Mon Sep 17 00:00:00 2001 From: Dylan Bolger Date: Wed, 21 Mar 2018 12:19:35 -0500 Subject: working on web --- cydia/assets/sass/components/_button.scss | 156 +++++++++ cydia/assets/sass/components/_form.scss | 275 +++++++++++++++ cydia/assets/sass/components/_gallery.scss | 218 ++++++++++++ cydia/assets/sass/components/_icon.scss | 17 + cydia/assets/sass/components/_image.scss | 169 +++++++++ cydia/assets/sass/components/_list.scss | 380 +++++++++++++++++++++ cydia/assets/sass/components/_panel-banner.scss | 90 +++++ cydia/assets/sass/components/_panel-spotlight.scss | 81 +++++ cydia/assets/sass/components/_panel.scss | 300 ++++++++++++++++ cydia/assets/sass/components/_table.scss | 81 +++++ 10 files changed, 1767 insertions(+) create mode 100644 cydia/assets/sass/components/_button.scss create mode 100644 cydia/assets/sass/components/_form.scss create mode 100644 cydia/assets/sass/components/_gallery.scss create mode 100644 cydia/assets/sass/components/_icon.scss create mode 100644 cydia/assets/sass/components/_image.scss create mode 100644 cydia/assets/sass/components/_list.scss create mode 100644 cydia/assets/sass/components/_panel-banner.scss create mode 100644 cydia/assets/sass/components/_panel-spotlight.scss create mode 100644 cydia/assets/sass/components/_panel.scss create mode 100644 cydia/assets/sass/components/_table.scss (limited to 'cydia/assets/sass/components') diff --git a/cydia/assets/sass/components/_button.scss b/cydia/assets/sass/components/_button.scss new file mode 100644 index 0000000..9ce38c2 --- /dev/null +++ b/cydia/assets/sass/components/_button.scss @@ -0,0 +1,156 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + background-color: transparent; + border: 0; + border-radius: _size(border-radius); + box-shadow: inset 0 0 0 2px _palette(border); + color: _palette(fg-bold) !important; + cursor: pointer; + display: inline-block; + font-family: _font(family-heading); + font-size: 0.6rem; + font-weight: _font(weight-heading); + height: _size(element-height) * 1.1; + letter-spacing: 0.15rem; + line-height: _size(element-height) * 1.1; + padding: 0 1.5rem 0 (1.5rem + 0.15rem); + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + + &:hover { + box-shadow: inset 0 0 0 2px _palette(accent3); + color: _palette(accent3) !important; + } + + &:active { + background-color: transparentize(_palette(accent3), 0.875); + } + + &.icon { + &:before { + display: inline-block; + position: relative; + top: -0.075rem; + vertical-align: middle; + font-size: 0.8rem; + margin: 0 0.375rem 0 -0.325rem; + } + + &.circle { + position: relative; + width: _size(element-height) * 1.25; + height: _size(element-height) * 1.25; + line-height: _size(element-height) * 1.25; + text-indent: _size(element-height) * 1.25; + border-radius: 100%; + overflow: hidden; + padding: 0; + letter-spacing: 0; + + &:before { + display: block; + position: absolute; + top: 0; + left: 0; + width: inherit; + height: inherit; + font-size: 1.25rem; + line-height: inherit; + margin: 0; + text-indent: 0; + } + + &.fa-angle-left { + &:before { + position: relative; + left: -0.1rem; + font-size: 1.75rem; + } + } + + &.fa-angle-right { + &:before { + position: relative; + left: 0.1rem; + font-size: 1.75rem; + } + } + } + } + + &.fit { + display: block; + margin: 0 0 (_size(element-margin) * 0.5) 0; + width: 100%; + } + + &.small { + font-size: 0.4rem; + height: _size(element-height) * 0.75; + line-height: _size(element-height) * 0.75; + padding: 0 1.25rem 0 (1.25rem + 0.15rem); + } + + &.large { + font-size: 0.8rem; + height: _size(element-height) * 1.325; + line-height: _size(element-height) * 1.325; + padding: 0 2rem 0 (2rem + 0.15rem); + } + + &.special { + background-color: rgba(_palette(fg-bold), 1); + box-shadow: none; + color: _palette(bg) !important; + + &.color1 { + color: _palette(accent1) !important; + } + + &.color2 { + color: _palette(accent2) !important; + } + + &.color3 { + color: _palette(accent3) !important; + } + + &.color4 { + color: _palette(accent4) !important; + } + + &:hover { + background-color: _palette(accent3); + } + + &:active { + background-color: desaturate(darken(_palette(accent3), 6), 3); + } + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + cursor: default; + opacity: 0.5; + } + } \ No newline at end of file diff --git a/cydia/assets/sass/components/_form.scss b/cydia/assets/sass/components/_form.scss new file mode 100644 index 0000000..9ff5ab2 --- /dev/null +++ b/cydia/assets/sass/components/_form.scss @@ -0,0 +1,275 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Form */ + + $gutter: (_size(element-margin) * 1); + + form { + + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + width: calc(100% + #{$gutter * 2}); + margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); + + > .field { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + padding: $gutter 0 0 $gutter; + width: calc(100% - #{$gutter * 1}); + + &.half { + width: calc(50% - #{$gutter * 0.5}); + } + + &.third { + width: calc(#{100% / 3} - #{$gutter * (1 / 3)}); + } + + &.quarter { + width: calc(25% - #{$gutter * 0.25}); + } + } + + > .actions { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '1'); + margin: $gutter 0 0 $gutter; + } + } + + label { + color: _palette(fg-bold); + display: block; + font-family: _font(family-heading); + font-size: 0.8rem; + font-weight: _font(weight-heading); + margin: 0 0 (_size(element-margin) * 0.325) 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + select, + textarea { + @include vendor('appearance', 'none'); + background: transparent; + border: solid 2px _palette(border); + border-radius: _size(border-radius); + color: inherit; + display: block; + outline: 0; + padding: 0 0.75rem; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + + &:focus { + border-color: _palette(accent3); + } + } + + option { + background-color: _palette(fg-bold); + color: _palette(bg); + } + + .select-wrapper { + @include icon; + display: block; + position: relative; + + &:before { + display: block; + content: '\f107'; + position: absolute; + top: 0; + right: 0; + width: _size(element-height); + height: _size(element-height); + line-height: _size(element-height); + color: _palette(fg); + pointer-events: none; + text-align: center; + + body.is-ie & { + line-height: 2.5; + } + } + + select::-ms-expand { + display: none; + } + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: _size(element-height); + } + + textarea { + padding: 0.75rem 1rem; + } + + input[type="checkbox"], + input[type="radio"], { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2rem; + opacity: 0; + width: 1rem; + z-index: -1; + + & + label { + @include icon; + position: relative; + color: _palette(fg); + cursor: pointer; + display: inline-block; + font-size: 1rem; + font-weight: _font(weight); + margin-bottom: 0; + padding-left: (_size(element-height) * 0.6) + 1rem; + padding-right: 1rem; + + &:before { + content: ''; + display: inline-block; + position: absolute; + top: 0; + left: 0; + width: (_size(element-height) * 0.6); + height: (_size(element-height) * 0.6); + line-height: (_size(element-height) * 0.575); + background: _palette(border-bg); + border: solid 1px _palette(border); + border-radius: _size(border-radius); + color: _palette(bg); + text-align: center; + + body.is-ie & { + line-height: 1.5; + } + } + } + + &:checked + label { + &:before { + content: '\f00c'; + background: _palette(fg-bold); + border-color: _palette(fg-bold); + } + } + + &:focus + label { + &:before { + border-color: _palette(accent3); + box-shadow: 0 0 0 1px _palette(accent3); + } + } + + &:focus:checked + label { + &:before { + background: _palette(accent3); + } + } + + &.color1 { + & + label { + &:before { + color: _palette(accent1); + } + } + } + + &.color2 { + & + label { + &:before { + color: _palette(accent2); + } + } + } + + &.color3 { + & + label { + &:before { + color: _palette(accent3); + } + } + } + + &.color4 { + & + label { + &:before { + color: _palette(accent4); + } + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + border-radius: _size(border-radius); + } + } + } + + input[type="radio"] { + & + label { + &:before { + border-radius: 100%; + } + } + } + + ::-webkit-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + ::-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-ms-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + .formerize-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + @include breakpoint(small) { + form { + margin: ($gutter * -1) 0 _size(element-margin) 0; + width: 100%; + + > .field { + padding: $gutter 0 0 0; + width: 100% !important; + } + + > .actions { + margin: $gutter 0 0 0; + } + } + } \ No newline at end of file diff --git a/cydia/assets/sass/components/_gallery.scss b/cydia/assets/sass/components/_gallery.scss new file mode 100644 index 0000000..f54b0de --- /dev/null +++ b/cydia/assets/sass/components/_gallery.scss @@ -0,0 +1,218 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Gallery */ + + $pad: _size(pad); + $pad-small-tb: _size(pad-small-tb); + $pad-small-lr: _size(pad-small-lr); + + @include keyframes('gallery-modal-spinner') { + 0% { + @include vendor('transform', 'rotate(0deg)'); + } + + 100% { + @include vendor('transform', 'rotate(360deg)'); + } + } + + .gallery { + @include vendor('align-items', 'stretch'); + @include vendor('display', 'flex'); + height: 100%; + + > * { + width: 20rem; + height: 100%; + } + + .image { + display: block; + position: relative; + border-bottom: 0; + overflow: hidden; + + img { + @include vendor('transition', 'transform #{_duration(transition)} ease-in-out'); + } + + &:after { + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + } + + &:hover { + img { + @include vendor('transform', 'scale(1.025)'); + } + + &:after { + opacity: 0; + } + } + } + + .group { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + + > * { + height: 50%; + } + } + + .modal { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'center'); + @include vendor('pointer-events', 'none'); + @include vendor('user-select', 'none'); + @include vendor('transition', ( + 'opacity #{_duration(gallery-lightbox-fadein)} ease', + 'visibility #{_duration(gallery-lightbox-fadein)}', + 'z-index #{_duration(gallery-lightbox-fadein)}' + )); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparentize(_palette(bg), 1 - _misc(gallery-lightbox-opacity)); + opacity: 0; + outline: 0; + visibility: none; + z-index: 0; + + &:before { + @include vendor('animation', 'gallery-modal-spinner 1s infinite linear'); + @include vendor('transition', 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease'); + @include vendor('transition-delay', '#{_duration(gallery-lightbox-fadein)}'); + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 4rem; + height: 4rem; + margin: -2rem 0 0 -2rem; + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 4rem; + opacity: 0; + } + + &:after { + content: ''; + display: block; + position: absolute; + top: 0.5rem; + right: 0.5rem; + width: 4rem; + height: 4rem; + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 3rem; + cursor: pointer; + } + + .inner { + @include vendor('transform', 'translateY(0.75rem)'); + @include vendor('transition', ( + 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease', + 'transform #{_duration(gallery-lightbox-fadein) * 0.5} ease' + )); + opacity: 0; + + img { + display: block; + max-width: 90vw; + max-height: 85vh; + box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35); + } + } + + &.visible { + @include vendor('pointer-events', 'auto'); + opacity: 1; + visibility: visible; + z-index: _misc(z-index-base) + 1000; + + &:before { + opacity: 1; + } + } + + &.loaded { + .inner { + @include vendor('transform', 'translateY(0)'); + @include vendor('transition', ( + 'opacity #{_duration(gallery-lightbox-fadein)} ease', + 'transform #{_duration(gallery-lightbox-fadein)} ease' + )); + opacity: 1; + } + + &:before { + @include vendor('transition-delay', '0s'); + opacity: 0; + } + } + } + } + + @include breakpoint(medium) { + .gallery { + .modal { + .inner { + img { + max-width: 100vw; + } + } + } + } + } + + @include breakpoint(small) { + .gallery { + @include vendor('flex-direction', 'column'); + height: auto; + + > * { + height: auto; + width: 100%; + } + + .image { + width: 100%; + height: 40rem; + } + + .group { + @include spans(33.33333%); + + .image { + height: 20rem; + } + } + } + } + + @include breakpoint(xsmall) { + .gallery { + .image { + height: 30rem; + } + + .group { + .image { + height: 12.5rem; + } + } + } + } \ No newline at end of file diff --git a/cydia/assets/sass/components/_icon.scss b/cydia/assets/sass/components/_icon.scss new file mode 100644 index 0000000..ce4e37c --- /dev/null +++ b/cydia/assets/sass/components/_icon.scss @@ -0,0 +1,17 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icon */ + + .icon { + @include icon; + position: relative; + border-bottom: none; + + > .label { + display: none; + } + } \ No newline at end of file diff --git a/cydia/assets/sass/components/_image.scss b/cydia/assets/sass/components/_image.scss new file mode 100644 index 0000000..b428fb3 --- /dev/null +++ b/cydia/assets/sass/components/_image.scss @@ -0,0 +1,169 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Image */ + + .image { + display: inline-block; + position: relative; + border: 0; + + &.filtered { + &:after { + @include gradient-background; + @include vendor('pointer-events', 'none'); + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1; + z-index: 1; + } + + &.tinted { + &:after { + @include gradient-background(true); + } + } + } + + &[data-position] { + img { + @include vendor('object-fit', 'cover'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + &[data-position="top left"] { + img { + @include vendor('object-position', 'top left'); + } + } + + &[data-position="top"] { + img { + @include vendor('object-position', 'top'); + } + } + + &[data-position="top right"] { + img { + @include vendor('object-position', 'top right'); + } + } + + &[data-position="right"] { + img { + @include vendor('object-position', 'right'); + } + } + + &[data-position="bottom right"] { + img { + @include vendor('object-position', 'bottom right'); + } + } + + &[data-position="bottom"] { + img { + @include vendor('object-position', 'bottom'); + } + } + + &[data-position="bottom left"] { + img { + @include vendor('object-position', 'bottom left'); + } + } + + &[data-position="left"] { + img { + @include vendor('object-position', 'left'); + } + } + + &[data-position="center"] { + img { + @include vendor('object-position', 'center'); + } + } + + &[data-position="25% 25%"] { + img { + @include vendor('object-position', '25% 25%'); + } + } + + &[data-position="75% 25%"] { + img { + @include vendor('object-position', '75% 25%'); + } + } + + &[data-position="75% 75%"] { + img { + @include vendor('object-position', '75% 75%'); + } + } + + &[data-position="25% 75%"] { + img { + @include vendor('object-position', '25% 75%'); + } + } + + img { + display: block; + } + + &.left, + &.right { + max-width: 40%; + + img { + width: 100%; + } + } + + &.left { + float: left; + padding: 0 1.5rem 1rem 0; + top: 0.25rem; + } + + &.right { + float: right; + padding: 0 0 1rem 1.5rem; + top: 0.25rem; + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.main { + display: block; + margin: 0 0 (_size(element-margin) * 1.5) 0; + width: 100%; + + img { + width: 100%; + } + } + } \ No newline at end of file diff --git a/cydia/assets/sass/components/_list.scss b/cydia/assets/sass/components/_list.scss new file mode 100644 index 0000000..7744695 --- /dev/null +++ b/cydia/assets/sass/components/_list.scss @@ -0,0 +1,380 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +// skel-baseline v3.0.1 | (c) n33 | skel.io | MIT licensed + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 _size(element-margin) 0; + padding-left: 1.25rem; + + li { + padding-left: 0.25rem; + } + } + + ul { + list-style: disc; + margin: 0 0 _size(element-margin) 0; + padding-left: 1rem; + + li { + padding-left: 0.5rem; + } + + &.alt { + list-style: none; + padding-left: 0; + + li { + border-top: solid 1px _palette(border); + padding: 0.5rem 0; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } + } + + &.icons { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 1rem 0 0; + + &:last-child { + padding-right: 0; + } + + .icon { + &:before { + font-size: 1.25em; + } + } + } + } + + &.actions { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 (_size(element-margin) * 0.5) 0 0; + vertical-align: middle; + + &:last-child { + padding-right: 0; + } + } + + &.small { + li { + padding: 0 (_size(element-margin) * 0.25) 0 0; + } + } + + &.vertical { + li { + display: block; + padding: (_size(element-margin) * 0.5) 0 0 0; + + &:first-child { + padding-top: 0; + } + + > * { + margin-bottom: 0; + } + } + + &.small { + li { + padding: (_size(element-margin) * 0.25) 0 0 0; + + &:first-child { + padding-top: 0; + } + } + } + } + + &.fit { + display: table; + margin-left: (_size(element-margin) * -0.5); + padding: 0; + table-layout: fixed; + width: calc(100% + #{(_size(element-margin) * 0.5)}); + + li { + display: table-cell; + padding: 0 0 0 (_size(element-margin) * 0.5); + + > * { + margin-bottom: 0; + } + } + + &.small { + margin-left: (_size(element-margin) * -0.25); + width: calc(100% + #{(_size(element-margin) * 0.25)}); + + li { + padding: 0 0 0 (_size(element-margin) * 0.25); + } + } + } + } + + &.contact-icons { + list-style: none; + padding-left: 0; + + > li { + margin: 1.25rem 0 0 0; + padding-left: 0; + + &:before { + display: inline-block; + width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + border-radius: 2.25rem; + background-color: rgba(_palette(fg-bold), 1); + color: _palette(bg); + cursor: default; + font-size: 1.125rem; + margin-right: 1rem; + text-align: center; + vertical-align: middle; + + body.is-ie & { + line-height: 2.125; + } + } + + a { + border-bottom: 0; + } + } + + &.color1 { + > li { + &:before { + color: _palette(accent1); + } + } + } + + &.color2 { + > li { + &:before { + color: _palette(accent2); + } + } + } + + &.color3 { + > li { + &:before { + color: _palette(accent3); + } + } + } + + &.color4 { + > li { + &:before { + color: _palette(accent4); + } + } + } + } + + &.grid-icons { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + @include vendor('justify-content', 'center'); + list-style: none; + margin: 0 0 _size(element-margin) 0; + padding-left: 0; + + .icon { + display: block; + position: relative; + width: 100%; + text-align: center; + + &:before { + display: block; + width: 6rem; + height: 6rem; + line-height: 6rem; + border-radius: 6rem; + box-shadow: inset 0 0 0 2px _palette(border); + font-size: 2.5rem; + margin: 0 auto; + text-align: center; + + body.is-ie & { + line-height: 2.375; + } + } + } + + > li { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + position: relative; + margin: 1.5rem 0 0 1.5rem; + padding-left: 0; + } + + &.connected { + > li { + &:before { + content: ''; + display: block; + position: absolute; + width: 1.5rem; + height: 2px; + top: 50%; + left: -1.5rem; + background-color: _palette(border); + } + + &:after { + content: ''; + display: block; + position: absolute; + width: 2px; + height: 1.5rem; + top: -1.5rem; + left: 50%; + background-color: _palette(border); + } + } + } + + &.two { + width: 14rem; + + > li { + &:nth-child(-n + 2) { + margin-top: 0; + + &:after { + display: none; + } + } + + &:nth-child(2n - 1) { + margin-left: 0; + + &:before { + display: none; + } + } + } + } + + &.three { + width: 21.5rem; + + > li { + &:nth-child(-n + 3) { + margin-top: 0; + + &:after { + display: none; + } + } + + &:nth-child(3n - 2) { + margin-left: 0; + + &:before { + display: none; + } + } + } + } + + &.four { + width: 29rem; + + > li { + &:nth-child(-n + 4) { + margin-top: 0; + + &:after { + display: none; + } + } + + &:nth-child(4n - 3) { + margin-left: 0; + + &:before { + display: none; + } + } + } + } + } + } + + dl { + margin: 0 0 _size(element-margin) 0; + + dt { + display: block; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + dd { + margin-left: _size(element-margin); + } + } + + @include breakpoint(small) { + ul { + &.grid-icons { + @include vendor('justify-content', 'flex-start'); + width: 100% !important; + margin: -1rem 0 _size(element-margin) -1rem; + + .icon { + &:before { + width: 4.5rem; + height: 4.5rem; + line-height: 4.5rem; + font-size: 1.75rem; + } + } + + > li { + margin: 1rem 0 0 1rem !important; + + &:before { + display: none !important; + } + + &:after { + display: none !important; + } + } + } + } + } \ No newline at end of file diff --git a/cydia/assets/sass/components/_panel-banner.scss b/cydia/assets/sass/components/_panel-banner.scss new file mode 100644 index 0000000..983ad32 --- /dev/null +++ b/cydia/assets/sass/components/_panel-banner.scss @@ -0,0 +1,90 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Panel (Banner) */ + + $pad: _size(pad); + $pad-small-tb: _size(pad-small-tb); + $pad-small-lr: _size(pad-small-lr); + + .panel.banner { + @include vendor('align-items', 'stretch'); + + .content { + @include padding($pad, $pad); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('justify-content', 'center'); + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + + > .actions:last-child { + margin-bottom: 0; + } + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + position: relative; + + img { + @include vendor('object-fit', 'cover'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + &.left { + @include vendor('flex-direction', 'row'); + } + + &.right { + @include vendor('flex-direction', 'row-reverse'); + } + } + + @include breakpoint(small) { + .panel.banner { + .content { + @include padding($pad-small-tb, $pad-small-lr); + @include vendor('flex-basis', '60%'); + + > .actions:last-child { + margin-bottom: _size(element-margin); + } + } + + .image { + @include vendor('flex-basis', '40%'); + } + } + + @include orientation(portrait) { + .panel.banner { + .content { + @include vendor('flex-basis', 'auto'); + } + + .image { + @include vendor('flex-basis', 'auto'); + height: 18rem; + } + + &.left { + @include vendor('flex-direction', 'column'); + } + + &.right { + @include vendor('flex-direction', 'column-reverse'); + } + } + } + } \ No newline at end of file diff --git a/cydia/assets/sass/components/_panel-spotlight.scss b/cydia/assets/sass/components/_panel-spotlight.scss new file mode 100644 index 0000000..e84a3fd --- /dev/null +++ b/cydia/assets/sass/components/_panel-spotlight.scss @@ -0,0 +1,81 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Panel (Spotlight) */ + + $pad: _size(pad); + $pad-small-tb: _size(pad-small-tb); + $pad-small-lr: _size(pad-small-lr); + + .panel.spotlight { + @include vendor('align-items', 'stretch'); + position: relative; + + > * { + z-index: 1; + } + + .content { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('justify-content', 'center'); + @include padding($pad, $pad); + } + + .image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + + img { + @include vendor('object-fit', 'cover'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + &.left { + @include vendor('justify-content', 'flex-start'); + + .content { + background-image: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%); + } + } + + &.right { + @include vendor('justify-content', 'flex-end'); + + .content { + background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%); + } + } + } + + @include breakpoint(small) { + .panel.spotlight { + .content { + @include padding($pad-small-tb, $pad-small-lr); + @include vendor('flex-direction', 'column !important'); + background-image: linear-gradient(0deg, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.175)) !important; + min-height: 25rem; + } + } + } + + @include breakpoint(xsmall) { + .panel.spotlight { + .content { + min-height: 30rem; + } + } + } \ No newline at end of file diff --git a/cydia/assets/sass/components/_panel.scss b/cydia/assets/sass/components/_panel.scss new file mode 100644 index 0000000..2771c31 --- /dev/null +++ b/cydia/assets/sass/components/_panel.scss @@ -0,0 +1,300 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Panel */ + + $pad: _size(pad); + $pad-small-tb: _size(pad-small-tb); + $pad-small-lr: _size(pad-small-lr); + + @mixin panel-colors { + $opacity: 0.175; + $darken: 3; + $desaturate: 3; + + &.color0 { + @include gradient-background(false, 1, 20%, 60%); + } + + &.color1 { + @include gradient-background; + background-color: _palette(accent1); + } + + &.color2 { + @include gradient-background; + background-color: _palette(accent2); + } + + &.color3 { + @include gradient-background; + background-color: _palette(accent3); + } + + &.color4 { + @include gradient-background; + background-color: _palette(accent4); + } + + &.color1-alt { + @include gradient-background(false, $opacity); + background-color: desaturate(darken(_palette(accent1), $darken), $desaturate); + } + + &.color2-alt { + @include gradient-background(false, $opacity); + background-color: desaturate(darken(_palette(accent2), $darken), $desaturate); + } + + &.color3-alt { + @include gradient-background(false, $opacity); + background-color: desaturate(darken(_palette(accent3), $darken), $desaturate); + } + + &.color4-alt { + @include gradient-background(false, $opacity); + background-color: desaturate(darken(_palette(accent4), $darken), $desaturate); + } + } + + .panel { + @include vendor('display', 'flex'); + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + @include vendor('justify-content', 'center'); + @include vendor('align-items', 'stretch'); + height: 100%; + overflow-x: hidden; + overflow-y: auto; + + > * { + position: relative; + min-width: 10rem; + + @include panel-colors; + } + + > .intro { + @include padding($pad, $pad); + @include vendor('display', 'flex'); + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + @include vendor('justify-content', 'center'); + @include vendor('align-items', 'flex-start'); + @include vendor('flex-direction', 'column'); + width: 22rem; + + &.joined { + width: (22rem - $pad); + padding-right: 0; + + & + .inner { + padding-left: ($pad * 0.75); + } + } + } + + > .inner { + @include padding($pad, $pad); + @include vendor('display', 'flex'); + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + @include vendor('justify-content', 'center'); + @include vendor('align-items', 'flex-start'); + @include vendor('flex-direction', 'column'); + position: relative; + width: 100%; + + &.columns { + @include vendor('display', 'flex'); + @include vendor('justify-content', 'center'); + @include vendor('align-items', 'center'); + @include vendor('flex-direction', 'row'); + + > * { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + margin-left: $pad; + } + + > :first-child { + margin-left: 0; + } + + &.divided { + > * { + margin-left: ($pad * 2); + + &:before { + content: ''; + position: absolute; + top: $pad; + width: 2px; + height: calc(100% - #{$pad * 2}); + margin-left: ($pad * -1); + background-color: _palette(border); + } + } + + > :first-child { + margin-left: 0; + + &:before { + display: none; + } + } + } + + &.aligned { + @include vendor('align-items', 'flex-start'); + } + } + } + + @include spans(_size(span-fixed)); + + &.small { + width: 35rem; + } + + &.medium { + width: 50rem; + } + + &.large { + width: 65rem; + } + + &.small, + &.medium, + &.large { + @include spans(_size(span-variable)); + } + + @include panel-colors; + } + + @mixin panel-colors-small { + $opacity: 0.175; + $darken: 3; + $desaturate: 3; + + &.color1 { + @include gradient-background-small; + background-color: _palette(accent1); + } + + &.color2 { + @include gradient-background-small; + background-color: _palette(accent2); + } + + &.color3 { + @include gradient-background-small; + background-color: _palette(accent3); + } + + &.color4 { + @include gradient-background-small; + background-color: _palette(accent4); + } + + &.color1-alt { + @include gradient-background-small(false, $opacity); + background-color: desaturate(darken(_palette(accent1), $darken), $desaturate); + } + + &.color2-alt { + @include gradient-background-small(false, $opacity); + background-color: desaturate(darken(_palette(accent2), $darken), $desaturate); + } + + &.color3-alt { + @include gradient-background-small(false, $opacity); + background-color: desaturate(darken(_palette(accent3), $darken), $desaturate); + } + + &.color4-alt { + @include gradient-background-small(false, $opacity); + background-color: desaturate(darken(_palette(accent4), $darken), $desaturate); + } + } + + @include breakpoint(small) { + .panel { + @include vendor('flex-direction', 'column'); + height: auto; + + > * { + @include panel-colors-small; + } + + > .intro { + @include padding($pad-small-tb, $pad-small-lr); + width: 100% !important; + + &.joined { + padding-bottom: 0; + padding-right: $pad-small-lr; + + & + .inner { + padding-top: 0; + padding-left: $pad-small-lr; + } + } + } + + > .inner { + @include padding($pad-small-tb, $pad-small-lr); + + &.columns { + @include vendor('flex-direction', 'column'); + + > * { + margin-left: 0; + margin-top: 0; + } + + > :first-child { + margin-top: 0; + } + + &.divided { + > * { + margin-left: 0; + margin-top: ($pad-small-lr * 2); + + &:before { + content: ''; + position: absolute; + top: auto; + left: $pad-small-lr; + width: calc(100% - #{$pad-small-lr * 2}); + height: 2px; + margin-left: 0; + margin-top: ($pad-small-lr * -1); + } + } + + > :first-child { + margin-top: 0; + } + } + } + } + + @include spans-small(_size(span-fixed)); + + &.small, + &.medium, + &.large { + @include spans-small(_size(span-variable)); + width: 100% !important; + } + + @include panel-colors-small; + } + } \ No newline at end of file diff --git a/cydia/assets/sass/components/_table.scss b/cydia/assets/sass/components/_table.scss new file mode 100644 index 0000000..212bee0 --- /dev/null +++ b/cydia/assets/sass/components/_table.scss @@ -0,0 +1,81 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + tbody { + tr { + border: solid 1px _palette(border); + border-left: 0; + border-right: 0; + + &:nth-child(2n + 1) { + background-color: _palette(border-bg); + } + } + } + + td { + padding: 0.75rem 0.75rem; + } + + th { + color: _palette(fg-bold); + font-size: 0.9rem; + font-weight: _font(weight-bold); + padding: 0 0.75rem 0.75rem 0.75rem; + text-align: left; + } + + thead { + border-bottom: solid 2px _palette(border); + } + + tfoot { + border-top: solid 2px _palette(border); + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid 1px _palette(border); + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: 1px; + } + } + + &:first-child { + td { + border-top-width: 1px; + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } \ No newline at end of file -- cgit v1.2.3