Skip to content

scss version #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
singhtal wants to merge 1 commit into
base: feature/flex-grid
Choose a base branch
from
Open

scss version #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
dist
6 changes: 6 additions & 0 deletions at_flex_grid/less/at_flex_variables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;
5 changes: 5 additions & 0 deletions at_flex_grid/less/flex_grid.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import "at_flex_variables.less";
@import "at_flex_grid.less";
@import "at_flex_grid__sm.less";
@import "at_flex_grid__md.less";
@import "at_flex_grid__lg.less";
129 changes: 129 additions & 0 deletions at_flex_grid/sass/at_flex_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
$horizontal-spacing-section :0; // horizontal spacing between elements side by side, e.g. between two buttons on the same row
$vertical-spacing-section :20px; // vertical spacing between elements side by side, e.g. between two buttons on the same row
.sn-flex {
display: flex;
>* {
flex: 1 1 auto;
margin-left: $horizontal-spacing-section;
margin-bottom: $vertical-spacing-section;
&:first-child {
margin-left: 0;
}
}
// overrite flex on samll screen
&.flex-stack-mobile, &.flex-1, &.flex-1-1-2, &.flex-1-2-2, &.flex-1-2-3, &.flex-1-2-4, &.flex-1-1-3, &.flex-1-3-4, &.flex-1-3-3, &.flex-1-1-4, &.flex-1-4-4 {
display: block;
> * {
margin-left: 0;
}
}
// justify-content
&.item-justify-left {
justify-content: flex-start;
}
&.item-justify-right {
justify-content: flex-end;
}
&.item-justify-center {
justify-content: center;
}
&.item-justify-between {
justify-content: space-between;
}
&.item-justify-around {
justify-content: space-around;
}
// Align Items
&.item-align-start {
align-items: flex-start;
}
&.item-align-end {
align-items: flex-end;
}
&.item-align-center {
align-items: center;
}
&.item-align-between {
align-items: space-between;
}
&.item-align-around {
align-items: space-around;
}
&.inline {
display: inline-flex;
}
.no-grow{
flex-grow: 0;
}
// overrite column in a flex layout
&.grid-flex-overwrite {
flex-wrap: wrap;
.flex-overwrite {
flex: 0 0 100%;
max-width: 100%;
margin-left: 0;
& + * {
margin-left: 0;
}
}
}
// column will expand as per the content within
&.flex-none {
>* {
flex: 0 0 auto;
}
}
&.no-vertical-margin {
> * {
&:nth-child(even),
&:nth-child(odd) {
margin-bottom: 0;
}
}
}
// no margin class
&.grid-flex-no-margin {
> * {
&:nth-child(even),
&:nth-child(odd) {
margin-left: 0 !important;
}
}
}
.sn-flex {
margin-bottom: 0;
}
}

// class for snflex, jc: justify-center, ac: align-center
.sn-flex-jc-ac {
@extend .sn-flex;
@extend .item-justify-center;
@extend .item-align-center;
}

// class for snflex, jb: justify-between, ac: align-center
.sn-flex-jb-ac {
@extend .sn-flex;
@extend .item-justify-center;
@extend .item-align-center;
}

// sn-flex helper classes
.flex-stack-helper {
display: block;
> * {
margin-left: 0;
margin-bottom: $horizontal-spacing-section;
}
}

.flex-stack-helper-overwrite {
display: flex;
> * {
margin-left: $horizontal-spacing-section;
&:first-child {
margin-left: 0;
}
}
}
5 changes: 5 additions & 0 deletions at_flex_grid/sass/at_flex_grid__lg.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@media (min-width: $screen-lg-min) {
.at_flex {
}
}

