create-catalyst-app 0.0.1-beta.2 → 0.0.1-beta.21

package/templates/common/src/static/css/base/layout.scss

@@ -1,242 +0,0 @@
-.minHeight100 {
-    height: 100vh;
-}
-
-.containerFluid {
-    width: 100%;
-    padding: 8px 16px 16px;
-}
-
-.container-fluid {
-    // only to be used on VISUALLY root level elements (containers containing components) which do not have full width atoms/molecules inside it
-    width: 100%;
-    padding-left: 12px; // the only exception in the entire DLS to ensure an imaginary 16px indentation
-    padding-right: 12px;
-}
-
-.container-fluid-padded {
-    // same as the above
-    width: 100%;
-    padding: makespace(2) 12px;
-}
-
-.container-fluid-padded-xl {
-    width: 100%;
-    padding: makespace(3) 12px;
-}
-
-.gutter-only {
-    // to be used only in very very crucial scenarios. You almost NEVER need it, if think you do, you're doing something wrong at the atom level
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.fullWidth {
-    width: 100%;
-}
-
-.col-1 {
-    width: $col;
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.col-2 {
-    width: calc(calc(#{$col} * 2) + 8px);
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.col-3 {
-    width: calc(calc(#{$col} * 3) + 16px);
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.col-4 {
-    width: calc(calc(#{$col} * 4) + 24px);
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.col-5 {
-    width: calc(calc(#{$col} * 5) + 32px);
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.col-6 {
-    width: calc(calc(#{$col} * 6) + 40px);
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.marginTop-4 {
-    margin-top: $gutter;
-}
-
-.marginTop-8 {
-    margin-top: makespace(1);
-}
-
-.marginTop-16 {
-    margin-top: makespace(2);
-}
-
-.marginTop-24 {
-    margin-top: makespace(3);
-}
-
-.marginTop-32 {
-    margin-top: makespace(4);
-}
-
-.marginTop-40 {
-    margin-top: makespace(5);
-}
-
-.marginTop-48 {
-    margin-top: makespace(6);
-}
-
-.marginBottom-24 {
-    margin-bottom: makespace(3);
-}
-
-.marginTop-96 {
-    margin-top: makespace(12);
-}
-
-.marginBoth-4 {
-    margin-top: $gutter;
-    margin-bottom: $gutter;
-}
-
-.marginBoth-8 {
-    margin-top: makespace(1);
-    margin-bottom: makespace(1);
-}
-
-.marginBoth-16 {
-    margin-top: makespace(2);
-    margin-bottom: makespace(2);
-}
-
-.marginBoth-24 {
-    margin-top: makespace(3);
-    margin-bottom: makespace(3);
-}
-
-.marginBoth-40 {
-    margin-top: makespace(5);
-    margin-bottom: makespace(5);
-}
-
-.marginBoth-48 {
-    margin-top: makespace(6);
-    margin-bottom: makespace(6);
-}
-
-.paddingBoth-8 {
-    padding-top: makespace(1);
-    padding-bottom: makespace(1);
-}
-
-.paddingBoth-16 {
-    padding-top: makespace(2);
-    padding-bottom: makespace(2);
-}
-
-.paddingBoth-40 {
-    padding-top: makespace(5);
-    padding-bottom: makespace(5);
-}
-
-// This is where most used flex attributes throughout our codebase should go
-
-.flex {
-    display: flex;
-}
-
-.flexColumn {
-    display: flex;
-    flex-direction: column;
-}
-
-.flexWrap {
-    flex-wrap: wrap;
-}
-
-.alignCenter {
-    align-items: center;
-}
-
-.alignBase {
-    align-items: baseline;
-}
-
-.alignFlexEnd {
-    align-items: flex-end;
-}
-
-.justifyCenter {
-    justify-content: center;
-}
-
-.justifyBetween {
-    justify-content: space-between;
-}
-
-.justifyEnd {
-    justify-content: flex-end;
-}
-
-.spaceAround {
-    justify-content: space-around;
-}
-
-.middleDivider {
-    margin-left: makespace(2);
-    margin-right: makespace(2);
-}
-
-.insetDivider {
-    margin-left: makespace(1);
-    margin-right: makespace(1);
-}
-
-.displayNone {
-    display: none;
-}
-
-.textCenter {
-    text-align: center;
-}
-
-.textRight {
-    text-align: right;
-}
-
-.textUnderline {
-    text-decoration: underline;
-}
-
-.minHeight-100 {
-    min-height: 100vh;
-}
-
-.smallBorderRadius {
-    border-radius: 4px;
-}
-
-.borderRadius {
-    border-radius: makespace(1);
-}
-
-//WIDGET
-
-.widget-container {
-    width: 100%;
-    padding-top: makespace(1);
-    padding-bottom: makespace(2);
-}

package/templates/common/src/static/css/base/typography.scss

@@ -1,285 +0,0 @@
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 300;
-    font-display: block;
-    src: local("Inter Light"), local("Inter-Light"), url($font_url + "Inter-Light-Subset.otf");
-    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 400;
-    font-display: block;
-    src: local("Inter Regular"), local("Inter-Regular"), url($font_url + "Inter-Regular-Subset.otf");
-    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 400;
-    font-display: block;
-    src: local("Inter Italic"), local("Inter-Italic"), url($font_url + "Inter-Italic-Subset.otf");
-    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 500;
-    font-display: block;
-    src: local("Inter Medium"), local("Inter-Medium"), url($font_url + "Inter-Medium-Subset.otf");
-    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 600;
-    font-display: block;
-    src: local("Inter SemiBold"), local("Inter-SemiBold"), url($font_url + "Inter-SemiBold-Subset.otf");
-    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 700;
-    font-display: block;
-    src: local("Inter Bold"), local("Inter-Bold"), url($font_url + "Inter-Bold-Subset.otf");
-    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
-}
-
-html {
-    font-size: $font-size-body + px;
-    line-height: $line-height-base;
-}
-
-h1 {
-    font-size: remy($font-size-l3);
-    font-weight: $font-weight-regular;
-    line-height: $line-height-base;
-    margin: 0;
-}
-
-h2 {
-    font-size: remy($font-size-l4);
-    font-weight: $font-weight-semi-bold;
-    line-height: $line-height-base;
-    margin: 0;
-}
-
-h3 {
-    font-size: remy($font-size-l5);
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
-    margin: 0;
-}
-
-p {
-    font-size: remy($font-size-body);
-    line-height: $line-height-base;
-    margin: 0;
-    word-break: break-word;
-    overflow-wrap: break-word;
-}
-
-.heroSemiBold {
-    font-size: remy($font-size-hero);
-    font-weight: $font-weight-semi-bold;
-    line-height: $line-height-base;
-}
-
-.heroMedium {
-    font-size: remy($font-size-hero);
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
-}
-
-.heroRegular {
-    font-size: remy($font-size-hero);
-    font-weight: $font-weight-regular;
-    line-height: $line-height-base;
-}
-
-.l1SemiBold {
-    font-size: remy($font-size-l1);
-    font-weight: $font-weight-semi-bold;
-    line-height: $line-height-base;
-}
-
-.l1Medium {
-    font-size: remy($font-size-l1);
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
-}
-
-.l1Regular {
-    font-size: remy($font-size-l1);
-    font-weight: $font-weight-regular;
-    line-height: $line-height-base;
-}
-
-.l2SemiBold {
-    font-size: remy($font-size-l2);
-    font-weight: $font-weight-semi-bold;
-    line-height: $line-height-base;
-}
-
-.l2Medium {
-    font-size: remy($font-size-l2);
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
-}
-
-.l2Regular {
-    font-size: remy($font-size-l2);
-    font-weight: $font-weight-regular;
-    line-height: $line-height-base;
-}
-
-.l3SemiBold {
-    font-size: remy($font-size-l3);
-    font-weight: $font-weight-semi-bold;
-    line-height: $line-height-base;
-}
-
-.l3Medium {
-    font-size: remy($font-size-l3);
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
-}
-
-.l3Regular {
-    font-size: remy($font-size-l3);
-    font-weight: $font-weight-regular;
-    line-height: $line-height-base;
-}
-
-.l4SemiBold {
-    font-size: remy($font-size-l4);
-    font-weight: $font-weight-semi-bold;
-    line-height: $line-height-base;
-}
-
-.l4Medium {
-    font-size: remy($font-size-l4);
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
-}
-
-.l4Regular {
-    font-size: remy($font-size-l4);
-    font-weight: $font-weight-regular;
-    line-height: $line-height-base;
-}
-
-.l5SemiBold {
-    font-size: remy($font-size-l5);
-    font-weight: $font-weight-semi-bold;
-    line-height: $line-height-base;
-}
-
-.l5Medium {
-    font-size: remy($font-size-l5);
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
-}
-
-.l5Regular {
-    font-size: remy($font-size-l5);
-    font-weight: $font-weight-regular;
-    line-height: $line-height-base;
-}
-
-.bodySemiBold {
-    font-size: remy($font-size-body);
-    font-weight: $font-weight-semi-bold;
-    line-height: $line-height-base;
-}
-
-.bodyMedium {
-    font-size: remy($font-size-body);
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
-}
-
-.bodyRegular {
-    font-size: remy($font-size-body);
-    font-weight: $font-weight-regular;
-    line-height: $line-height-base;
-}
-
-.smallSemiBold {
-    font-size: remy($font-size-small);
-    font-weight: $font-weight-semi-bold;
-    line-height: $line-height-base;
-}
-
-.smallMedium {
-    font-size: remy($font-size-small);
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
-}
-
-.smallRegular {
-    font-size: remy($font-size-small);
-    font-weight: $font-weight-regular;
-    line-height: $line-height-base;
-}
-
-.xSmallSemiBold {
-    font-size: remy($font-size-x-small);
-    font-weight: $font-weight-semi-bold;
-    line-height: $line-height-x-small;
-}
-
-.xSmallMedium {
-    font-size: remy($font-size-x-small);
-    font-weight: $font-weight-medium;
-    line-height: $line-height-x-small;
-}
-
-.xSmallRegular {
-    font-size: remy($font-size-x-small);
-    font-weight: $font-weight-regular;
-    line-height: $line-height-x-small;
-}
-
-.textPrimary {
-    color: $information-primary;
-}
-
-.textSecondary {
-    color: $information-secondary;
-}
-
-.textTertiary {
-    color: $information-tertiary;
-}
-
-//EXCEPTIONS Please fix it in DLS 2.0
-.errorColor {
-    background-color: $error-background;
-    color: $error;
-}
-
-.cautionColor {
-    background-color: $caution-background;
-    color: $caution;
-}
-
-.successColor {
-    background-color: $success-background;
-    color: $success;
-}
-
-.noAnchorColor {
-    color: $information-primary;
-}
-
-.breakWord {
-    word-break: break-word;
-}

package/templates/common/src/static/css/resources/_mixins.scss

@@ -1,196 +0,0 @@
-/**
-    @param: Number like 1, 2 or 3
-    @returns: Space in multiples of 8px
-*/
-@function makespace($spaceMultiple) {
-    @if $spaceMultiple == 4 {
-        $spaceMultiple: 5;
-    }
-    @return ($spaceMultiple * $base-space);
-}
-
-/**
-    @param: Input size in px
-    @returns: Size in rem
-*/
-@function remy($pxsize) {
-    @return calc($pxsize/$font-size-body) + rem;
-}
-
-@mixin font-size($size) {
-    // font-size: $size + px; // For unsupported browsers
-    font-size: remy($size);
-}
-
-// @mixin vertical-center {
-//     position: relative;
-//     top: 50%;
-//     -ms-transform: translateY(-50%);
-//     -webkit-transform: translateY(-50%);
-//     transform: translateY(-50%);
-// }
-
-// @mixin keyframes($name) {
-//     @-webkit-keyframes #{$name} {
-//         @content;
-//     }
-//     @-moz-keyframes #{$name} {
-//         @content;
-//     }
-//     @keyframes #{$name} {
-//         @content;
-//     }
-// }
-
-// @mixin text-shorten {
-//     overflow: hidden;
-//     text-overflow: ellipsis;
-//     white-space: nowrap;
-// }
-
-// Clearfix mixin
-// %clearfix {
-//     *zoom: 1;
-
-//     &::before,
-//     &::after {
-//         content: " ";
-//         display: table;
-//     }
-
-//     &::after {
-//         clear: both;
-//     }
-// }
-
-// @mixin generateRatings {
-//     @each $index, $color, $text-color in $rating-bg-colors-map {
-//         .rating-#{$index} {
-//             background: $color;
-//             color: $text-color;
-//         }
-//     }
-// }
-
-@mixin optional-at-root($sel) {
-    @at-root #{if(not &, $sel, selector-append(&, $sel))} {
-        @content;
-    }
-}
-
-@mixin placeholder {
-    @include optional-at-root("::-webkit-input-placeholder") {
-        @content;
-    }
-
-    @include optional-at-root(":-moz-placeholder") {
-        @content;
-    }
-
-    @include optional-at-root("::-moz-placeholder") {
-        @content;
-    }
-
-    @include optional-at-root(":-ms-input-placeholder") {
-        @content;
-    }
-}
-
-// @mixin transition($transition-property, $transition-time, $method) {
-//     -webkit-transition: $transition-property $transition-time $method;
-//     -moz-transition: $transition-property $transition-time $method;
-//     -ms-transition: $transition-property $transition-time $method;
-//     -o-transition: $transition-property $transition-time $method;
-//     transition: $transition-property $transition-time $method;
-// }
-
-// @mixin enhanceAnimations() {
-//     -webkit-transform: translate3d(0, 0, 0);
-//     -moz-transform: translate3d(0, 0, 0);
-//     -ms-transform: translate3d(0, 0, 0);
-//     -o-transform: translate3d(0, 0, 0);
-//     transform: translate3d(0, 0, 0);
-
-//     // stoping flickering on chrome
-//     // -webkit-transform-style: preserve-3d;
-//     // -webkit-perspective: 1000;
-//     // -webkit-backface-visibility: hidden;
-// }
-
-// @mixin only-mobile {
-//     @media (max-width: #{$tablet-width}) {
-//         @content;
-//     }
-// }
-
-// @mixin tablet {
-//     @media (min-width: #{$tablet-width}) {
-//         @content;
-//     }
-// }
-
-// @mixin only-tablet {
-//     @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width}) {
-//         @content;
-//     }
-// }
-
-// @mixin desktop {
-//     @media (min-width: #{$desktop-width}) {
-//         @content;
-//     }
-// }
-
-// @mixin only-desktop {
-//     @media (min-width: #{$desktop-width}) and (max-width: #{$large-width}) {
-//         @content;
-//     }
-// }
-
-// @mixin large {
-//     @media (min-width: #{$large-width}) {
-//         @content;
-//     }
-// }
-
-// @mixin box-sizing($box-model) {
-//     -webkit-box-sizing: $box-model; // Safari <= 5
-//     -moz-box-sizing: $box-model; // Firefox <= 19
-//     box-sizing: $box-model;
-// }
-
-// @mixin border-radius($radius) {
-//     -webkit-border-radius: $radius;
-//     border-radius: $radius;
-//     background-clip: padding-box; /* stops bg color from leaking outside the border: */
-// }
-
-// @mixin opacity($opacity) {
-//     opacity: $opacity;
-//     $opacity-ie: $opacity * 100;
-
-//     filter: alpha(opacity=$opacity-ie); //IE8
-// }
-
-// hack to remove scrollbars from chrome and IE
-@mixin hideScroll() {
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-        width: 0 !important; /* stylelint-disable-line */
-    }
-}
-
-// Sidebar Widget / Full width container mixin
-// @mixin contentWidth($container-width) {
-//     width: $container-width;
-// }
-
-@mixin truncateAfterNumberOfLines($lines) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    line-clamp: $lines;
-    -webkit-line-clamp: $lines;
-    -webkit-box-orient: vertical;
-}

package/templates/common/src/static/css/resources/_vendors.scss

@@ -1 +0,0 @@
-/* Import or define any sass mixins, functions, and vendor mixins below */