Skip to content
This repository has been archived by the owner on Oct 14, 2023. It is now read-only.

Commit

Permalink
Start experiment with our own sass files ...
Browse files Browse the repository at this point in the history
  • Loading branch information
@fbraem
fbraem committed Aug 3, 2019
1 parent f26f8df commit d56f885
Show file tree
Hide file tree
Showing 8 changed files with 509 additions and 1 deletion.
2 changes: 1 addition & 1 deletion ui/src/site/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const i18n = new VueI18n({
});

import '@fortawesome/fontawesome-free/css/all.min.css';

import './scss/index.scss';
import moment from 'moment';
moment.locale('nl');

Expand Down
208 changes: 208 additions & 0 deletions ui/src/site/scss/card/card.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
// Original: https://github.com/chandru89new/cards.sass
// variables

$cardBGDefault: white;
$cardRadius: 4px;
$cardTextLineHeight: 1.7em;
$cardTitleLineHeight: 1.7em;
$cardPadding: 20px;
$margin: 20px;
$darkBG: #454837;
$titleBorderColor: rgba(0, 0, 0, 0.1);
$imgHeight: 150px;
$boxShadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1);

// media query mixins
@mixin m {
@media all and (min-width: 240px) and (max-width: 767px) {
@content;
}
}

// card styles

