mirror_css/stisla
1
0
Fork 0
mirror of https://github.com/stisla/stisla.git synced 2025-09-01 20:23:26 +02:00
Code Issues Releases Wiki Activity

added shadow and more

Browse Source
This commit is contained in:
Muhamad Nauval Azhar
2020-03-30 23:03:15 +07:00
parent 2f1f4581fd
commit bb4415696b
11 changed files with 11745 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
mix-manifest.json
View File

@@ -32,6 +32,7 @@
"/dist/js/page/modules-toastr.js": "/dist/js/page/modules-toastr.js",
"/dist/js/page/modules-vector-map.js": "/dist/js/page/modules-vector-map.js",
"/dist/js/page/utilities-contact.js": "/dist/js/page/utilities-contact.js",
"/dist/js/parts/_breakpoints.js": "/dist/js/parts/_breakpoints.js",
"/dist/js/parts/sidebar.js": "/dist/js/parts/sidebar.js",
"/dist/js/scripts.js": "/dist/js/scripts.js",
"/dist/js/stisla.js": "/dist/js/stisla.js"

62
src/html/index.html
View File

@@ -120,9 +120,9 @@
<div class="card-header">
<h4>Top 5 Products</h4>
<div class="card-header-action dropdown">
<a href="#" data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Month</a>
<a href="#" data-toggle="dropdown" class="btn btn-danger btn-shadow-danger dropdown-toggle">Month</a>
<ul class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<li class="dropdown-title">Select Period</li>
<li class="dropdown-header">Select Period</li>
<li><a href="#" class="dropdown-item">Today</a></li>
<li><a href="#" class="dropdown-item">Week</a></li>
<li><a href="#" class="dropdown-item active">Month</a></li>
@@ -315,53 +315,53 @@
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="text-title mb-2">July</div>
<div class="font-weight-bold mb-2">July</div>
<ul class="list-unstyled list-unstyled-border list-unstyled-noborder mb-0">
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="libraries/flag-icon-css/flags/4x3/id.svg" alt="image" width="40">
<li class="media py-2">
<img class="img-fluid mt-1 shadow-sm rounded-lg" src="libraries/flag-icon-css/flags/4x3/id.svg" alt="image" width="40">
<div class="media-body ml-3">
<div class="media-title">Indonesia</div>
<div class="text-small text-muted">3,282 <i class="fas fa-caret-down text-danger"></i></div>
<div class="text-small text-muted"><svg class="svg-md text-danger mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-down"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg> 3,282</div>
</div>
</li>
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="libraries/flag-icon-css/flags/4x3/my.svg" alt="image" width="40">
<li class="media py-2">
<img class="img-fluid mt-1 shadow-sm rounded-lg" src="libraries/flag-icon-css/flags/4x3/my.svg" alt="image" width="40">
<div class="media-body ml-3">
<div class="media-title">Malaysia</div>
<div class="text-small text-muted">2,976 <i class="fas fa-caret-down text-danger"></i></div>
<div class="text-small text-muted"><svg class="svg-md text-danger mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-down"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg> 2,976</div>
</div>
</li>
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="libraries/flag-icon-css/flags/4x3/us.svg" alt="image" width="40">
<li class="media py-2">
<img class="img-fluid mt-1 shadow-sm rounded-lg" src="libraries/flag-icon-css/flags/4x3/us.svg" alt="image" width="40">
<div class="media-body ml-3">
<div class="media-title">United States</div>
<div class="text-small text-muted">1,576 <i class="fas fa-caret-up text-success"></i></div>
<div class="text-small text-muted"><svg class="svg-md text-success mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg> 1,576</div>
</div>
</li>
</ul>
</div>
<div class="col-sm-6 mt-sm-0 mt-4">
<div class="text-title mb-2">August</div>
<div class="font-weight-bold mb-2">August</div>
<ul class="list-unstyled list-unstyled-border list-unstyled-noborder mb-0">
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="libraries/flag-icon-css/flags/4x3/id.svg" alt="image" width="40">
<li class="media py-2">
<img class="img-fluid mt-1 shadow-sm rounded-lg" src="libraries/flag-icon-css/flags/4x3/id.svg" alt="image" width="40">
<div class="media-body ml-3">
<div class="media-title">Indonesia</div>
<div class="text-small text-muted">3,486 <i class="fas fa-caret-up text-success"></i></div>
<div class="text-small text-muted"><svg class="svg-md text-success mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg> 3,486</div>
</div>
</li>
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="libraries/flag-icon-css/flags/4x3/ps.svg" alt="image" width="40">
<li class="media py-2">
<img class="img-fluid mt-1 shadow-sm rounded-lg" src="libraries/flag-icon-css/flags/4x3/ps.svg" alt="image" width="40">
<div class="media-body ml-3">
<div class="media-title">Palestine</div>
<div class="text-small text-muted">3,182 <i class="fas fa-caret-up text-success"></i></div>
<div class="text-small text-muted"><svg class="svg-md text-success mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg> 3,182</div>
</div>
</li>
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="libraries/flag-icon-css/flags/4x3/de.svg" alt="image" width="40">
<li class="media py-2">
<img class="img-fluid mt-1 shadow-sm rounded-lg" src="libraries/flag-icon-css/flags/4x3/de.svg" alt="image" width="40">
<div class="media-body ml-3">
<div class="media-title">Germany</div>
<div class="text-small text-muted">2,317 <i class="fas fa-caret-down text-danger"></i></div>
<div class="text-small text-muted"><svg class="svg-md text-danger mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-down"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg> 2,317</div>
</div>
</li>
</ul>
@@ -377,12 +377,13 @@
<div class="card-header">
<h4>Invoices</h4>
<div class="card-header-action">
<a href="#" class="btn btn-danger">View More <i class="fas fa-chevron-right"></i></a>
<a href="#" class="btn btn-danger btn-shadow-danger">View More</a>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive table-invoice">
<table class="table table-striped">
<table class="table table-striped table-fit mb-0">
<thead>
<tr>
<th>Invoice ID</th>
<th>Customer</th>
@@ -390,13 +391,15 @@
<th>Due Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">INV-87239</a></td>
<td class="font-weight-600">Kusnadi</td>
<td><div class="badge badge-warning">Unpaid</div></td>
<td>July 19, 2018</td>
<td>
<a href="#" class="btn btn-primary">Detail</a>
<a href="#" class="btn btn-primary btn-shadow-primary btn-block">Detail</a>
</td>
</tr>
<tr>
@@ -405,7 +408,7 @@
<td><div class="badge badge-success">Paid</div></td>
<td>July 21, 2018</td>
<td>
<a href="#" class="btn btn-primary">Detail</a>
<a href="#" class="btn btn-primary btn-shadow-primary btn-block">Detail</a>
</td>
</tr>
<tr>
@@ -414,7 +417,7 @@
<td><div class="badge badge-warning">Unpaid</div></td>
<td>July 22, 2018</td>
<td>
<a href="#" class="btn btn-primary">Detail</a>
<a href="#" class="btn btn-primary btn-shadow-primary btn-block">Detail</a>
</td>
</tr>
<tr>
@@ -423,7 +426,7 @@
<td><div class="badge badge-warning">Unpaid</div></td>
<td>July 22, 2018</td>
<td>
<a href="#" class="btn btn-primary">Detail</a>
<a href="#" class="btn btn-primary btn-shadow-primary btn-block">Detail</a>
</td>
</tr>
<tr>
@@ -432,9 +435,10 @@
<td><div class="badge badge-success">Paid</div></td>
<td>July 28, 2018</td>
<td>
<a href="#" class="btn btn-primary">Detail</a>
<a href="#" class="btn btn-primary btn-shadow-primary btn-block">Detail</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

