diff options
Diffstat (limited to 'assets/sass/components/_panel.scss')
| -rw-r--r-- | assets/sass/components/_panel.scss | 300 |
1 files changed, 0 insertions, 300 deletions
diff --git a/assets/sass/components/_panel.scss b/assets/sass/components/_panel.scss deleted file mode 100644 index 2771c31..0000000 --- a/assets/sass/components/_panel.scss +++ /dev/null @@ -1,300 +0,0 @@ -///
-/// 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 |