.card {
background: $cardBGDefault;
padding: $cardPadding;
border-radius: $cardRadius;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
.card-text {
line-height: $cardTextLineHeight;
}
.card-title {
&:not(:last-child) {
margin-bottom: $margin;
}
line-height: $cardTitleLineHeight;
.card-subtitle {
font-size: 75%;
opacity: 0.8;
}
}
&.bg {
background: $darkBG;
color: white;
}
&.simple {
&.icon {
display: flex;
align-items: center;
justify-content: space-bewteen;
.card-icon {
flex: 1;
text-align: center;
margin-right: $margin;
img {
max-width: 100%;
}
}
.card-text {
flex: 7;
margin-left: $margin;
}
}
&.image {
padding: 0;
position: relative;
.card-image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30%;
@media (max-width: 576px) {
width: 40%;
}
img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
}
.card-text {
padding: $cardPadding;
margin-left: 30%;
@media (max-width: 576px) {
margin-left: 40%;
}
@media (max-width: 576px) {
margin-left: 40%;
}
}
.card-title {
padding-left: $cardPadding;
margin-left: 30%;
}
&.reverse {
.card-image {
left: initial;
right: 0;
}
.card-text {
left: 0;
right: initial;
margin-right: 30%;
margin-left: initial;
@media (max-width: 576px) {
margin-right: 40%;
}
}
}
}
}
&.title {
&.icon {
.card-title {
border-bottom: 1px solid $titleBorderColor;
padding-bottom: $margin;
}
}
&.title-bg {
padding: 0;
.card-title {
background: $darkBG;
padding: $cardPadding;
color: white;
margin-bottom: 0;
}
.card-text {
padding: $cardPadding;
}
&.small-pad {
.card-title, .card-text {
padding: $margin;
}
}
}
}
&.image {
padding: 0;
.card-image {
position: relative;
height: $imgHeight;
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
.card-title {
font-weight: bold;
padding: $cardPadding;
text-align: center;
margin-bottom: 0;
color: white;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.card-text {
padding: $cardPadding;
}
}
&.profile {
text-align: center;
.card-image {
margin-bottom: $margin;
img {
width: 128px;
height: 128px;
border-radius: 100%;
&.small {
width: 96px;
height: 96px;
}
}
}
&.alternate {
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
@include m {
text-align: center;
display: block;
}

.card-image {
text-align: center;
flex: 1;
margin: 0;
@include m {
margin-bottom: $margin;
}
}
.text {
padding-left: $cardPadding;
flex: 8;
@include m {
padding-left: 0;
}
}
}
}
&.small-pad {
padding: $cardPadding * 0.5;
}
}
180 changes: 180 additions & 0 deletions ui/src/site/scss/grid/gridlex-classes.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
//************************
// CLASSES
//************************
// GRID
[#{$gl-attributeName}~="#{$gl-gridName}"],
[#{$gl-attributeName}*="#{$gl-gridName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}_"]{
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
margin: 0 (-$gl-gutter/2);
}
// COLS
[#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$gl-colName}_"]{
box-sizing: border-box;
padding: 0 ($gl-gutter/2) $gl-gutter-vertical;
max-width: 100%;
}
// JUST "COL" & "COL_"
[#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-colName}_"]{
flex: 1 1 0%;
}
// JUST "COL-"
[#{$gl-attributeName}*="#{$gl-colName}-"]{
flex: none;
}

// COL & GRID
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}_"],
[#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}*="#{$gl-colName}_"],
[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}_"]{
margin: 0;
padding: 0;
}

/************************
HELPERS SUFFIXES
*************************/
// FOR GRID
[#{$gl-attributeName}*="#{$gl-gridName}-"]{
// No spacing between cols : noGutter
&[#{$gl-attributeName}*="-noGutter"]{
margin: 0;
> [#{$gl-attributeName}~="#{$gl-colName}"],
> [#{$gl-attributeName}*="#{$gl-colName}-"]{
padding: 0;
}
}

// No Wrapping
&[#{$gl-attributeName}*="-noWrap"]{
flex-wrap: nowrap;
}
// Horizontal alignment on center
&[#{$gl-attributeName}*="-center"]{
justify-content: center;
}
// Horizontal alignment on right
&[#{$gl-attributeName}*="-right"]{
justify-content: flex-end;
align-self: flex-end;
margin-left: auto;
}
// Vertical alignment on top
&[#{$gl-attributeName}*="-top"]{
align-items: flex-start;
}
// Vertical alignment on middle
&[#{$gl-attributeName}*="-middle"]{
align-items: center;
}
// Vertical alignment on bottom
&[#{$gl-attributeName}*="-bottom"]{
align-items: flex-end;
}

// Orders
&[#{$gl-attributeName}*="-reverse"]{
flex-direction: row-reverse;
}
&[#{$gl-attributeName}*="-column"] {
flex-direction: column;
> [#{$gl-attributeName}*="#{$gl-colName}-"] {
flex-basis: auto;
}
}
&[#{$gl-attributeName}*="-column-reverse"]{
flex-direction: column-reverse;
}

// Spaces between and around cols
&[#{$gl-attributeName}*="-spaceBetween"]{
justify-content: space-between;
}
&[#{$gl-attributeName}*="-spaceAround"]{
justify-content: space-around;
}

// Equal heights columns
&[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}~="#{$gl-colName}"],
&[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
&[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="#{$gl-colName}_"]{
align-self: stretch;
> *{
height: 100%;
}
}
// Removes the padding-bottom
&[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}~="#{$gl-colName}"],
&[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
&[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}*="#{$gl-colName}_"]{
padding-bottom: 0;
}
}

// FOR COL
[#{$gl-attributeName}*="#{$gl-colName}-"]{
&[#{$gl-attributeName}*="-top"]{
align-self: flex-start;
}
&[#{$gl-attributeName}*="-middle"]{
align-self: center;
}
&[#{$gl-attributeName}*="-bottom"]{
align-self: flex-end;
}
&[#{$gl-attributeName}*="-first"]{
order: -1;
}
&[#{$gl-attributeName}*="-last"]{
order: 1;
}
}
/************************
GRID BY NUMBER
*************************/
@include makeGridByNumber(#{$gl-gridName});
@each $mq-key, $mq-value in $gl-mq-list {
@include bp(#{$mq-key}) {
//@media #{$mq-value} {
@include makeGridByNumber(_#{$mq-key});
}
}

/************************
COLS SIZES
*************************/
@include makeCol(#{$gl-colName});
@include makeOff(off);


@each $mq-key, $mq-value in $gl-mq-list {
@include bp(#{$mq-key}) {
@include makeCol(_#{$mq-key});
@include makeOff(_#{$mq-key});
@include makeFirstLast(_#{$mq-key});
}
}



/************************
HIDING COLS
*************************/
@each $mq-key, $mq-value in $gl-mq-list {
@include bp(#{$mq-key}) {
[#{$gl-attributeName}*="#{$mq-key}-hidden"] {
display: none;
}
}
}
Loading

0 comments on commit d56f885

Please sign in to comment.