提交 40a1f9dc 编写于 作者: C codecalm

cards components, progress fixes, font fixes

上级 faf81c6e
---
title: Progress bar
columns: 1
---
{% include ui/progress-description.html percentage=45 %}
{% include ui/progress-description.html percentage=32 color="red" %}
{% include ui/progress-description.html percentage=90 color="yellow" %}
{% include ui/progress-description.html percentage=51 color="green" %}
...@@ -70,10 +70,3 @@ components: ...@@ -70,10 +70,3 @@ components:
url: components.html url: components.html
title: Components title: Components
icon: truck icon: truck
customize:
url: '#customize'
title: Customize
icon: sliders
toggle: modal
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<div class="d-flex align-items-center pt-5 mt-auto"> <div class="d-flex align-items-center pt-5 mt-auto">
{% include ui/avatar.html person-id=avatar size="md" %} {% include ui/avatar.html person-id=avatar size="md" %}
<div class="ml-3"> <div class="ml-3">
<a href="{{ site.base }}/profile.html" class="text-default">{{ author.first_name }} {{ author.last_name }}</a> <a href="{{ site.base }}/profile.html" class="text-body">{{ author.first_name }} {{ author.last_name }}</a>
<small class="d-block text-muted">3 days ago</small> <small class="d-block text-muted">3 days ago</small>
</div> </div>
<div class="ml-auto"> <div class="ml-auto">
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
{% for person in site.data.people limit: 5 offset: 20 %} {% for person in site.data.people limit: 5 offset: 20 %}
<tr> <tr>
<td class="w-1">{% include ui/avatar.html src=person.photo %}</td> <td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
<td><a href="javascript:void(0)" class="text-inherit">{{ person.full_name }}</a></td> <td><a href="javascript:void(0)" class="text-reset">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td> <td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td> <td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
<td> <td>
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
{% for invoice in site.data.invoices limit: 5 %} {% for invoice in site.data.invoices limit: 5 %}
<tr> <tr>
<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td> <td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
<td><a href="invoice.html" class="text-inherit">{{ invoice.name }}</a></td> <td><a href="invoice.html" class="text-reset">{{ invoice.name }}</a></td>
<td> <td>
{% include ui/flag.html name=invoice.country %} {% include ui/flag.html name=invoice.country %}
{{ invoice.client }} {{ invoice.client }}
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="card-body"> <div class="card-body">
{% for person in site.data.people limit: 5 offset: 50 %} {% for person in site.data.people limit: 5 offset: 50 %}
<div class="mb-3"> <div class="mb-3">
<a href="javascript:void(0)" class="d-flex align-items-center text-inherit"> <a href="javascript:void(0)" class="d-flex align-items-center text-reset">
{% include ui/avatar.html person=person size="sm" class="mr-2"%} {% include ui/avatar.html person=person size="sm" class="mr-2"%}
{{ person.full_name }} {{ person.full_name }}
</a> </a>
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</label> </label>
</td> </td>
<td class="w-100"> <td class="w-100">
<a href="javascript:void(0)" class="text-inherit">{{ task.name }}</a> <a href="javascript:void(0)" class="text-reset">{{ task.name }}</a>
</td> </td>
<td class="text-nowrap text-muted"> <td class="text-nowrap text-muted">
{% include ui/icon.html icon="calendar" %} {% include ui/icon.html icon="calendar" %}
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</a> </a>
</div> </div>
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<a href="javascript:void(0)" class="text-default">{{ person.full_name }}</a> <a href="javascript:void(0)" class="text-body">{{ person.full_name }}</a>
<a href="javascript:void(0)" class="text-muted leading-none"> <a href="javascript:void(0)" class="text-muted leading-none">
{{ person.company }} {{ person.company }}
</a> </a>
......
{% assign id = 0 | random_id %} {% assign id = 0 | random_id %}
<div class="pb-3"> <div class="pb-3">
<a href="{{ site.base }}" class="navbar-brand text-inherit"> <a href="{{ site.base }}" class="navbar-brand text-reset">
<img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo"> <img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
<img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo"> <img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
</a> </a>
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</a> </a>
<a href="{{ site.base }}" class="navbar-brand text-inherit mr-md-3"> <a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
{% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %} {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %} {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
{% if include.logo %} {% if include.logo %}
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
</span> </span>
{% elsif include.user-menu == 2 %} {% elsif include.user-menu == 2 %}
<span class="mx-2 d-none leading-none d-lg-block text-right"> <span class="mx-2 d-none leading-none d-lg-block text-right">
<span class="text-default">{{ person.full_name }}</span> <span class="text-body">{{ person.full_name }}</span>
</span> </span>
{% include ui/avatar.html src=person.photo %} {% include ui/avatar.html src=person.photo %}
{% elsif include.user-menu == 3 %} {% elsif include.user-menu == 3 %}
......
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
{% assign spinner-class = false %} {% assign spinner-class = false %}
{% assign provider = include.provider | default: 'fe' %} {% assign provider = include.provider | default: 'fe' %}
{% if include.text %}{% assign spinner-class="mr-2" %}{% endif %} {% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
{% assign element = include.element | default: 'button' %} {% assign e = include.element | default: 'button' %}
<{{ element }}{% if element == 'a' %} href="{{ include.href | default: '#' }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}"> <{{ e }}{% if e == 'a' %} href="{{ include.href | default: '#' }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">
{% if include.spinner %} {% if include.spinner %}
{% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %} {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
{% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true %}{% endif %} {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true %}{% endif %}
{{ include.text }} {{ include.text | default: "Button" }}
{% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %} {% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %}
</{{ element }}> </{{ e }}>
{% endremoveemptylines %} {% endremoveemptylines %}
{% removeemptylines %} {% removeemptylines %}
{% if include.use-svg %} {% assign svg-file="svg/" | append: include.icon | append: ".svg" %}
{% assign svg-file="svg/" | append: include.icon | append: ".svg" %} {% capture svg-icon %}
{% capture svg-icon %} {% include_cached {{ svg-file }} %}
{% include_cached {{ svg-file }} %} {% endcapture %}
{% endcapture %}
{% assign replace-to = "icon" %} {% assign replace-to = "icon" %}
{% if include.right %} {% if include.right %}
{% assign replace-to = replace-to | append: " icon-right" %} {% assign replace-to = replace-to | append: " icon-right" %}
{% endif %} {% endif %}
{% if include.class %}
{% assign replace-to = replace-to | append: ' ' | append: include.class %}
{% endif %}
{% assign replace-to = 'class="' | append: replace-to | append: '"' %} {% if include.class %}
{% assign replace-to = replace-to | append: ' ' | append: include.class %}
{% endif %}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }} {% if include.color %}
{% else %} {% assign replace-to = replace-to | append: ' text-' | append: include.color %}
{% assign provider = include.provider | default: "fe" %}
<i class="icon {{ provider }} {{ provider }}-{{ include.icon }}{% if include.class %} {{ include.class }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}"></i>
{% endif %} {% endif %}
{% assign replace-to = 'class="' | append: replace-to | append: '"' %}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
{% endremoveemptylines %} {% endremoveemptylines %}
{% assign size = include['size'] | default: 'sm' %}
{% assign color = include.color | default: 'blue' %}
<div class="{% if include.class %}{{ include.class }}{% else %}mb-3{% endif %}">
<div class="d-flex mb-1 align-items-center">
<div class="text-h5 font-weight-bolder m-0 mr-2">Label</div>
<div class="text-h5 text-muted">Description</div>
<span class="ml-auto text-h6 text-{{ color }}">{{ include.percentage }}%</span>
</div>
{% include ui/progress.html size=size percentage=include.percentage color=color %}
</div>
...@@ -7,6 +7,25 @@ og-component: true ...@@ -7,6 +7,25 @@ og-component: true
{% assign columns = page.columns | default: 0 %} {% assign columns = page.columns | default: 0 %}
{% capture demo-html %}
<div class="tabler-demo">
{{ content }}
</div>
{% endcapture %}
{% capture demo-css %}
.tabler-demo {
padding: 3rem;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
}
{% endcapture %}
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<div class="list-group list-group-transparent mb-0"> <div class="list-group list-group-transparent mb-0">
...@@ -37,7 +56,12 @@ og-component: true ...@@ -37,7 +56,12 @@ og-component: true
<div class="row"> <div class="row">
<div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div> <div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div>
<div class="col">{% include ui/button.html icon="codesandbox" text="Open in sandbox" color="primary" block=true class="mt-4" %}</div> <div class="col">
<form action="https://codepen.io/pen/define" method="post" target="_blank">
<input type="hidden" name="data" value='{"title":"{{ page.title | escape }}","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"{{ demo-html | tidy: 'html' | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' | replace_regex: "'", "\'" }}","css":"{{ demo-css | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' }}", "editors":"100"}'>
{% include ui/button.html icon="codesandbox" text="Edit in CodePen" color="primary" block=true class="mt-4" element="button" type="submit" %}
</form>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -23,10 +23,10 @@ page-title: Documentation ...@@ -23,10 +23,10 @@ page-title: Documentation
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9">
<div class="card"> <div class="card">
<div class="card-body p-lg-8"> <div class="card-body p-lg-7">
<div class="markdown"> <div class="markdown">
<h2 class="mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2> <h2 class="h1 mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
{% if page.plugin %} {% if page.plugin %}
<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code> plugin.</div> <div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code> plugin.</div>
......
...@@ -32,12 +32,12 @@ done: true ...@@ -32,12 +32,12 @@ done: true
<div class="d-flex align-items-center w-100"> <div class="d-flex align-items-center w-100">
{% include ui/avatar.html person=person size="xs" class="mr-2" %} {% include ui/avatar.html person=person size="xs" class="mr-2" %}
<div> <div>
<a href="javascript:void(0)" class="text-default">{{ person.full_name }}</a> <a href="javascript:void(0)" class="text-body">{{ person.full_name }}</a>
merge pull request merge pull request
<a href="javascript:void(0)" class="text-default">#176</a> <a href="javascript:void(0)" class="text-body">#176</a>
from codecalm/dev from codecalm/dev
</div> </div>
<div class="ml-auto">Latest commit <a href="javascript:void(0)" class="text-inherit font-semibold">54e9403</a> 4 days ago</div> <div class="ml-auto">Latest commit <a href="javascript:void(0)" class="text-reset font-semibold">54e9403</a> 4 days ago</div>
</div> </div>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
...@@ -50,13 +50,13 @@ done: true ...@@ -50,13 +50,13 @@ done: true
{% else %} {% else %}
{% include ui/icon.html icon="file" class="mr-1" %} {% include ui/icon.html icon="file" class="mr-1" %}
{% endif %} {% endif %}
<a href="javascript:void(0)" class="text-default">{{ file.name }}</a> <a href="javascript:void(0)" class="text-body">{{ file.name }}</a>
</td> </td>
<td class="text-muted text-nowrap"> <td class="text-muted text-nowrap">
<a href="javascript:void(0)" class="text-inherit">{{ file.comment }}</a> <a href="javascript:void(0)" class="text-reset">{{ file.comment }}</a>
</td> </td>
<td class="text-right text-muted text-nowrap"> <td class="text-right text-muted text-nowrap">
<a href="javascript:void(0)" class="text-inherit">{{ file.date }}</a> <a href="javascript:void(0)" class="text-reset">{{ file.date }}</a>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
......
---
---
<div class="card">
<div class="card-body">
<div class="mb-3">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.
{% include ui/button.html color="blue" size="sm" %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.
</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
<h5>Lorem ipsum dolor sit amet</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
</div>
<div class="mb-3">
{% include ui/button.html color="blue" %}
{% include ui/button.html color="danger" %}
{% include ui/button.html color="green" %}
</div>
<div class="mb-3">
<input type="text" class="form-control d-inline-block w-auto" size="10">
{% include ui/button.html color="blue" %}
<input type="text" class="form-control form-control-sm d-inline-block w-auto" size="10">
{% include ui/button.html color="blue" size="sm" %}
<input type="text" class="form-control form-control-lg d-inline-block w-auto" size="10">
{% include ui/button.html color="blue" size="lg" %}
</div>
</div>
</div>
@import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/functions";
@import "variables"; @import "variables";
@import "utilities";
@import "mixins"; @import "mixins";
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
color: inherit; color: inherit;
} }
.text-default { .text-body {
color: #afbdd1 !important; color: #afbdd1 !important;
} }
......
//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,
values: (
tight: -.05em,
normal: 0,
wide: .05em,
)
),
"leading": (
property: line-height,
class: leading,
values: (
none: 1,
tight: 1.25,
normal: $line-height-base,
loose: 2 !important,
)
),
"cursor": (
property: cursor,
class: cursor,
values: (
auto: auto,
pointer: pointer,
move: move,
not-allowed: not-allowed,
zoom-in: zoom-in,
zoom-out: zoom-out
)
),
"font-size": (
property: font-size,
class: text,
values: (
h1: $h1-font-size,
h2: $h2-font-size,
h3: $h3-font-size,
h4: $h4-font-size,
h5: $h5-font-size,
h6: $h6-font-size,
)
),
"font-weight": (
property: font-weight,
values: (
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
)
),
) !default;
// FONTS // FONTS
$google-font: 'Nunito Sans' !default; $google-font: 'Source Sans Pro' !default;
$font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default; $font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
$font-family-serif: "Georgia", "Times New Roman", times, serif !default; $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
...@@ -42,7 +42,7 @@ $black: #000000 !default; ...@@ -42,7 +42,7 @@ $black: #000000 !default;
$white: #ffffff !default; $white: #ffffff !default;
$light: #f5f7fb !default; $light: #f5f7fb !default;
$dark: #505061 !default; $dark: #495057 !default;
$body-bg: $light !default; $body-bg: $light !default;
$body-color: $dark !default; $body-color: $dark !default;
...@@ -107,24 +107,22 @@ $avatar-sizes: ( ...@@ -107,24 +107,22 @@ $avatar-sizes: (
//Fonts //Fonts
$font-size-base: 1rem !default; $font-size-base: 1rem !default;
$font-weight-base: 400 !default; $font-weight-base: 400 !default;
$line-height-base: 1.5 !default; $line-height-base: 1.6 !default;
$body-letter-spacing: -.01em !default; $body-letter-spacing: null !default;
$border-radius: 3px !default; $border-radius: 3px !default;
//Typography //Typography
$headings-color: #021f34 !default;
$headings-font-weight: 600 !default; $headings-font-weight: 600 !default;
$small-font-size: 87.5% !default; $small-font-size: 87.5% !default;
$h1-font-size: (23em/15) !default; $h1-font-size: (26em/16) !default;
$h2-font-size: (21em/15) !default; $h2-font-size: (21em/16) !default;
$h3-font-size: (19em/15) !default; $h3-font-size: (18em/16) !default;
$h4-font-size: (17em/15) !default; $h4-font-size: (16em/16) !default;
$h5-font-size: (15em/15) !default; $h5-font-size: (14em/16) !default;
$h6-font-size: (13em/15) !default; $h6-font-size: (12em/16) !default;
$h7-font-size: (11em/15) !default;
$blockquote-font-size: $h4-font-size !default; $blockquote-font-size: $h4-font-size !default;
...@@ -205,10 +203,23 @@ $breadcrumb-variants: ( ...@@ -205,10 +203,23 @@ $breadcrumb-variants: (
$badge-font-weight: 500 !default; $badge-font-weight: 500 !default;
//buttons //buttons
$input-btn-line-height: 1.5 !default;
$input-btn-font-size: 15px !default; $input-btn-font-size: 15px !default;
$btn-padding-x: 1rem !default;
$btn-font-weight: 500 !default; $input-btn-font-size-sm: 12px !default;
$input-btn-padding-x-sm: 6px !default;
$input-btn-padding-y-sm: 1px !default;
$input-btn-font-size-lg: 20px !default;
$input-btn-padding-x-lg: 20px !default;
$input-btn-padding-y-lg: 8px !default;
$input-height: null !default;
$input-height-sm: null !default;
$input-height-lg: null !default;
$btn-padding-x: 1rem !default;
$btn-font-weight: 600 !default;
$btn-border-radius: 3px !default; $btn-border-radius: 3px !default;
//cards //cards
...@@ -272,7 +283,7 @@ $toast-header-color: $text-muted !default; ...@@ -272,7 +283,7 @@ $toast-header-color: $text-muted !default;
$yiq-contrasted-threshold: 200 !default; $yiq-contrasted-threshold: 200 !default;
//progress //progress
$progress-bg: $gray-100 !default; $progress-bg: $gray-200 !default;
$progress-height: .75rem !default; $progress-height: .75rem !default;
//ribbons //ribbons
...@@ -314,48 +325,3 @@ $flag-sizes: ( ...@@ -314,48 +325,3 @@ $flag-sizes: (
"xl": 4rem "xl": 4rem
) !default; ) !default;
//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,
values: (
tight: -.05em,
normal: 0,
wide: .05em,
)
),
"leading": (
property: line-height,
class: leading,
values: (
none: 1,
tight: 1.25,
normal: $line-height-base,
loose: 2 !important,
)
),
"cursor": (
property: cursor,
class: cursor,
values: (
auto: auto,
pointer: pointer,
move: move,
not-allowed: not-allowed,
zoom-in: zoom-in,
zoom-out: zoom-out
)
)
) !default;
此差异已折叠。
...@@ -155,7 +155,7 @@ Sidebar ...@@ -155,7 +155,7 @@ Sidebar
&:after { &:after {
display: block; display: block;
font-family: $font-icons !important; font-family: $font-icons !important;
content: $icon-fe-chevron-down; content: '';
margin-left: auto; margin-left: auto;
transition: transform .3s; transition: transform .3s;
} }
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
.page-title { .page-title {
margin: 0; margin: 0;
font-size: $h3-font-size; font-size: $h2-font-size;
font-weight: 400; font-weight: 400;
line-height: 2.5rem; line-height: 2.5rem;
color: $body-color; color: $body-color;
......
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
@import "config"; @import "config";
@import "../node_modules/bootstrap/scss/bootstrap"; @import "../node_modules/bootstrap/scss/bootstrap";
@import "fonts/tabler-webfont";
@import "fonts/webfonts"; @import "fonts/webfonts";
@import "layout/core"; @import "layout/core";
......
...@@ -3,13 +3,14 @@ ...@@ -3,13 +3,14 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, .03); box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
letter-spacing: 0.01em;
&:not([class^='btn-outline']):not([class*=' btn-outline']):not(.btn-secondary) { &:not([class^='btn-outline']):not([class*=' btn-outline']):not(.btn-secondary) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1); text-shadow: 1px 1px 0 rgba(0, 0, 0, .05);
svg.icon { svg.icon {
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .1)); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));
} }
} }
......
...@@ -150,7 +150,7 @@ ...@@ -150,7 +150,7 @@
.card-title { .card-title {
display: block; display: block;
font-size: $h4-font-size; font-size: $h3-font-size;
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
margin: 0 0 1rem; margin: 0 0 1rem;
color: $headings-color; color: $headings-color;
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
} }
.card-header & { .card-header & {
margin: 0; margin: .125rem 0;
} }
} }
......
...@@ -5,11 +5,9 @@ textarea { ...@@ -5,11 +5,9 @@ textarea {
} }
.form-label { .form-label {
@extend .h5;
display: block; display: block;
margin-bottom: .5rem; margin-bottom: .5rem;
font-size: $h6-font-size;
font-weight: $headings-font-weight;
color: $headings-color
} }
.mb-2 { .mb-2 {
...@@ -21,6 +19,8 @@ textarea { ...@@ -21,6 +19,8 @@ textarea {
} }
.form-control { .form-control {
vertical-align: middle;
&:-webkit-autofill { &:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-box-shadow: 0 0 0 1000px #fff inset;
} }
......
// stylelint-disable declaration-no-important // stylelint-disable declaration-no-important
.text-inherit { color: inherit !important; }
.text-default { color: $body-color !important; }
.text-h6 { font-size: $h6-font-size !important; }
.text-h5 { font-size: $h5-font-size !important; }
.text-h4 { font-size: $h4-font-size !important; }
.text-h3 { font-size: $h3-font-size !important; }
.text-h2 { font-size: $h2-font-size !important; }
.text-h1 { font-size: $h1-font-size !important; }
.text-subheader { .text-subheader {
font-size: $h6-font-size; font-size: $h6-font-size;
font-weight: 600; font-weight: 600;
...@@ -18,18 +8,6 @@ ...@@ -18,18 +8,6 @@
letter-spacing: .04em; letter-spacing: .04em;
} }
.text-label {
font-size: $h6-font-size;
color: $text-muted;
text-transform: uppercase;
}
.leading-none { line-height: 1 !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-normal { line-height: $line-height-base !important; }
.leading-loose { line-height: 2 !important; }
/** /**
Antialiasing Antialiasing
*/ */
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册