q2-tecton-theme 1.14.3 → 1.16.0

package/src/styles/utils/_grid.scss

@@ -0,0 +1,111 @@
+@mixin grid() {
+    @for $index from 1 through 12 {
+        &-#{$index} {
+            flex: 0 0 #{100% * $index/12};
+            max-width: #{100% * $index/12};
+        }
+
+        &-offset-#{$index} {
+            // Deprecated: Will be removed when upgrade path easier
+            margin-left: #{100% * $index/12};
+        }
+    }
+}
+
+.q2-row {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 0 calc(var(--app-scale-3x) * -1 / 2);
+
+    &.no-gutters {
+        margin: 0;
+
+        .q2-col {
+            padding: 0;
+        }
+    }
+
+    &.left-align-columns {
+        justify-content: flex-start;
+    }
+
+    &.center-align-columns {
+        justify-content: center;
+    }
+
+    &.right-align-columns {
+        justify-content: flex-end;
+    }
+
+    &.top-align-columns {
+        align-items: flex-start;
+    }
+
+    &.v-center-align-columns {
+        align-items: center;
+    }
+
+    &.bottom-align-columns {
+        align-items: flex-end;
+    }
+
+    .q2-col {
+        flex: 1 1 auto;
+        box-sizing: border-box;
+        padding: 0 calc(var(--app-scale-3x, 15px) / 2);
+
+        &,
+        &.xs {
+            @include grid();
+        }
+
+        &.sm {
+            @include breakpoint(sm) {
+                @include grid();
+            }
+        }
+
+        &.md {
+            @include breakpoint(md) {
+                @include grid();
+            }
+        }
+
+        &.lg {
+            @include breakpoint(lg) {
+                @include grid();
+            }
+        }
+
+        &.xl {
+            @include breakpoint(xl) {
+                @include grid();
+            }
+        }
+
+        &.left-align {
+            margin-right: auto;
+        }
+
+        &.center-align {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        &.right-align {
+            margin-left: auto;
+        }
+
+        &.top-align {
+            align-self: flex-start;
+        }
+
+        &.v-center-align {
+            align-self: center;
+        }
+
+        &.bottom-align {
+            align-self: flex-end;
+        }
+    }
+}

package/src/styles/utils/_index.scss

@@ -0,0 +1,3 @@
+@import 'normalize';
+@import 'typography';
+@import 'grid';

package/src/styles/utils/_normalize.scss

@@ -0,0 +1,268 @@
+/*
+    Tecton Normalize
+    Inpsired by base q2-app _bootstrap.scss but conflicting resets are removed.
+*/
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+address,
+summary {
+    display: block;
+}
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+[hidden] {
+    display: none;
+}
+
+html {
+    font-family: var(--t-font-family, sans-serif);
+
+    /* stylelint-disable */
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+
+    /* stylelint-enable */
+}
+
+body {
+    margin: 0;
+}
+
+a:focus {
+    outline: thin dotted;
+}
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+b,
+strong {
+    font-weight: 700;
+}
+
+dfn {
+    font-style: italic;
+}
+
+hr {
+    height: 0;
+    margin-top: var(--app-scale-4x, 20px);
+    margin-bottom: var(--app-scale-4x, 20px);
+    border: 0;
+    border-top: 1px solid var(--t-gray-12, #d9d9d9);
+    box-sizing: content-box;
+}
+
+div,
+input,
+a {
+    box-sizing: border-box;
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--t-font-family-monospaced, 'monospace, serif');
+    font-size: 1em;
+}
+
+pre {
+    white-space: pre-wrap;
+}
+
+q {
+    quotes: '\201C''\201D''\2018''\2019';
+}
+
+sub,
+sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+img {
+    border: 0;
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+figure {
+    margin: 0;
+}
+
+legend {
+    padding: 0;
+    border: 0;
+}
+
+button,
+input,
+select,
+textarea {
+    margin: 0;
+    box-sizing: border-box;
+    font-family: inherit;
+    line-height: inherit;
+    font-size: 100%;
+}
+
+button,
+input {
+    line-height: normal;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+    cursor: pointer;
+
+    /* stylelint-disable */
+    -webkit-appearance: button;
+
+    /* stylelint-enable */
+}
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+    padding: 0;
+    box-sizing: border-box;
+}
+
+input[type='search'] {
+    box-sizing: content-box;
+
+    /* stylelint-disable */
+    -webkit-appearance: textfield;
+
+    /* stylelint-enable */
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+    /* stylelint-disable */
+    -webkit-appearance: none;
+
+    /* stylelint-enable */
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+button,
+input,
+select[multiple],
+textarea {
+    background-image: none;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
+}
+
+cite {
+    font-style: normal;
+}
+
+p {
+    margin: 0 0 var(--app-scale-2x, 10px);
+}
+
+ul,
+ol {
+    margin-top: 0;
+    margin-bottom: var(--app-scale-2x, 10px);
+}
+
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+    margin-bottom: 0;
+}
+
+dl {
+    margin-bottom: var(--app-scale-4x, 20px);
+}
+
+dt,
+dd {
+    line-height: 1.428571429;
+}
+
+dt {
+    font-weight: 700;
+}
+
+dd {
+    margin-left: 0;
+}
+
+address {
+    display: block;
+}

package/src/styles/utils/_typography.scss

@@ -0,0 +1,115 @@
+// set `$type-unit: 'rem';` in _base.scss to convert font-size to rem
+@mixin large-heading-margin() {
+    margin-top: var(--app-scale-4x, 20px);
+    margin-bottom: var(--app-scale-2x, 10px);
+}
+
+@mixin small-heading-margin() {
+    margin-top: var(--app-scale-2x, 10px);
+    margin-bottom: var(--app-scale-2x, 10px);
+}
+
+@mixin h1() {
+    font-weight: var(--app-h1-font-weight, 400);
+    font-size: var(--app-h1-font-size-small, 25px);
+    letter-spacing: var(--app-h1-letter-spacing);
+    @include breakpoint(sm) {
+        font-size: var(--app-h1-font-size, 29px);
+    }
+}
+
+@mixin h2() {
+    font-size: var(--app-h2-font-size, 20px);
+    font-weight: var(--app-h2-font-weight, 600);
+    text-transform: var(--app-h2-text-transform, uppercase);
+    letter-spacing: var(--app-h2-letter-spacing, 0.5px);
+}
+
+@mixin h3() {
+    font-size: var(--app-h3-font-size, 17px);
+    font-weight: var(--app-h3-font-weight, 600);
+    text-transform: var(--app-h3-text-transform);
+    letter-spacing: var(--app-h3-letter-spacing);
+}
+
+@mixin h4() {
+    font-size: var(--app-h4-font-size, 14px);
+    font-weight: var(--app-h4-font-weight, 600);
+    text-transform: var(--app-h4-text-transform);
+    letter-spacing: var(--app-h4-letter-spacing);
+}
+
+h1,
+h2,
+h3,
+.heading-1,
+.heading-2,
+.heading-3 {
+    @include large-heading-margin;
+}
+
+h4,
+h5,
+h6,
+.heading-4,
+.heading-5,
+.heading-6 {
+    @include small-heading-margin;
+}
+
+h1,
+.heading-1 {
+    @include h1();
+}
+
+h2,
+.heading-2 {
+    @include h2();
+}
+
+h3,
+.heading-3 {
+    @include h3();
+}
+
+h4,
+.heading-4 {
+    @include h4();
+}
+
+h5,
+h6,
+.heading-5,
+.heading-6 {
+    font-size: inherit;
+    font-weight: 400;
+}
+
+p {
+    font-size: var(--app-font-size, 14px);
+    font-weight: 400;
+    line-height: 1.5;
+}
+
+small,
+.small-copy {
+    font-size: var(--app-font-size-small, 12px);
+    font-weight: 400;
+}
+
+.light {
+    font-weight: 300;
+}
+
+.semibold {
+    font-weight: 600;
+}
+
+.bold {
+    font-weight: 700;
+}
+
+.empty-state,
+.no-history {
+    font-style: italic;
+}

package/dist/index.js

@@ -1 +0,0 @@
-console.warn("This file is only meant for compilation do not use it directly");

package/src/index.js

@@ -1,2 +0,0 @@
-import "./q2-tecton-theme.scss"
-console.warn("This file is only meant for compilation do not use it directly")