67 changes: 67 additions & 0 deletions at_flex_grid/sass/at_flex_grid__md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
@media (min-width: $screen-md-min) {

$flex-2-spacing: 0;
$flex-3-spacing: 0;
$flex-4-spacing: 0;
.sn-flex {
&.flex-1-2-3, &.flex-1-2-4 {
> * {
&:nth-child(2n+3) {
margin-left: $horizontal-spacing-section;
}
}
}
&.flex-1-3-4 {
> * {
&:nth-child(3n+4) {
margin-left: $horizontal-spacing-section;
}
}
}
&.flex-2, &.flex-1-1-2, &.flex-1-2-2 {
@include flex-stack-helper-overwrite;
> * {
flex: 0 0 auto;
flex-basis: calc(50% - $flex-2-spacing);
max-width: calc(50% - $flex-2-spacing);
&:nth-child(2n+3) {
margin-left: 0;
}
}
}
&.flex-3, &.flex-1-1-3, &.flex-1-2-3 {
@include flex-stack-helper-overwrite;
> * {
flex: 0 0 auto;
flex-basis: calc(33.3333% - $flex-3-spacing);
max-width: calc(33.3333% - $flex-3-spacing);
&:nth-child(3n+4) {
margin-left: 0;
}
}
.flex-overwrite {
margin-left: 0;
}
}
&.flex-4, &.flex-1-1-4, &.flex-1-2-4, &.flex-1-3-4, &.flex-1-4-4 {
@include flex-stack-helper-overwrite;
> * {
flex: 0 0 auto;
flex-basis: calc(25% - $flex-4-spacing);
max-width: calc(25% - $flex-4-spacing);
&:nth-child(4n+5) {
margin-left: 0;
}
}
.flex-overwrite {
margin-left: 0;
}
}
.grow-md-4 {
flex-grow: 4;
}
}
}



98 changes: 98 additions & 0 deletions at_flex_grid/sass/at_flex_grid__sm.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
@media (min-width: $screen-sm-min) {
$flex-2-spacing: 0;
$flex-3-spacing: 0;
$flex-4-spacing: 0;
.sn-flex {
$total-col: 12;
$flex-width : percentage(1/$total-col);
>* {
margin-bottom: $vertical-spacing-section;
margin-left: $horizontal-spacing-section;
&:first-child {
margin-left: 0;
}
}

&.flex-stack-mobile, &.flex-1, &.flex-1-1-2, &.flex-1-2-2, &.flex-1-2-3, &.flex-1-2-4, &.flex-1-1-3, &.flex-1-3-4, &.flex-1-3-3, &.flex-1-1-4, &.flex-1-4-4 {
display: flex;
flex-wrap: nowrap;
> * {
margin-left: $horizontal-spacing-section;
&:first-child {
margin-left: 0;
}
}
}
&.flex-1, &.flex-1-1-3, &.flex-2, &.flex-1-1-2, &.flex-1-2-2, &.flex-2, &.flex-1-2-3, &.flex-1-2-4, &.flex-1-3-4, &.flex-3, &.flex-1-3-4, &.flex-1-3-3, &.flex-4, &.flex-1-1-4, &.flex-1-4-4, &[class*="overflow"]{
flex-wrap: wrap;
}
&.flex-1, &.flex-1-1-2, &.flex-1-1-3, &.flex-1-1-4 {

margin-left: 0;
margin-bottom: $vertical-spacing-section;
}
&.flex-2, &.flex-1-2-2, &.flex-1-2-3, &.flex-1-2-4{
> * {
flex: 0 0 auto;
flex-basis: calc(50% - $flex-2-spacing);
max-width: calc(50% - $flex-2-spacing);
&:nth-child(2n+3) {
margin-left: 0;
}
}
}
&.flex-3, &.flex-1-3-4, &.flex-1-3-3 {
> * {
flex: 0 0 auto;
flex-basis: calc(33.3333% - $flex-3-spacing);
max-width: calc(33.3333% - $flex-3-spacing);
&:nth-child(3n+4) {
margin-left: 0;
}
}
}


&.flex-4, &.flex-1-4-4 {
> * {
flex: 0 0 auto;
flex-basis: calc(25% - $flex-4-spacing);
max-width: calc(25% - $flex-4-spacing);
&:nth-child(4n+5) {
margin-left: 0;
}
}
}


@mixin grid-loop($i) {
@while $i > 0 {
.flex-width-#{i}-col {
flex-basis: $flex-width * $i;
max-width: $flex-width * $i;
}
}
@include grid-loop($i - 1);
}
@include grid-loop ($total-col);

&.grow {
> *{
flex-basis: 0;
flex-grow: 1;
padding-left: 10px;
padding-right: 10px;
}
}
.grow-2 {
flex-grow: 2;
}
.grow-3 {
flex-grow: 3;
}
.grow-4 {
flex-grow: 4;
}
}
}

6 changes: 6 additions & 0 deletions at_flex_grid/sass/at_flex_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
$screen-xs-max: 767px;
$screen-sm-min: 768px;
$screen-sm-max: 991px;
$screen-md-min: 992px;
$screen-md-max: 1199px;
$screen-lg-min: 1200px;
5 changes: 5 additions & 0 deletions at_flex_grid/sass/flex_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import "at_flex_variables.scss";
@import "at_flex_grid.scss";
@import "at_flex_grid__sm.scss";
@import "at_flex_grid__md.scss";
@import "at_flex_grid__lg.scss";
Loading