6
src/html/layouts/master.html
View File

@@ -91,7 +91,7 @@
<a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep">
<svg class="nav-link-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-primary dropdown-list dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-primary dropdown-bordered dropdown-list dropdown-menu-right">
<div class="dropdown-header dropdown-header-lg">Notifications
<div class="float-right">
<a href="#">Mark All As Read</a>
@@ -151,8 +151,8 @@
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="nav-link d-flex pr-0 align-items-center dropdown-toggle">
<img alt="image" src="img/avatar/avatar-1.png" class="rounded-circle mr-2 avatar-sm">
<div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div>
<img alt="image" src="img/avatar/avatar-1.png" class="rounded mr-2 avatar-sm">
<div class="d-sm-none font-weight-bold d-lg-inline-block">Hi, Ujang Maman</div>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-user dropdown-menu-primary">
<h6 class="dropdown-header text-primary">Logged in 5 min ago</h6>

16
src/html/layouts/menu.html
View File

@@ -94,14 +94,14 @@
<span>Google Maps</span>
</a>
<ul class="sidebar-dropdown-menu">
<li{{ ' class="active"'|is_active('^gmaps-advanced-route(.*)', page)|safe }}><a href="gmaps-advanced-route.html">Advanced Route</a></li>
<li{{ ' class="active"'|is_active('^gmaps-draggable-marker(.*)', page)|safe }}><a href="gmaps-draggable-marker.html">Draggable Marker</a></li>
<li{{ ' class="active"'|is_active('^gmaps-geocoding.html(.*)', page)|safe }}><a href="gmaps-geocoding.html">Geocoding</a></li>
<li{{ ' class="active"'|is_active('^gmaps-geolocation.html(.*)', page)|safe }}><a href="gmaps-geolocation.html">Geolocation</a></li>
<li{{ ' class="active"'|is_active('^gmaps-marker.html(.*)', page)|safe }}><a href="gmaps-marker.html">Marker</a></li>
<li{{ ' class="active"'|is_active('^gmaps-multiple-marker(.*)', page)|safe }}><a href="gmaps-multiple-marker.html">Multiple Marker</a></li>
<li{{ ' class="active"'|is_active('^gmaps-route.html(.*)', page)|safe }}><a href="gmaps-route.html">Route</a></li>
<li{{ ' class="active"'|is_active('^gmaps-simple.html(.*)', page)|safe }}><a href="gmaps-simple.html">Simple</a></li>
<li{{ ' class="active"'|is_active('^gmaps-advanced-route(.*)', page)|safe }}><a class="nav-link" href="gmaps-advanced-route.html">Advanced Route</a></li>
<li{{ ' class="active"'|is_active('^gmaps-draggable-marker(.*)', page)|safe }}><a class="nav-link" href="gmaps-draggable-marker.html">Draggable Marker</a></li>
<li{{ ' class="active"'|is_active('^gmaps-geocoding.html(.*)', page)|safe }}><a class="nav-link" href="gmaps-geocoding.html">Geocoding</a></li>
<li{{ ' class="active"'|is_active('^gmaps-geolocation.html(.*)', page)|safe }}><a class="nav-link" href="gmaps-geolocation.html">Geolocation</a></li>
<li{{ ' class="active"'|is_active('^gmaps-marker.html(.*)', page)|safe }}><a class="nav-link" href="gmaps-marker.html">Marker</a></li>
<li{{ ' class="active"'|is_active('^gmaps-multiple-marker(.*)', page)|safe }}><a class="nav-link" href="gmaps-multiple-marker.html">Multiple Marker</a></li>
<li{{ ' class="active"'|is_active('^gmaps-route.html(.*)', page)|safe }}><a class="nav-link" href="gmaps-route.html">Route</a></li>
<li{{ ' class="active"'|is_active('^gmaps-simple.html(.*)', page)|safe }}><a class="nav-link" href="gmaps-simple.html">Simple</a></li>
</ul>
</li>
<li class="nav-item nav-item-dropdown dropdown{{ ' active nav-item-dropdown-active'|is_active('^modules-(.*)', page)|safe }}">

