Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-27 13:34:37 +04:00
Code Issues Projects Releases Wiki Activity

perfect grid breakpoints

Browse Source
This commit is contained in:
codecalm
2020-01-28 22:36:31 +01:00
parent 7a456f3299
commit 78793f9441
5 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/layout/homepage.html
+2 -2
View File
@@ -15,10 +15,10 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="row row-cards"> <div class="row row-cards">
<div class="col-md-6"> <div class="col-sm-6">
{% include cards/project-summary.html stage-color="red" %} {% include cards/project-summary.html stage-color="red" %}
</div> </div>
<div class="col-md-6"> <div class="col-sm-6">
{% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" value=80 percentage-color="green" %} {% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" value=80 percentage-color="green" %}
</div> </div>
pages/tmp2.html
+15 -3
View File
@@ -1,10 +1,22 @@
--- ---
tmp: true
page-title: Search results page-title: Search results
--- ---
<div class="row"> <div class="row row-cards">
<div class="col"> <div class="col-sm-6">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita fugit ipsa placeat quibusdam repellat soluta ut. Architecto cum cupiditate, distinctio fugit hic laboriosam magni optio quibusdam, quis, rem sed.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita fugit ipsa placeat quibusdam repellat soluta ut. Architecto cum cupiditate, distinctio fugit hic laboriosam magni optio quibusdam, quis, rem sed.
</div>
</div>
</div> </div>
</div> </div>
scss/_variables.scss
+11 -4
View File
@@ -181,12 +181,19 @@ $sizes-percentage: (
auto: auto auto: auto
) !default; ) !default;
$grid-breakpoints: (
xs: 0,
sm: 33rem,
md: 48rem,
lg: 64rem,
xl: 75.25rem
) !default;
$container-max-widths: ( $container-max-widths: (
sm: 540px, sm: 33rem,
md: 720px, md: 48rem,
lg: 960px, lg: 64rem,
xl: 1200px xl: 75.25rem
) !default; ) !default;
$embed-responsive-aspect-ratios: ( $embed-responsive-aspect-ratios: (
scss/layout/_layout.scss
+4 -4
View File
@@ -189,10 +189,10 @@ Content
flex: 1; flex: 1;
display: flex; display: flex;
@include media-breakpoint-up($cards-grid-breakpoint) { //@include media-breakpoint-up($cards-grid-breakpoint) {
padding-left: $cards-grid-gap / 2; // padding-left: $cards-grid-gap / 2;
padding-right: $cards-grid-gap / 2; // padding-right: $cards-grid-gap / 2;
} //}
@media print { @media print {
padding-top: 0 !important; padding-top: 0 !important;
scss/ui/_grid.scss
+4
View File
@@ -35,6 +35,10 @@
margin-left: -($cards-grid-gap / 2); margin-left: -($cards-grid-gap / 2);
margin-right: -($cards-grid-gap / 2); margin-right: -($cards-grid-gap / 2);
.row-cards {
flex: 1;
}
>* { >* {
padding-left: $cards-grid-gap / 2; padding-left: $cards-grid-gap / 2;
padding-right: $cards-grid-gap / 2; padding-right: $cards-grid-gap / 2;