Skip to content

Commit

Permalink
💎 feat(next): Add next dir for Cirrus built with new CSS generator
Browse files Browse the repository at this point in the history
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Feb 29, 2024
1 parent 013231a commit 7e31294
Show file tree
Hide file tree
Showing 8 changed files with 3,784 additions and 0 deletions.
3,354 changes: 3,354 additions & 0 deletions next/dist/cirrus-all.css
View file

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions next/dist/cirrus-all.min.css
View file

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions next/src/base/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// @forward "./default";

// @forward "./animations";
// @forward "./font";
// @forward "./grid";
@forward "./layout";
// @forward "./media";
// @forward "./modifiers";
// @forward "./spacing";
331 changes: 331 additions & 0 deletions next/src/base/layout.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,331 @@
@use 'sass:math';
@use 'sass:map';
@use '../../../src/internal/generator_v2';
@use '../../../src/internal' as *;

@function get-column-map($num-columns, $width) {
$result: ();

@for $i from 1 through $num-columns {
$result: map.set(
$result,
$i,
(
width:
percentage(
$number: $width * $i,
),
)
);
}

@return $result;
}

/* This works well with panel */
section {
display: block;
}

.content {
max-width: 48em;
margin: 0 auto 1.5em;
width: 100%;

@include screen-above($md) {
max-width: 64em;
}

@include screen-above($lg) {
max-width: 80em;
}

@include screen-above($xl) {
max-width: 96em;
}
}

.fullscreen {
top: 0;
right: 0;
bottom: 0;
left: 0;
min-height: 100vh;
}

/* This works well with spans and maybe even hr */
.divider {
border-top: 0.05rem solid transparentize(fill('gray', '500'), 0.5);
height: 0.1rem;
margin: 1.8rem 0 1.6rem;
position: relative;

&[data-content] {
margin: 0.8rem 0;
}

&--v[data-content]::after,
&[data-content]::after {
background: #fff;
color: fill('gray', '500');
content: attr(data-content);
left: 50%;
display: inline-block;
padding: 0 0.4rem;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
}

&--v,
&--v[data-content] {
display: block;
padding: 0.8rem;

&::before {
border-left: 0.05rem solid transparentize(fill('gray', '500'), 0.5);
bottom: 0.4rem;
content: '';
display: block;
left: 50%;
position: absolute;
top: 0;
transform: translateX(-50%);
}
}

&--v[data-content] {
left: 50%;
padding: 0.2rem 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
}
/* Hero image div */
.hero-img {
/* Specify the backgroud image yourself */
background-size: cover;
}

.parallax-img {
background-attachment: fixed !important;
}

.hero {
/* Parent of hero-body */
align-items: stretch;
display: flex; /* Important to stretch height of hero-body */
justify-content: space-between;

.hero-body {
flex-grow: 1; /* Tells the hero-body to take up the entire space */
flex-shrink: 0;
padding: 3rem 1.5rem;
align-items: center;
display: flex;
width: 100%;
}
}

.space {
display: block;
width: 100%;
height: 1rem;

@each $size, $property-map in $space-sizes {
&.space--#{$size} {
@include explode-properties($property-map);
}
}
}