4
src/scss/_mixins.scss
View File

@@ -4,3 +4,7 @@
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
}
@mixin button-shadow($color) {
box-shadow: 0 2px 6px rgba(theme-color($color), .3);
}

6
src/scss/core/_sidebar.scss
View File

@@ -54,6 +54,12 @@
font-weight: 300;
transition: $transition-base;
&.beep::after {
position: relative;
right: auto;
margin-left: .3rem;
}
span {
transition: $transition-base;
}

332
src/scss/extender/_button.scss
View File

@@ -1,329 +1,13 @@
.buttons {
.btn {
@include children-margin;
}
}
/**
* Shadow
*/
.btn {
&:focus {
box-shadow: none !important;
outline: none;
}
&:active {
box-shadow: none !important;
outline: none;
&:focus {
box-shadow: none !important;
outline: none;
}
}
}
@each $color, $value in $theme-colors {
.btn-shadow-#{$color} {
@include button-shadow($color);
.btn.btn-icon-split i, .dropdown-item.has-icon i {
text-align: center;
width: 15px;
font-size: 15px;
float: left;
margin-right: 10px;
}
.btn {
&.btn-icon-split {
position: relative;
i {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 45px;
border-radius: 3px 0 0 3px;
line-height: 32px;
}
div {
margin-left: 40px;
}
}
&.btn-icon-noflo-splitat {
display: table;
text-align: right;
i {
float: none;
margin: 0;
display: table-cell;
vertical-align: middle;
width: 30%;
}
div {
display: table-cell;
vertical-align: middle;
width: 70%;
text-align: left;
padding-left: 10px;
}
}
font-weight: 600;
font-size: 12px;
line-height: 24px;
padding: .3rem .8rem;
letter-spacing: .5px;
&:not(.btn-social):not(.btn-social-icon) {
&:active, &:focus, &:hover {
border-color: transparent !important;
background-color: color_lighten(light, 10%);
}
}
> i {
margin-left: 0 !important;
}
&.btn-lg {
padding: .55rem 1.5rem;
font-size: 12px;
&.btn-icon-split {
i {
line-height: 42px;
}
div {
margin-left: 25px;
&:hover {
box-shadow: none;
}
}
}
&.btn-sm {
padding: .10rem .4rem;
font-size: 12px;
}
&.btn-icon {
.ion, .fas, .far, .fab, .fal {
margin-left: 0 !important;
font-size: 12px;
}
&.icon-left {
.ion, .fas, .far, .fab, .fal {
margin-right: 3px;
}
}
&.icon-right {
.ion, .fas, .far, .fab, .fal {
margin-left: 3px !important;
}
}
}
}
.btn-action {
color: #fff !important;
line-height: 25px;
font-size: 12px;
min-width: 35px;
min-height: 35px;
}
.btn-secondary, .btn-secondary.disabled {
@include button-shadow(secondary, 7%);
background-color: color(secondary);
border-color: color(secondary);
color: #fff;
&:hover, &:focus, &:active {
background-color: color_darken(secondary, 5%) !important;
color: #fff !important;
}
}
.btn-outline-secondary, .btn-outline-secondary.disabled {
&:hover, &:focus, &:active {
background-color: color(secondary) !important;
color: #fff !important;
}
}
.btn-success, .btn-success.disabled {
@include button-shadow(success);
background-color: color(success);
border-color: color(success);
color: #fff;
&:hover, &:focus, &:active {
background-color: color_darken(success, 5%) !important;
color: #fff !important;
}
}
.btn-outline-success, .btn-outline-success.disabled {
&:hover, &:focus, &:active {
background-color: color(success) !important;
color: #fff !important;
}
}
.btn-danger, .btn-danger.disabled {
@include button-shadow(danger);
background-color: color(danger);
border-color: color(danger);
color: #fff;
&:hover, &:focus, &:active {
background-color: color_darken(danger, 13%) !important;
}
}
.btn-outline-danger, .btn-outline-danger.disabled {
&:hover, &:focus, &:active {
background-color: color_darken(danger, 13%) !important;
color: #fff !important;
}
}
.btn-dark, .btn-dark.disabled {
@include button-shadow(dark, 40%);
background-color: color(dark);
border-color: color(dark);
color: #fff;
&:hover, &:focus, &:active {
background-color: color_darken(dark, 20%) !important;
}
}
.btn-outline-dark, .btn-outline-dark.disabled {
&:hover, &:focus, &:active {
background-color: color_darken(dark, 20%) !important;
color: #fff !important;
}
}
.btn-light, .btn-light.disabled {
@include button-shadow(light, 1%);
background-color: color(light);
border-color: color(light);
color: color(dark);
&:hover, &:focus, &:active {
background-color: color_darken(light, 10%) !important;
}
}
.btn-outline-light, .btn-outline-light.disabled {
border-color: color(light);
color: color(light);
&:hover, &:focus, &:active {
background-color: color(light) !important;
color: #fff !important;
}
}
.btn-warning, .btn-warning.disabled {
@include button-shadow(warning);
background-color: color(warning);
border-color: color(warning);
color: #fff;
&:hover, &:focus, &:active {
background-color: color_darken(warning, 5%) !important;
color: #fff !important;
}
}
.btn-outline-warning, .btn-outline-warning.disabled {
&:hover, &:focus, &:active {
background-color: color(warning) !important;
color: #fff !important;
}
}
.btn-info, .btn-info.disabled {
@include button-shadow(info);
background-color: color(info);
border-color: color(info);
color: #fff;
&:hover, &:focus, &:active {
background-color: color_darken(info, 10%) !important;
}
}
.btn-outline-info, .btn-outline-info.disabled {
&:hover, &:focus, &:active {
background-color: color_darken(info, 10%) !important;
color: #fff !important;
}
}
.btn-primary, .btn-primary.disabled {
@include button-shadow(primary);
background-color: color(primary);
border-color: color(primary);
&:focus {
background-color: color_darken(primary, 10%) !important;
&:active {
background-color: color_darken(primary, 10%) !important;
}
}
&:active, &:hover {
background-color: color_darken(primary, 10%) !important;
}
}
.btn-outline-primary, .btn-outline-primary.disabled {
border-color: color(primary);
color: color(primary);
&:hover, &:focus, &:active {
background-color: color(primary) !important;
color: #fff;
}
}
.btn-outline-white, .btn-outline-white.disabled {
border-color: #fff;
color: #fff;
&:hover, &:focus, &:active {
background-color: #fff;
color: color(primary);
}
}
.btn-round {
border-radius: 30px;
padding-left: 34px;
padding-right: 34px;
}
.btn-social-icon, .btn-social {
border: none;
border-radius: 3px;
}
.btn-social-icon {
color: #fff !important;
padding-left: 18px;
padding-right: 18px;
> :first-child {
font-size: 16px;
}
}
.btn-social {
padding: 12px 12px 12px 50px;
color: #fff !important;
font-weight: 500;
> :first-child {
width: 55px;
line-height: 50px;
border-right: none;
}
}
.btn-reddit {
color: #000 !important;
}
.btn-group {
.btn {
&.active {
background-color: color(primary);
color: #fff;
}
}
}
.btn-progress {
position: relative;
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTQzLjkzNSwyNS4xNDVjMC0xMC4zMTgtOC4zNjQtMTguNjgzLTE4LjY4My0xOC42ODNjLTEwLjMxOCwwLTE4LjY4Myw4LjM2NS0xOC42ODMsMTguNjgzaDQuMDY4YzAtOC4wNzEsNi41NDMtMTQuNjE1LDE0LjYxNS0xNC42MTVjOC4wNzIsMCwxNC42MTUsNi41NDMsMTQuNjE1LDE0LjYxNUg0My45MzV6Ij4NCjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCINCiAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KICB0eXBlPSJyb3RhdGUiDQogIGZyb209IjAgMjUgMjUiDQogIHRvPSIzNjAgMjUgMjUiDQogIGR1cj0iMC42cyINCiAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4NCjwvcGF0aD4NCjwvc3ZnPg0K');
background-position: center;
background-repeat: no-repeat;
background-size: 30px;
color: transparent !important;
pointer-events: none;
}

71
src/scss/extender/_media.scss
View File

@@ -1,70 +1,3 @@
.media {
.media-right {
float: right;
color: color(primary);
font-weight: 600;
font-size: 16px;
}
.media-icon {
font-size: 20px;
margin-right: 15px;
line-height: 1;
}
.media-title {
margin-top: 0;
margin-bottom: 5px;
font-weight: 600;
font-size: 15px;
color: color(fontdark);
a {
font-weight: inherit;
color: #000;
}
}
.media-description {
line-height: 24px;
color: color(fontdark);
}
.media-links {
margin-top: 10px;
a {
font-size: 12px;
color: #999;
}
}
.media-progressbar {
flex: 1;
.progress-text {
font-size: 12px;
font-weight: 600;
margin-bottom: 5px;
color: color(fontdark);
}
}
.media-cta {
margin-left: 40px;
.btn {
padding: 5px 15px;
border-radius: 30px;
font-size: 12px;
}
}
.media-items {
display: flex;
.media-item {
flex: 1;
text-align: center;
padding: 0 15px;
.media-label {
font-weight: 600;
font-size: 12px;
color: color(fontdark);
letter-spacing: .5px;
}
.media-value {
font-weight: 700;
font-size: 18px;
}
}
}
.media-title {
font-weight: $font-weight-bold;
}

11
src/scss/extender/_table.scss
View File

@@ -13,6 +13,17 @@
}
}
.table-fit {
thead th:first-child,
tbody td:first-child {
padding-left: $card-spacer-x;
}
thead th:last-child,
tbody td:last-child {
padding-right: $card-spacer-x;
}
}
.table-dark {
thead th {
color: $table-dark-color;

2
src/scss/style.scss
View File

@@ -26,4 +26,6 @@ html {
@import 'extender/_card';
@import 'extender/_dropdown';
@import 'extender/_table';
@import 'extender/_button';
@import 'extender/_media';
@import 'components/_avatar';

11616
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff