Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

cards fixes

Browse Source
This commit is contained in:
codecalm
2019-10-04 09:25:14 +02:00
parent 8d6484c67b
commit 5c1ea09971
11 changed files with 66 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -19,3 +19,4 @@ tmp/
/svg-tmp/
/dist/
/dist-html/
/components/
build/capture-components.sh
Executable
+9
View File
@@ -0,0 +1,9 @@
for file in ../pages/_components/*.md
do
file="$(basename -- $file)"
file="${file%.md}"
url="http://localhost:3001/components/$file.html"
echo $url
capture-website $url --element="#component-wrapper" --scale-factor=2 > ../components/$file.png
done
pages/_components/card-with-image.md
+6
View File
@@ -0,0 +1,6 @@
---
title: Card with side image
columns: 2
---
{% include_cached cards/card-image.html title="Card with side image" %}
pages/_components/empty.md
+1 -1
View File
@@ -2,4 +2,4 @@
title: Empty state
---
{% include ui/empty.html %}
{% include ui/empty.html illustration=true %}
pages/_includes/cards/card-image.html
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="card">
<div class="row row-0">
<div class="col-md-3{% if include.right %} order-md-last{% endif %}">
<img src="{{ site.base }}/img/photos/{{ include.img | default: 'ff23569f1a45865d.jpg' }}" class="w-100" alt="{{ include.img-alt | default: 'Card side image' }}">
<img src="{{ site.base }}/img/photos/{{ include.img | default: '2854fd67ddbd6217.jpg' }}" class="w-100 h-100 object-cover" alt="{{ include.img-alt | default: 'Card side image' }}">
</div>
<div class="col">
<div class="card-body">
pages/_includes/cards/comments.html
+3 -3
View File
@@ -10,10 +10,10 @@
{% include ui/avatar.html person=person status="green" %}
</div>
<div class="flex-fill">
<div class="d-flex mb-1 mt-n1">
<div class="strong d-flex">
<div class="d-flex mt-n1">
<h5 class="m-0">
{{ person.full_name }}
</div>
</h5>
<div class="ml-auto small text-muted">{{ forloop.index | random_date_ago: 23 | timeago }}</div>
</div>
<p class="mb-2">
pages/_layouts/component.html
+13 -7
View File
@@ -15,14 +15,20 @@ page-title: Tabler components
</div>
</div>
<div class="col-lg-9">
<div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh">
<div {% if columns > 0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
{{ content }}
</div>
</div>
<div class="card">
<div class="card-body p-5">
<div class="border border-bottom-0 bg-light p-1 rounded-top">
<div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
<div {% if columns > 0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
{{ content }}
</div>
</div>
</div>
<div class="highlight highlight-dark m-0">
{{ content | highlight_tidy: 'html' }}
<div class="highlight m-0 rounded-0 rounded-bottom">
{{ content | highlight_tidy: 'html' }}
</div>
</div>
</div>
</div>
</div>
scss/_variables.scss
+21 -9
View File
@@ -1,10 +1,10 @@
// FONTS
$font-family-base: "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-base: "Nunito", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-serif: "Georgia", "Times New Roman", times, serif !default;
$font-icons: "tabler-webfont" !default;
// EXTERNAL FONTS
$google-font-url: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap" !default;
$google-font-url: "https://fonts.googleapis.com/css?family=Nunito:300,400,600,700&display=swap" !default;
$icon-fonts: () !default;
// COLORS
@@ -40,11 +40,11 @@ $cyan: #17a2b8 !default;
$black: #000000 !default;
$white: #ffffff !default;
$light: #f0f2f5 !default;
$dark: #021f34 !default;
$light: #f5f7fb !default;
$dark: #505061 !default;
$body-bg: #f5f7fb !default;
$body-color: #45535f !default;
$body-bg: $light !default;
$body-color: $dark !default;
$text-muted: #8a91a5 !default;
@@ -103,14 +103,15 @@ $avatar-sizes: (
) !default;
//Fonts
$font-size-base: 1rem !default;
$font-size-base: .9375rem !default;
$font-weight-base: 400 !default;
$line-height-base: 1.5 !default;
$line-height-base: 1.6 !default;
$border-radius: 3px !default;
//Typography
$headings-color: $dark !default;
$headings-color: #021f34 !default;
$headings-font-weight: 600 !default;
$small-font-size: 87.5% !default;
@@ -325,6 +326,17 @@ $flag-sizes: (
//Utilities
$utilities: (
"object": (
property: object-fit,
class: object,
values: (
contain: contain,
cover: cover,
fill: fill,
scale-down: scale-down,
none: none,
)
),
"spacing": (
property: letter-spacing,
class: tracking,
scss/layout/_core.scss
+2 -1
View File
@@ -9,12 +9,13 @@ html {
}
body {
height: 100%;
overflow-y: scroll;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: none;
text-rendering: optimizeLegibility;
font-feature-settings: "liga" 0;
height: 100%;
}
body *::-webkit-scrollbar {
scss/ui/_cards.scss
+7 -1
View File
@@ -13,6 +13,12 @@
}
}
.card-sm {
.card-body {
padding: .75rem;
}
}
.card-group {
margin-bottom: $card-group-margin;
}
@@ -145,7 +151,7 @@
.card-title {
display: block;
font-size: $h4-font-size;
font-weight: 500;
font-weight: $headings-font-weight;
@at-root a#{&}:hover {
color: inherit;
scss/ui/_typo.scss
+2
View File
@@ -20,6 +20,8 @@ h6,
.h4,
.h5,
.h6 {
letter-spacing: -.012em;
a {
color: inherit;
}