Skip to content
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.

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

Form model #432

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
added bs4 card scss
  • Loading branch information
ahmadasjad committed May 6, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 7f5ace30341c2c50511dbd3c44eded7e12a396aa
278 changes: 278 additions & 0 deletions src/assets/scss/bs4/_card.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,278 @@
//
// Base styles
//

.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
height: $card-height;
word-wrap: break-word;
background-color: $card-bg;
background-clip: border-box;
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);

> hr {
margin-right: 0;
margin-left: 0;
}

> .list-group:first-child {
.list-group-item:first-child {
@include border-top-radius($card-border-radius);
}
}

> .list-group:last-child {
.list-group-item:last-child {
@include border-bottom-radius($card-border-radius);
}
}
}

.card-body {
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
// Workaround for the image size bug in IE
// See: https://github.com/twbs/bootstrap/pull/28855
min-height: 1px;
padding: $card-spacer-x;
color: $card-color;
}

.card-title {
margin-bottom: $card-spacer-y;
}

.card-subtitle {
margin-top: -$card-spacer-y / 2;
margin-bottom: 0;
}

.card-text:last-child {
margin-bottom: 0;
}

.card-link {
@include hover() {
text-decoration: none;
}

+ .card-link {
margin-left: $card-spacer-x;
}
}

//
// Optional textual caps
//

.card-header {
padding: $card-spacer-y $card-spacer-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: $card-cap-color;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;

&:first-child {
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
}

+ .list-group {
.list-group-item:first-child {
border-top: 0;
}
}
}

.card-footer {
padding: $card-spacer-y $card-spacer-x;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;

&:last-child {
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
}
}


//
// Header navs
//

.card-header-tabs {
margin-right: -$card-spacer-x / 2;
margin-bottom: -$card-spacer-y;
margin-left: -$card-spacer-x / 2;
border-bottom: 0;
}

.card-header-pills {
margin-right: -$card-spacer-x / 2;
margin-left: -$card-spacer-x / 2;
}

// Card image
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: $card-img-overlay-padding;
}

.card-img,
.card-img-top,
.card-img-bottom {
flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
}

.card-img,
.card-img-top {
@include border-top-radius($card-inner-border-radius);
}

.card-img,
.card-img-bottom {
@include border-bottom-radius($card-inner-border-radius);
}


// Card deck

.card-deck {
.card {
margin-bottom: $card-deck-margin;
}

@include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin;

.card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin;
}
}
}


//
// Card groups
//

.card-group {
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
margin-bottom: $card-group-margin;
}

@include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-bottom: 0;

+ .card {
margin-left: 0;
border-left: 0;
}

// Handle rounded corners
@if $enable-rounded {
&:not(:last-child) {
@include border-right-radius(0);

.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
border-top-right-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
border-bottom-right-radius: 0;
}
}

&:not(:first-child) {
@include border-left-radius(0);

.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
border-top-left-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
border-bottom-left-radius: 0;
}
}
}
}
}
}


//
// Columns
//

.card-columns {
.card {
margin-bottom: $card-columns-margin;
}

@include media-breakpoint-up(sm) {
column-count: $card-columns-count;
column-gap: $card-columns-gap;
orphans: 1;
widows: 1;

.card {
display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let their width change
}
}
}


//
// Accordion
//

.accordion {
> .card {
overflow: hidden;

&:not(:last-of-type) {
border-bottom: 0;
@include border-bottom-radius(0);
}

&:not(:first-of-type) {
@include border-top-radius(0);
}

> .card-header {
@include border-radius(0);
margin-bottom: -$card-border-width;
}
}
}
26 changes: 26 additions & 0 deletions src/assets/scss/bs4/_variables.scss
Original file line number Diff line number Diff line change
@@ -700,6 +700,32 @@ $pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;


// Cards

$card-spacer-y: .75rem !default;
$card-spacer-x: 1.25rem !default;
$card-border-width: $border-width !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;

$card-img-overlay-padding: 1.25rem !default;

$card-group-margin: $grid-gutter-width / 2 !default;
$card-deck-margin: $card-group-margin !default;

$card-columns-count: 3 !default;
$card-columns-gap: 1.25rem !default;
$card-columns-margin: $card-spacer-y !default;



// Tooltips

$tooltip-font-size: $font-size-sm !default;
35 changes: 35 additions & 0 deletions src/assets/scss/main.scss
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@

@import "bs4/reboot";
@import "bs4/type";
@import "bs4/card";
@import "bs4/code";
@import "bs4/grid";
@import "bs4/tables";
@@ -371,3 +372,37 @@ body {
height: 1px;
padding: 0;
}


//Form Model design

.rules-container > div > label{
min-width: 96px;
}

.card [data-toggle="collapse-custom"]:after {
transform: rotate(0deg) ;
transition: all linear 0.25s;
float: right;
background: $icon-angle-right-active no-repeat;
background-size: contain;
content: "";
display: inline-block;
height: 1em;
line-height: 1;
position: relative;
top: 12px;
width: 1em;
}
.card.displayed [data-toggle="collapse-custom"]:after {
transform: rotate(90deg) ;
}

#accordion .card .card-body{
display: none;
transition: display 2s;
}

#accordion .card.displayed .card-body{
display: block;
}