Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-14 07:12:22 +04:00
Code Issues Projects Releases Wiki Activity

replaced icons to svgs, buttons, cards, typography

Browse Source
This commit is contained in:
codecalm
2019-10-04 23:42:32 +02:00
parent 5c1ea09971
commit 09d8e7e2e4
96 changed files with 492 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_mixins.scss
+1 -2
View File
@@ -1,3 +1,2 @@
@import "mixins/px2rem";
@import "mixins/theme-color-lighter";
@import "mixins/functions";
@import "mixins/container-breakpoints";
scss/_variables.scss
+45 -30
View File
@@ -1,10 +1,11 @@
// FONTS
$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;
$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-serif: "Georgia", "Times New Roman", times, serif !default;
$font-icons: "tabler-webfont" !default;
// EXTERNAL FONTS
$google-font-url: "https://fonts.googleapis.com/css?family=Nunito:300,400,600,700&display=swap" !default;
$icon-fonts: () !default;
// COLORS
@@ -12,8 +13,8 @@ $full-black: rgba(0, 0, 0, 1) !default;
$full-white: rgba(255, 255, 255, 1) !default;
$light-black: rgba(0, 0, 0, .4) !default;
$light-white: rgba(255, 255, 255, .4) !default;
$min-black: rgba(135, 150, 165, .064) !default;
$min-white: rgba(255, 255, 255, .064) !default;
$min-black: rgba(135, 150, 165, .032) !default;
$min-white: rgba(255, 255, 255, .032) !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
@@ -31,8 +32,8 @@ $indigo: #6574cd !default;
$purple: #a55eea !default;
$pink: #f66d9b !default;
$red: #fa4654 !default;
$orange: #fd9644 !default;
$yellow: #f1c40f !default;
$orange: #ff922b !default;
$yellow: #fcc419 !default;
$lime: #7bd235 !default;
$green: #5eba00 !default;
$teal: #2bcbba !default;
@@ -64,6 +65,7 @@ $social-colors: (
"rss": #ffa500,
"flickr": #0063dc,
"bitbucket": #0052cc,
"tabler": #206bc4
) !default;
$status-colors: (
@@ -106,24 +108,28 @@ $avatar-sizes: (
$font-size-base: .9375rem !default;
$font-weight-base: 400 !default;
$line-height-base: 1.6 !default;
$body-letter-spacing: null !default;
$border-radius: 3px !default;
//Typography
$headings-color: #021f34 !default;
$headings-font-weight: 600 !default;
$headings-font-weight: 500 !default;
$small-font-size: 87.5% !default;
$h1-font-size: $font-size-base * 2 !default;
$h2-font-size: $font-size-base * 1.75 !default;
$h3-font-size: $font-size-base * 1.5 !default;
$h4-font-size: $font-size-base * 1.25 !default;
$h5-font-size: $font-size-base * 1 !default;
$h6-font-size: $font-size-base * .875 !default;
$h1-font-size: (23em/15) !default;
$h2-font-size: (21em/15) !default;
$h3-font-size: (19em/15) !default;
$h4-font-size: (17em/15) !default;
$h5-font-size: (15em/15) !default;
$h6-font-size: (13em/15) !default;
$h7-font-size: (11em/15) !default;
$blockquote-font-size: $h4-font-size !default;
$lead-font-size: $h3-font-size !default;
$lead-font-size: $h4-font-size !default;
$lead-font-weight: 400 !default;
$hr-opacity: .1 !default;
$hr-margin-y: 1rem !default;
@@ -212,10 +218,27 @@ $container-max-widths: (
//alerts
$alert-link-font-weight: 600 !default;
//breadcrumb
$breadcrumb-variants: (
dots: '·',
arrows: '›',
bullets: '\02022',
) !default;
//badges
$badge-font-weight: 500 !default;
//buttons
$input-btn-font-size: 15px !default;
$btn-padding-x: 1rem !default;
$btn-font-weight: 500 !default;
$btn-border-radius: 3px !default;
//cards
$card-border-color: $border-color !default;
$card-border-radius: $border-radius !default;
$card-cap-bg: $body-bg !default;
$card-cap-bg: $min-black !default;
$card-active-border-color: $blue !default;
$card-status-size: 2px !default;
@@ -228,21 +251,6 @@ $card-shadow-hover: rgba($dark, .08) 0 2px 12px 0;
$close-font-weight: 400 !default;
$close-font-size: 1.5rem !default;
//badges
$badge-font-weight: 600 !default;
//buttons
$btn-font-weight: 600 !default;
$btn-font-size: 14px !default;
$btn-border-radius: 3px !default;
//breadcrumb
$breadcrumb-variants: (
dots: '·',
arrows: '›',
bullets: '\02022',
) !default;
//nav
$nav-link-padding-y: .25rem !default;
@@ -277,6 +285,9 @@ $spinner-height: 1.5rem !default;
$spinner-border-width: 2px !default;
$spinner-border-width-sm: 2px !default;
//tables
$table-head-border-color: $border-color !default;
//toasts
$toast-border-color: $border-color !default;
$toast-header-color: $text-muted !default;
@@ -284,6 +295,10 @@ $toast-header-color: $text-muted !default;
//other
$yiq-contrasted-threshold: 200 !default;
//progress
$progress-bg: $gray-100 !default;
$progress-height: .75rem !default;
$list-group-border-color: $border-color !default;
$list-group-action-color: inherit !default;
scss/fonts/_webfonts.scss
+3 -1
View File
@@ -1,4 +1,6 @@
@if $google-font-url {
@if $google-font {
$google-font-url: "https://fonts.googleapis.com/css?family=" + str-replace($google-font, ' ', '+') + ":300,400,500,600,700" !default;
@import url($google-font-url);
}
scss/layout/_core.scss
+1 -6
View File
@@ -2,20 +2,15 @@
html {
height: 100%;
font-size: 16px;
@include media-breakpoint-down(md) {
font-size: 15px;
}
}
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;
letter-spacing: $body-letter-spacing;
}
body *::-webkit-scrollbar {
scss/layout/_navbar.scss
+1 -2
View File
@@ -335,7 +335,6 @@ Folded navbar
}
.nav-icon {
width: 1.5rem;
font-size: px2rem(15px);
opacity: 1;
justify-content: center;
@@ -359,7 +358,7 @@ Folded navbar
.nav-icon {
display: flex;
width: 1.75rem;
width: 1.5rem;
border-radius: 100%;
flex-shrink: 0;
opacity: .8;
scss/layout/_page.scss
+1
View File
@@ -10,6 +10,7 @@
font-size: $h3-font-size;
font-weight: 400;
line-height: 2.5rem;
color: $body-color;
}
.page-title-options {
scss/mixins/_functions.scss
+22
View File
@@ -0,0 +1,22 @@
@function px2rem($px) {
@return ($px / 16px) * 1rem;
}
@function theme-color-lighter($color) {
@return rgba($color, .2);
}
@function theme-color-lightest($color) {
@return mix($color, #fff, 10%);
}
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
scss/mixins/_px2rem.scss
-3
View File
@@ -1,3 +0,0 @@
@function px2rem($px) {
@return ($px / 16px) * 1rem;
}
scss/mixins/_theme-color-lighter.scss
-8
View File
@@ -1,8 +0,0 @@
@function theme-color-lighter($color) {
@return rgba($color, .2);
}
@function theme-color-lightest($color) {
@return mix($color, #fff, 10%);
//@return rgba($color, .1);
}
scss/ui/_buttons.scss
+26 -7
View File
@@ -1,9 +1,32 @@
.btn {
letter-spacing: .03em;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
.flag {
vertical-align: -5px;
&:not([class^='btn-outline']):not([class*=' btn-outline']) {
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);
svg.icon {
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .1));
}
}
.icon {
font-size: 1.2em;
vertical-align: sub;
margin: 0 .5em 0 -.25em;
}
.icon-right {
margin: 0 -.25em 0 .5em;
}
svg.icon {
width: 1em;
height: 1em;
stroke-width: 1.5;
}
}
@@ -41,9 +64,6 @@
}
.btn-icon {
min-width: px2rem(35px); //todo: porpawic, wpisalem z palca
padding-right: .5rem;
padding-left: .5rem;
}
.btn-list {
@@ -53,7 +73,6 @@
> .btn,
> .dropdown {
margin-bottom: .5rem;
display: inline-block;
&:not(:last-child) {
margin-right: .5rem;
scss/ui/_cards.scss
+2 -1
View File
@@ -152,13 +152,14 @@
display: block;
font-size: $h4-font-size;
font-weight: $headings-font-weight;
margin: 0 0 1rem;
@at-root a#{&}:hover {
color: inherit;
}
.card-header & {
margin: -.125rem 0;
margin: 0;
}
}
scss/ui/_empty.scss
+1 -1
View File
@@ -1,7 +1,7 @@
.empty {
text-align: center;
color: $text-muted;
padding: 2rem 3rem;
padding: 3rem;
height: 100%;
display: flex;
scss/ui/_inputs.scss
+2 -2
View File
@@ -32,8 +32,8 @@ textarea {
}
.form-control-light {
background-color: $min-black;
border-color: $min-black;
background-color: $gray-100;
border-color: transparent;
}
.form-footer {
scss/ui/_progress.scss
+2 -4
View File
@@ -12,14 +12,12 @@
.progress {
appearance: none;
background: $min-black;
height: .75rem;
line-height: .75rem;
line-height: $progress-height;
position: relative;
width: 100%;
&::-webkit-progress-bar {
background: $min-black;
background: $gray-100;
}
&::-webkit-progress-value {
scss/ui/_stamps.scss
+1
View File
@@ -13,5 +13,6 @@
.icon {
font-size: 1.25rem;
vertical-align: middle;
}
}
scss/ui/_tables.scss
+2 -5
View File
@@ -6,17 +6,14 @@
border-width: $table-border-width;
background: $min-black;
text-transform: uppercase;
font-size: $h6-font-size;
font-weight: 600;
font-size: 11px;
letter-spacing: .03em;
}
}
th {
padding-top: .5rem;
padding-bottom: .5rem;
font-weight: 400;
color: $text-muted;
white-space: nowrap;
}
}
scss/ui/_typo.scss
-30
View File
@@ -20,7 +20,6 @@ h6,
.h4,
.h5,
.h6 {
letter-spacing: -.012em;
a {
color: inherit;
@@ -84,35 +83,6 @@ img {
max-width: 100%;
}
/**
Divider
*/
.divider {
display: flex;
flex: 0;
align-items: center;
width: 100%;
margin: 1.5rem auto;
font-size: $h6-font-size;
color: $text-muted;
letter-spacing: .5px;
font-weight: 400;
&::before,
&::after {
flex-grow: 1;
content: "";
border-top: 1px solid $border-color;
}
&::before {
margin-right: 1rem;
}
&::after {
margin-left: 1rem;
}
}
/**
Selection
scss/utils/_text.scss
-13
View File
@@ -47,7 +47,6 @@ Antialiasing
Markdown
*/
.markdown {
line-height: 1.66;
> :first-child {
margin-top: 0;
@@ -57,18 +56,6 @@ Markdown
margin-bottom: 0;
}
> {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.5em;
font-weight: 600;
}
}
table {
@extend .table, .table-bordered;
}