/* Use for spacing out elements vertically */
.row {
flex: 1;
flex-wrap: wrap;
padding: 0.5rem 0;
display: flex;

&::after {
content: '';
clear: both;
display: table;
}

&.row--no-wrap {
flex-wrap: nowrap;
overflow-x: auto; /* Can be disabled to remove scroll bar */
}

/* GRID */
.col {
display: block;
flex: 1;
padding: 0.15rem 0.75rem;
}

/* Auto align col to left in row */
.offset-right {
margin-left: 0;
margin-right: auto;
}

/* Auto align col to middle in row */
.offset-center {
margin-left: auto;
margin-right: auto;
}
/* Auto align col to right in row */
.offset-left {
margin-left: auto;
margin-right: 0;
}

/* Dividers for mobile layout */
&.divided [class^='col'],
&.divided [class*=' col'] {
box-shadow: 0 -1px 0 0 transparentize(fill('gray', '500'), 0.5);
}

/* Base sizing where everything is 100% width */
[class^='col-'],
[class*=' col-'] {
width: 100%;
margin-left: 0;
padding: 0 0.5rem;
}

$col-map: get-column-map($flex-columns, $flex-width);
@debug $col-map;
@include generator_v2.utility(
$base-class-name: 'col',
$class-value-pairs: $col-map,
$variants: (),
$class-prefix: '',
$generate-viewports: true,
$override: '!important'
);

/* Column sizes for various viewports */
// @for $i from 1 through $flex-columns {
// @include screen-above($sm) {
// // Same as col-md-<number>
// .col-#{$i} {
// width: percentage($number: $flex-width * $i);
// }
// }
// }

// @include generate-styles-with-viewports() using ($viewport) {
// @for $i from 1 through $flex-columns {
// // For sm, viewport is empty
// $v: if($viewport != '', '-#{$viewport}-', '-xs-');
// .col#{$v}#{$i} {
// width: percentage($number: $flex-width * $i);
// }
// }
// }

// @for $i from 1 through $flex-columns {
// @include screen-above($xs) {
// .offset-#{$i} {
// margin-left: percentage($number: $flex-width * $i);
// }
// }
// }

/* Columns without the spacing */
&.no-space [class^='col-'],
&.no-space [class*=' col-'] {
padding: 0;
}
}

.level {
align-items: center;
justify-content: space-between;

.level-item {
/* Centers items */
align-items: center;
display: flex;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
}

/* Used to stretch the contents of div in level to fill */
.level-content {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
text-align: left;
width: 100%;
}
}

/* Width/Height CSS */
@include generate-classes-for-viewport-with-map($heights, 'height', 'h-', #{get-viewport-flag($HEIGHTS)});
@include generate-classes-for-viewport-with-map($widths, 'width', 'w-', #{get-viewport-flag($WIDTHS)});
@include generate-classes-for-viewport-with-map(
$min-heights,
'min-height',
'min-h-',
#{get-viewport-flag($MIN-HEIGHT)}
);
@include generate-classes-for-viewport-with-map($min-widths, 'min-width', 'min-w-', #{get-viewport-flag($MIN-WIDTH)});
@include generate-classes-for-viewport-with-map(
$max-heights,
'max-height',
'max-h-',
#{get-viewport-flag($MAX-HEIGHT)}
);
@include generate-classes-for-viewport-with-map($max-widths, 'max-width', 'max-w-', #{get-viewport-flag($MAX-WIDTH)});

/* Do the actual balancing only on larger screens */
.level,
.level-left,
.level-right {
@include screen-above($sm) {
display: flex;
}
}

@include screen-above($sm) {
.level-right {
margin-left: 1rem;
}

/* Keep all level children the same height */
.level.fill-height {
align-items: stretch;
display: flex;
}
}

/* MOBILE */
@include screen-below($sm) {
.container {
width: 100%;
}

.row {
margin-top: 0;
}

/* Dividers for mobile layout */
.divided > .row [class^='col-'],
.divided > .row [class*=' col-'] {
box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
}

.level.fill-height {
display: inherit; /* Allow children to expand */
}

.hero-body {
padding: 0;
}
}
21 changes: 21 additions & 0 deletions next/src/builds/core.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// ==================================================
// Core Build
// ==================================================

// Base Styling
@use "../base";

// Core Components
// @use "../components/button";
// @use "../components/code";
// @use "../components/footer";
// @use "../components/forms";
// @use "../components/frames";
// @use "../components/header";
// @use "../components/links";
// @use "../components/lists";
// @use "../components/progress";
// @use "../components/table";

// Utilities
// @use "../utils";
20 changes: 20 additions & 0 deletions next/src/builds/ext.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// ==================================================
// Extended Build
// ==================================================
@use "../base"; // Inherit everything from core

// Extended Components
// @use "../components/accordion";
// @use "../components/avatar";
// @use "../components/breadcrumb";
// @use "../components/card";
// @use "../components/form-ext";
// @use "../components/link-ext";
// @use "../components/modal";
// @use "../components/pagination";
// @use "../components/placeholder";
// @use "../components/tabs";
// @use "../components/tags";
// @use "../components/tiles";
// @use "../components/toast";
// @use "../components/tooltips";
Loading

0 comments on commit 7e31294

Please sign in to comment.