Add project files.
This commit is contained in:
parent
dfcd3a35f4
commit
65abab97b2
|
|
@ -0,0 +1,119 @@
|
|||
@inherits LayoutComponentBase
|
||||
|
||||
<TelerikRootComponent>
|
||||
<!-- Header
|
||||
============================================= -->
|
||||
<header id="header" class="full-header header-size-custom" data-sticky-shrink="false">
|
||||
<div id="header-wrap">
|
||||
<div class="container-fluid">
|
||||
<div class="header-row flex-lg-row-reverse">
|
||||
|
||||
<!-- Logo
|
||||
============================================= -->
|
||||
<div id="logo" class="me-lg-0 ms-lg-auto">
|
||||
<a href="demo-car.html">
|
||||
<img class="logo-default" srcset="demos/car/images/logo.png, demos/car/images/logo@2x.png 2x" src="demos/car/images/logo@2x.png" alt="Canvas Logo">
|
||||
</a>
|
||||
</div><!-- #logo end -->
|
||||
|
||||
<div class="primary-menu-trigger">
|
||||
<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
|
||||
<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Primary Navigation
|
||||
============================================= -->
|
||||
<nav class="primary-menu with-arrows">
|
||||
<ul class="menu-container">
|
||||
<li class="menu-item current"><a class="menu-link" href="demo-car.html"><div>Home</div></a></li>
|
||||
<!-- Mega Menu -->
|
||||
<li class="menu-item"><a class="menu-link" href="demo-car-listing.html"><div>Browse By State</div></a></li>
|
||||
<li class="menu-item"><a class="menu-link" href="demo-car-dealers.html"><div>Dealers</div></a></li>
|
||||
<li class="menu-item"><a class="menu-link" href="demo-car-accessories.html"><div>Accessories</div></a></li>
|
||||
<li class="menu-item"><a class="menu-link" href="demo-car-interiors.html"><div>Interiors</div></a></li>
|
||||
<li class="menu-item"><a class="menu-link" href="demo-car-faqs.html"><div>FAQs</div></a></li>
|
||||
<li class="menu-item"><a class="menu-link" href="demo-car-blog.html"><div>Blog</div></a></li>
|
||||
<li class="menu-item"><a class="menu-link" href="demo-car-contact.html"><div>Contacts</div></a></li>
|
||||
</ul>
|
||||
</nav><!-- #primary-menu end -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-wrap-clone"></div>
|
||||
</header><!-- #header end -->
|
||||
@Body
|
||||
|
||||
<div id="blazor-error-ui">
|
||||
An unhandled error has occurred.
|
||||
<a href="" class="reload">Reload</a>
|
||||
<a class="dismiss">🗙</a>
|
||||
</div>
|
||||
</TelerikRootComponent>
|
||||
|
||||
<head>
|
||||
<!-- Font Imports -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Mukta+Vaani:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Core Style -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<!-- Font Icons -->
|
||||
<link rel="stylesheet" href="css/font-icons.css">
|
||||
<link rel="stylesheet" href="demos/car/css/car-icons/style.css">
|
||||
|
||||
<!-- Plugins/Components CSS -->
|
||||
<link rel="stylesheet" href="css/components/bs-select.css"><!-- Bootstrap Select CSS -->
|
||||
<link rel="stylesheet" href="css/components/bs-switches.css"><!-- Bootstrap Switch CSS -->
|
||||
<link rel="stylesheet" href="css/components/datepicker.css"><!-- Datepicker Slider CSS -->
|
||||
<link rel="stylesheet" href="css/components/ion.rangeslider.css"><!-- Range Slider CSS -->
|
||||
<!-- Niche Demos -->
|
||||
<link rel="stylesheet" href="demos/car/car.css">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- JavaScripts
|
||||
============================================= -->
|
||||
<script src="js/plugins.min.js"></script>
|
||||
<script src="js/functions.bundle.js"></script>
|
||||
|
||||
<!-- Bootstrap Select Plugin -->
|
||||
<script src="js/components/bs-select.js"></script>
|
||||
|
||||
<!-- Bootstrap Switch Plugin -->
|
||||
<script src="js/components/bs-switches.js"></script>
|
||||
|
||||
<!-- Datepicker Slider Plugin -->
|
||||
<script src="js/components/datepicker.js"></script>
|
||||
|
||||
<!-- Range Slider Plugin -->
|
||||
<script src="js/components/rangeslider.min.js"></script>
|
||||
|
||||
<script>
|
||||
jQuery(".bt-switch").bootstrapSwitch();
|
||||
|
||||
jQuery(function () {
|
||||
jQuery('.travel-date-group').datepicker({
|
||||
autoclose: true,
|
||||
startView: 2,
|
||||
minViewMode: 2,
|
||||
todayHighlight: false,
|
||||
defaultViewDate: { year: 2010, month: 01, day: 01 }
|
||||
});
|
||||
|
||||
jQuery(".price-range").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
from: 1000,
|
||||
prefix: "$"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
.page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.top-row ::deep a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-row.auth ::deep a:first-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.top-row, article {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#blazor-error-ui {
|
||||
background: lightyellow;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
||||
display: none;
|
||||
left: 0;
|
||||
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#blazor-error-ui .dismiss {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="">TSC2</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
|
||||
|
||||
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
|
||||
<nav class="flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="bi bi-house-door-fill" aria-hidden="true"></span> Home
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="counter">
|
||||
<span class="bi bi-plus-square-fill" aria-hidden="true"></span> Counter
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="weather">
|
||||
<span class="bi bi-list-nested" aria-hidden="true"></span> Weather
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
.navbar-toggler {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
width: 3.5rem;
|
||||
height: 2.5rem;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.navbar-toggler:checked {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.bi {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.75rem;
|
||||
top: -1px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bi-house-door-fill {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bi-plus-square-fill {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bi-list-nested {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a {
|
||||
color: #d7d7d7;
|
||||
border-radius: 4px;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
background-color: rgba(255,255,255,0.37);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-item ::deep a:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-toggler:checked ~ .nav-scrollable {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
|
||||
/* Allow sidebar to scroll for tall menus */
|
||||
height: calc(100vh - 3.5rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@page "/counter"
|
||||
|
||||
<PageTitle>Counter</PageTitle>
|
||||
|
||||
<h1>Counter</h1>
|
||||
|
||||
<p role="status">Current count: @currentCount</p>
|
||||
|
||||
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
|
||||
|
||||
@code {
|
||||
private int currentCount = 0;
|
||||
|
||||
private void IncrementCount()
|
||||
{
|
||||
currentCount++;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,500 @@
|
|||
@page "/"
|
||||
@using System.Net.Http.Headers
|
||||
@using System.Text.Json
|
||||
@using Newtonsoft.Json
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr" lang="en-US">
|
||||
<head>
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="IE=edge">
|
||||
<meta name="author" content="SemiColonWeb">
|
||||
<meta name="description" content="Create New & Used Car Sale Websites with Canvas Template. Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
|
||||
<!-- Document Title
|
||||
============================================= -->
|
||||
<title>Dealers - Car | Canvas</title>
|
||||
|
||||
<style>
|
||||
|
||||
.dropdown-toggle::after {
|
||||
margin-left: 0.255em;
|
||||
}
|
||||
|
||||
.dark .irs-bar {
|
||||
background-color: #CCC
|
||||
}
|
||||
|
||||
.dark .irs-grid-text {
|
||||
color: #EEE
|
||||
}
|
||||
|
||||
.slide-caption {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
max-width: none !important;
|
||||
-webkit-transition: opacity .4s .4s, transform .4s .4s ease-in-out;
|
||||
-o-transition: opacity .4s .4s, transform .4s .4s ease-in-out;
|
||||
transition: opacity .4s .4s, transform .4s .4s ease-in-out;
|
||||
-webkit-transform: translateY(50px);
|
||||
-ms-transform: translateY(50px);
|
||||
-o-transform: translateY(50px);
|
||||
transform: translateY(50px);
|
||||
}
|
||||
|
||||
.flex-viewport {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.slide-caption.slider-caption-bottom {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
height: auto !important;
|
||||
left: 0;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.slide-caption.slider-caption-bottom p {
|
||||
margin-bottom: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.slide.flex-active-slide .slide-caption {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.slide .slide-caption.card {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
top: 20px;
|
||||
font-size: 18px;
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
-webkit-transition: opacity .4s .6s;
|
||||
-o-transition: opacity .4s .6s;
|
||||
transition: opacity .4s .6s;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="stretched side-push-panel" data-loader-html="<div><img src='demos/car/images/page-loader.gif' alt='Loader'></div>">
|
||||
|
||||
<!-- Side Panel Overlay -->
|
||||
<div class="body-overlay"></div>
|
||||
|
||||
<!-- Side Panel -->
|
||||
<div id="side-panel">
|
||||
|
||||
<div id="side-panel-trigger-close" class="side-panel-trigger"><a href="#"><i class="bi-x-lg"></i></a></div>
|
||||
|
||||
<div class="side-panel-wrap">
|
||||
|
||||
<div class="widget">
|
||||
|
||||
<a href="index.html"><img src="demos/car/images/logo@2x.png" alt="Canvas Logo" height="50"></a>
|
||||
|
||||
<p>It has always been, and will always be, about quality. We're passionate about ethically sourcing the finest coffee beans, roasting them with great care. We'd like to hear your message!</p>
|
||||
|
||||
<div class="widget quick-contact-widget form-widget border-0 pt-0">
|
||||
|
||||
<h4>Quick Contact</h4>
|
||||
<div class="form-result"></div>
|
||||
<form id="quick-contact-form" name="quick-contact-form" action="include/form.php" method="post" class="quick-contact-form mb-0">
|
||||
<div class="form-process">
|
||||
<div class="css3-spinner">
|
||||
<div class="css3-spinner-scaler"></div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="required form-control mb-2" id="quick-contact-form-name" name="quick-contact-form-name" value="" placeholder="Full Name">
|
||||
<input type="text" class="required form-control email mb-2" id="quick-contact-form-email" name="quick-contact-form-email" value="" placeholder="Email Address">
|
||||
<textarea class="required form-control mb-2 short-textarea" id="quick-contact-form-message" name="quick-contact-form-message" rows="4" cols="30" placeholder="Message"></textarea>
|
||||
<input type="text" class="d-none" id="quick-contact-form-botcheck" name="quick-contact-form-botcheck" value="">
|
||||
<input type="hidden" name="prefix" value="quick-contact-form-">
|
||||
<button type="submit" id="quick-contact-form-submit" name="quick-contact-form-submit" class="button button-small button-3d m-0" value="submit">Send Email</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Document Wrapper
|
||||
============================================= -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Slider
|
||||
============================================= -->
|
||||
<div id="slider" class="slider-element h-auto">
|
||||
<div class="slider-inner">
|
||||
<div class="row align-items-stretch flex-md-row-reverse mx-0">
|
||||
<div class="col-md-8 col-sm-12 px-0 min-vh-40">
|
||||
<TelerikMap @ref="MapRef" Zoom="@Zoom" Height="@MapHeight" Center="@Center" OnMarkerClick="@OnMarkerClick">
|
||||
<MapLayers>
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@Attribution"
|
||||
Subdomains="@Subdomains"
|
||||
UrlTemplate="@UrlTemplate">
|
||||
</MapLayer>
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MapMarkers"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)">
|
||||
</MapLayer>
|
||||
</MapLayers>
|
||||
</TelerikMap>
|
||||
|
||||
@code {
|
||||
TelerikMap? MapRef { get; set; }
|
||||
public double Zoom { get; set; } = 1;
|
||||
public static double[] Center = [40.68, 74.04];
|
||||
public string MapHeight { get; set; } = "800px";
|
||||
|
||||
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
|
||||
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
public string Attribution { get; set; } = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
HttpClient client = new();
|
||||
var ip = await client.GetStringAsync("https://api.ipify.org"); // Free API to get public IP of user
|
||||
|
||||
var response = await client.GetStringAsync(String.Format("https://ipapi.co/{0}/json/", ip));
|
||||
Console.WriteLine(response);
|
||||
LocationDetails? json = JsonConvert.DeserializeObject<LocationDetails>(response);
|
||||
if (json != null)
|
||||
{
|
||||
Center = [json.latitude, json.longitude];
|
||||
Zoom = 13;
|
||||
}
|
||||
|
||||
InitializeMapMarkers(Center);
|
||||
if (MapRef != null)
|
||||
MapRef.Refresh();
|
||||
}
|
||||
|
||||
public async void OnMarkerClick(MapMarkerClickEventArgs args)
|
||||
{
|
||||
var dataItem = args.DataItem as MarkerModel;
|
||||
UpdateDrawer();
|
||||
await ToggleDrawer();
|
||||
Console.WriteLine(dataItem.Title);
|
||||
}
|
||||
|
||||
public List<MarkerModel> MapMarkers { get; set; } = new List<MarkerModel>()
|
||||
{
|
||||
new MarkerModel()
|
||||
{
|
||||
Title = ""
|
||||
}
|
||||
};
|
||||
|
||||
private void InitializeMapMarkers(double[] coords)
|
||||
{
|
||||
// Server call to load map markers into a list of tuples
|
||||
List<(double[], string)> localMarkers = MapDriver.InitializeMarkers(coords);
|
||||
foreach (var current in localMarkers)
|
||||
{
|
||||
MapMarkers.Add(new MarkerModel()
|
||||
{
|
||||
LatLng = current.Item1,
|
||||
Title = current.Item2
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public class MarkerModel
|
||||
{
|
||||
public double[] LatLng { get; set; } = [42.4649, -83.3684];
|
||||
public string Title { get; set; } = "";
|
||||
}
|
||||
private class LocationDetails
|
||||
{
|
||||
public string ip { get; set; } = "";
|
||||
public string network { get; set; } = "";
|
||||
public string version { get; set; } = "";
|
||||
public string city { get; set; } = "";
|
||||
public string region { get; set; } = "";
|
||||
public string region_code { get; set; } = "";
|
||||
public string country { get; set; } = "";
|
||||
public string country_code { get; set; } = "";
|
||||
public string country_code_iso3 { get; set; } = "";
|
||||
public string country_capital { get; set; } = "";
|
||||
public string country_tld { get; set; } = "";
|
||||
public string continent_code { get; set; } = "";
|
||||
public bool in_eu { get; set; } = false;
|
||||
public string postal { get; set; } = "";
|
||||
public double latitude { get; set; } = -1;
|
||||
public double longitude { get; set; } = -1;
|
||||
public string timezone { get; set; } = "";
|
||||
public string utc_offset { get; set; } = "";
|
||||
public string country_calling_code { get; set; } = "";
|
||||
public string currency { get; set; } = "";
|
||||
public string currency_name { get; set; } = "";
|
||||
public string languages { get; set; } = "";
|
||||
public string country_area { get; set; } = "";
|
||||
public string country_population { get; set; } = "";
|
||||
public string asn { get; set; } = "";
|
||||
public string org { get; set; } = "";
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-12 px-0">
|
||||
<div class="card bg-color rounded-0 shadow-sm p-4 h-100" style="background-color: #6aa84f">
|
||||
<div class="card-body">
|
||||
<h3 class="text-white">Find Your Shop:</h3>
|
||||
<form action="#" method="post" class="mb-0">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3">
|
||||
<label class="text-white" for="template-contactform-date">Shop Name</label>
|
||||
<input type="text" name="template-contactform-date" value="" class="form-control text-start">
|
||||
<label class="mt-3 text-white" for="template-contactform-date">City, State, ZIP</label>
|
||||
<input type="text" class="form-control text-start" name="template-contactform-end">
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-3 dark input-daterange travel-date-group">
|
||||
<label class="text-white">Price Range</label>
|
||||
<input class="price-range">
|
||||
</div>
|
||||
<div class="col-12 mt-4">
|
||||
<button class="button button-3d button-rounded button-white button-light button-large w-100 m-0">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- Shop info pane-->
|
||||
|
||||
<div style="width: 1500px">
|
||||
<TelerikDrawer @ref="@Drawer" Data="Data" MiniMode="false" Mode="@Mode" Position="@Position" Width="600px">
|
||||
<DrawerContent>
|
||||
</DrawerContent>
|
||||
</TelerikDrawer>
|
||||
</div>
|
||||
|
||||
<div> <!-- Shop info drawer C# -->
|
||||
@code{
|
||||
public TelerikDrawer<DrawerItem>? Drawer { get; set; }
|
||||
public DrawerMode Mode { get; set; }
|
||||
public IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>();
|
||||
public DrawerPosition Position = DrawerPosition.End;
|
||||
public class DrawerItem {
|
||||
public string? Text { get; set; }
|
||||
public ISvgIcon? Icon { get; set; }
|
||||
public bool Separator { get; set; }
|
||||
}
|
||||
|
||||
public void UpdateDrawer()
|
||||
{
|
||||
Data = new List<DrawerItem>
|
||||
{
|
||||
new DrawerItem { Text = "HelloWorld"},
|
||||
new DrawerItem { Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."},
|
||||
};
|
||||
}
|
||||
public async Task ToggleDrawer() => await Drawer.ToggleAsync();
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content
|
||||
============================================= -->
|
||||
<section id="content">
|
||||
|
||||
<div class="content-wrap py-0">
|
||||
|
||||
<div class="section m-0">
|
||||
<div class="container">
|
||||
<div class="row py-5">
|
||||
<div class="col-md-4 mb-md-3 mb-5">
|
||||
<div class="feature-box fbox-plain">
|
||||
<div class="fbox-icon">
|
||||
<a href="#"><i class="icon-car-battery"></i></a>
|
||||
</div>
|
||||
<div class="fbox-content">
|
||||
<h3>Long Battery Life</h3>
|
||||
<p>Canvas provides support for Native HTML5 Videos that can be added to a Background.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-md-3 mb-5">
|
||||
<div class="feature-box fbox-plain">
|
||||
<div class="fbox-icon">
|
||||
<a href="#"><i class="icon-car-cogs2"></i></a>
|
||||
</div>
|
||||
<div class="fbox-content">
|
||||
<h3>24x7 Service</h3>
|
||||
<p>Complete control on each & every element that provides endless customization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-md-3 mb-5">
|
||||
<div class="feature-box fbox-plain">
|
||||
<div class="fbox-icon">
|
||||
<a href="#"><i class="icon-car-pump"></i></a>
|
||||
</div>
|
||||
<div class="fbox-content">
|
||||
<h3>Petrol, Diesel & LPG</h3>
|
||||
<p>Change your Website's Primary Scheme instantly by simply adding the dark class.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mt-0 mt-md-5">
|
||||
<div class="feature-box fbox-plain">
|
||||
<div class="fbox-icon">
|
||||
<a href="#"><i class="icon-car-meter"></i></a>
|
||||
</div>
|
||||
<div class="fbox-content">
|
||||
<h3>Powerful Dashboard</h3>
|
||||
<p>Canvas provides support for Native HTML5 Videos that can be added to a Background.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mt-5">
|
||||
<div class="feature-box fbox-plain">
|
||||
<div class="fbox-icon">
|
||||
<a href="#"><i class="icon-car-paint"></i></a>
|
||||
</div>
|
||||
<div class="fbox-content">
|
||||
<h3>Differnt Color Options</h3>
|
||||
<p>Complete control on each & every element that provides endless customization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mt-5">
|
||||
<div class="feature-box fbox-plain">
|
||||
<div class="fbox-icon">
|
||||
<a href="#"><i class="icon-car-wheel"></i></a>
|
||||
</div>
|
||||
<div class="fbox-content">
|
||||
<h3>All wheel Drive</h3>
|
||||
<p>Change your Website's Primary Scheme instantly by simply adding the dark class.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="width:85%; margin:auto; border-color:#1b380d; color:#1b380d; height:3px" />
|
||||
<br />
|
||||
|
||||
|
||||
<div class="section m-0">
|
||||
<div class="container">
|
||||
<div class="heading-block mb-4 text-center">
|
||||
<h2>Popular Cars</h2>
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Items
|
||||
============================================= -->
|
||||
<div id="portfolio" class="portfolio row gutter-20 col-mb-30">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section><!-- #content end -->
|
||||
<!-- Footer
|
||||
============================================= -->
|
||||
<footer id="footer" class="dark border-0" style="background-color: #080808;">
|
||||
<div class="container-fluid px-5">
|
||||
<!-- Footer Widgets
|
||||
============================================= -->
|
||||
<div class="footer-widgets-wrap">
|
||||
|
||||
<div class="row col-mb-50 justify-content-between">
|
||||
<div class="col-lg-7">
|
||||
|
||||
<div class="row col-mb-30">
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="widget widget_links widget-li-noicon">
|
||||
<h4>Hire</h4>
|
||||
<ul>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Feedback</a></li>
|
||||
<li><a href="#">Plugins</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="widget widget_links widget-li-noicon">
|
||||
<h4>Community</h4>
|
||||
<ul>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Feedback</a></li>
|
||||
<li><a href="#">Plugins</a></li>
|
||||
<li><a href="#">Support Forums</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="widget widget_links widget-li-noicon">
|
||||
<h4>Learn</h4>
|
||||
<ul>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Feedback</a></li>
|
||||
<li><a href="#">Plugins</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="widget widget_links widget-li-noicon">
|
||||
<h4>About</h4>
|
||||
<ul>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Feedback</a></li>
|
||||
<li><a href="#">Plugins</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5 text-center text-lg-end">
|
||||
<img src="demos/car/images/logo-footer.png" alt="Image" height="50">
|
||||
<br>
|
||||
<div style="color: #444">
|
||||
<span>© Canvas Automotive. All Rights Reserved.</span>
|
||||
<div class="clear"></div>
|
||||
<p style="margin-top: 10px;">Objectively restore standards compliant opportunities whereas one-to-one collaboration and idea-sharing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .footer-widgets-wrap end -->
|
||||
</div>
|
||||
</footer><!-- #footer end -->
|
||||
|
||||
</div><!-- #wrapper end -->
|
||||
<!-- Go To Top
|
||||
============================================= -->
|
||||
<div id="gotoTop" class="uil uil-angle-up"></div>
|
||||
|
||||
<!-- Contact Button
|
||||
============================================= -->
|
||||
<div id="contact-me" class="bi-envelope side-panel-trigger bg-color"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
@page "/weather"
|
||||
|
||||
<PageTitle>Weather</PageTitle>
|
||||
|
||||
<h1>Weather</h1>
|
||||
|
||||
<p>This component demonstrates showing data.</p>
|
||||
|
||||
@if (forecasts == null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Temp. (C)</th>
|
||||
<th>Temp. (F)</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var forecast in forecasts)
|
||||
{
|
||||
<tr>
|
||||
<td>@forecast.Date.ToShortDateString()</td>
|
||||
<td>@forecast.TemperatureC</td>
|
||||
<td>@forecast.TemperatureF</td>
|
||||
<td>@forecast.Summary</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
@code {
|
||||
private WeatherForecast[]? forecasts;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Simulate asynchronous loading to demonstrate a loading indicator
|
||||
await Task.Delay(500);
|
||||
|
||||
var startDate = DateOnly.FromDateTime(DateTime.Now);
|
||||
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
|
||||
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
|
||||
{
|
||||
Date = startDate.AddDays(index),
|
||||
TemperatureC = Random.Shared.Next(-20, 55),
|
||||
Summary = summaries[Random.Shared.Next(summaries.Length)]
|
||||
}).ToArray();
|
||||
}
|
||||
|
||||
private class WeatherForecast
|
||||
{
|
||||
public DateOnly Date { get; set; }
|
||||
public int TemperatureC { get; set; }
|
||||
public string? Summary { get; set; }
|
||||
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
|
||||
builder.Services.AddTelerikBlazor();
|
||||
|
||||
await builder.Build().RunAsync();
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<Router AppAssembly="@typeof(Program).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
|
||||
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
||||
</Found>
|
||||
</Router>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net8.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
|
||||
<StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
|
||||
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
|
||||
<PackageReference Include="Telerik.UI.for.Blazor.Trial" Version="5.1.1" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\TSC2.Server\TSC2.Server.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Folder Include="wwwroot\csharp\" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@using System.Net.Http
|
||||
@using System.Net.Http.Json
|
||||
@using Microsoft.AspNetCore.Components.Forms
|
||||
@using Microsoft.AspNetCore.Components.Routing
|
||||
@using Microsoft.AspNetCore.Components.Web
|
||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||
@using Microsoft.JSInterop
|
||||
@using TSC2.Client
|
||||
@using TSC2.Server
|
||||
@using Telerik.Blazor
|
||||
@using Telerik.Blazor.Components
|
||||
@using Telerik.SvgIcons
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"Logging": {
|
||||
"LogLevel": {
|
||||
"Default": "Information",
|
||||
"Microsoft.AspNetCore": "Warning"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"Logging": {
|
||||
"LogLevel": {
|
||||
"Default": "Information",
|
||||
"Microsoft.AspNetCore": "Warning"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,518 @@
|
|||
.fc-calendar-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.fc-calendar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-head {
|
||||
background: #ccc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: -moz-calc(100% - 30px);
|
||||
height: -webkit-calc(100% - 30px);
|
||||
height: calc(100% - 30px);
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.fc-four-rows .fc-row {
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
.fc-five-rows .fc-row {
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
.fc-six-rows .fc-row {
|
||||
height: 16.66%;
|
||||
height: -moz-calc(100%/6);
|
||||
height: -webkit-calc(100%/6);
|
||||
height: calc(100%/6);
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div,
|
||||
.fc-calendar .fc-head > div {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 14.28%; /* 100% / 7 */
|
||||
width: -moz-calc(100%/7);
|
||||
width: -webkit-calc(100%/7);
|
||||
width: calc(100%/7);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* IE 9 is rounding up the calc it seems */
|
||||
.ie9 .fc-calendar .fc-row > div,
|
||||
.ie9 .fc-calendar .fc-head > div {
|
||||
width: 14.2%;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div {
|
||||
border-right: 1px solid #ddd;
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-head > div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div > span.fc-date {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
color: #ddd;
|
||||
text-shadow: 0 -1px 0 rgba(255,255,255,0.8);
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-starttime,
|
||||
.fc-calendar .fc-endtime {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div > span.fc-weekday {
|
||||
padding-left: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div.fc-today {
|
||||
background: #fff4c3;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div.fc-out {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div:last-child,
|
||||
.fc-calendar .fc-head > div:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Custom Events Calendar
|
||||
-----------------------------------------------------------------*/
|
||||
|
||||
.events-calendar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.fc-calendar-container {
|
||||
height: auto;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.events-calendar-header {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.events-calendar-header h2,
|
||||
.events-calendar-header h3 {
|
||||
float: left;
|
||||
text-shadow: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.events-calendar-header h2 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.events-calendar-header h2 a,
|
||||
.events-calendar-header h2 span {
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.events-calendar-header h3 {
|
||||
width: 40%;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
text-align: right;
|
||||
padding-top: 7px;
|
||||
padding-right: 130px;
|
||||
}
|
||||
|
||||
.events-calendar-header h3 span { color: #666; }
|
||||
|
||||
.events-calendar-header nav {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 5px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.events-calendar-header nav span {
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
background: #444;
|
||||
margin: 0 1px;
|
||||
font-size: 14px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.events-calendar-header nav span:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.events-calendar-header nav span:hover {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.events-calendar-header span i {
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.events-calendar-header nav span:last-child {
|
||||
margin-left: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.fc-calendar {
|
||||
background: #F5F5F5;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-head {
|
||||
background: #444;
|
||||
color: rgba(255,255,255,0.9);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
|
||||
border-radius: 5px 5px 0 0;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-head > div {
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div > span.fc-date {
|
||||
position: absolute;
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
top: 10px;
|
||||
left: 8px;
|
||||
text-align: left;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-body {
|
||||
border: none;
|
||||
height: 568px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row {
|
||||
box-shadow: inset 0 -1px 0 #E5E5E5;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row:last-child {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row:first-child > div:first-child {
|
||||
border-radius: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row:first-child > div:last-child {
|
||||
border-radius: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row:last-child > div:first-child {
|
||||
border-radius: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row:last-child > div:last-child {
|
||||
border-radius: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div {
|
||||
box-shadow: -1px 0 0 #E5E5E5;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div:first-child{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div.fc-today {
|
||||
background: #1E73BE;
|
||||
box-shadow: inset 0 0 100px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div.fc-today > span.fc-date {
|
||||
color: #FFF;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div.fc-today:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.2;
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .15)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
|
||||
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
|
||||
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -o-llinear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
|
||||
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -ms-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
|
||||
background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div > div {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div > div a,
|
||||
.fc-calendar .fc-row > div > div span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #FFF;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
margin-bottom: 1px;
|
||||
background: #1E73BE;
|
||||
-webkit-transition: background-color .3s ease-in-out;
|
||||
-moz-transition: background-color .3s ease-in-out;
|
||||
-ms-transition: background-color .3s ease-in-out;
|
||||
-o-transition: background-color .3s ease-in-out;
|
||||
transition: background-color .3s ease-in-out;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div > div a:hover { background: #444 !important; }
|
||||
|
||||
.fc-calendar .fc-row > div.fc-today > div a,
|
||||
.fc-calendar .fc-row > div.fc-today > div span {
|
||||
color: #FFF;
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.dark .events-calendar-header h2,
|
||||
.dark .events-calendar-header h3 {
|
||||
text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dark .events-calendar-header h2 { color: #FFF; }
|
||||
|
||||
.dark .events-calendar-header h2 a,
|
||||
.dark .events-calendar-header h2 span { color: rgba(255,255,255,0.3); }
|
||||
|
||||
.dark .events-calendar-header h2 a { color: rgba(255,255,255,0.5); }
|
||||
|
||||
.dark .events-calendar-header h2 a:hover { color: rgba(255,255,255,0.9); }
|
||||
|
||||
.dark .events-calendar-header h3 {
|
||||
color: #CCC;
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.dark .events-calendar-header h3 span { color: #CCC; }
|
||||
|
||||
.dark .events-calendar-header nav span {
|
||||
background: rgba(255,255,255,0.3);
|
||||
box-shadow: inset 0 1px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.dark .events-calendar-header nav span:hover { background: rgba(255,255,255,0.5); }
|
||||
|
||||
.dark .events-calendar-header span i { color: #FFF; }
|
||||
|
||||
.dark .fc-calendar { background: rgba(255,255,255,0.1); }
|
||||
|
||||
.dark .fc-calendar .fc-head {
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: rgba(255,255,255,0.9);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.dark .fc-calendar .fc-head > div { text-shadow: 0 1px 1px rgba(0,0,0,0.4); }
|
||||
|
||||
.dark .fc-calendar .fc-row > div > span.fc-date {
|
||||
color: rgba(255,255,255,0.9);
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.dark .fc-calendar .fc-row { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.10); }
|
||||
|
||||
.dark .fc-calendar .fc-row > div { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.10); }
|
||||
|
||||
.dark .fc-calendar .fc-row > div.fc-today {
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 100px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.dark .fc-calendar .fc-row > div > div a,
|
||||
.dark .fc-calendar .fc-row > div > div span {
|
||||
color: rgba(255,255,255,0.7);
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.dark .fc-calendar .fc-row > div > div a:hover { background: rgba(255,255,255,0.3) !important; }
|
||||
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
|
||||
.events-calendar-header,
|
||||
.events-calendar-header nav,
|
||||
.events-calendar,
|
||||
.fc-calendar-container,
|
||||
.fc-calendar,
|
||||
.fc-calendar .fc-head,
|
||||
.fc-calendar .fc-row > div > span.fc-date {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-body { height: auto; }
|
||||
|
||||
.fc-calendar { margin: 20px 0; }
|
||||
|
||||
.events-calendar-header h2,
|
||||
.events-calendar-header h3 {
|
||||
float: none;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row,
|
||||
.ie9 .fc-calendar .fc-row > div,
|
||||
.fc-calendar .fc-row > div {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div {
|
||||
float: none;
|
||||
min-height: 50px;
|
||||
box-shadow: inset 0 -1px #E5E5E5 !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div:first-child { box-shadow: inset 0 -1px #E5E5E5 !important; }
|
||||
|
||||
.fc-calendar .fc-row > div:empty{
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
box-shadow: none !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div > div {
|
||||
margin-top: 0px;
|
||||
padding-left: 10px;
|
||||
max-width: 68%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div.fc-today {
|
||||
background: #1E73BE;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div.fc-today:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div > span.fc-date {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.fc-calendar .fc-row > div > span.fc-weekday {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.dark .fc-calendar .fc-row > div { box-shadow: inset 0 -1px rgba(255,255,255,0.2) !important; }
|
||||
|
||||
.dark .fc-calendar .fc-row > div.fc-today { background: rgba(255, 255, 255, 0.2); }
|
||||
|
||||
.dark .fc-calendar .fc-row > div > span.fc-weekday,
|
||||
.fc-calendar .fc-row > div.fc-today > span.fc-weekday {
|
||||
color: #fff;
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
|||
/*!
|
||||
* bootstrap-star-rating v4.1.0
|
||||
* http://plugins.krajee.com/star-rating
|
||||
*
|
||||
* Author: Kartik Visweswaran
|
||||
* Copyright: 2013 - 2021, Kartik Visweswaran, Krajee.com
|
||||
*
|
||||
* Licensed under the BSD 3-Clause
|
||||
* https://github.com/kartik-v/bootstrap-star-rating/blob/master/LICENSE.md
|
||||
*/
|
||||
.rating-loading{width:25px;height:25px;font-size:0;color:#fff;background:top left no-repeat;border:none}.rating-container .rating-stars{position:relative;cursor:pointer;vertical-align:middle;display:inline-block;overflow:hidden;white-space:nowrap}.rating-container .rating-stars:focus{outline:dotted 1px}.rating-input{display:absolute;cursor:pointer;width:100%;height:1px;bottom:0;left:0;font-size:1px;border:none;background:0 0;opacity:0;padding:0;margin:0}.caption-badge,.rating-container .caption .label{line-height:1;text-align:center;border-radius:.25rem}.rating-container.is-display-only .rating-stars{cursor:default}.rating-disabled .rating-stars{cursor:not-allowed}.rating-container .star{display:inline-block;margin:0 2px;text-align:center}.rating-container .empty-stars{color:#aaa}.rating-container .filled-stars{position:absolute;left:0;top:0;margin:auto;color:#fde16d;white-space:nowrap;overflow:hidden;-webkit-text-stroke:1px #777;text-shadow:1px 1px #999}.rating-rtl{float:right}.rating-animate .filled-stars{transition:width .25s ease}.rating-rtl .filled-stars{left:auto;right:0;transition:none;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.rating-rtl.is-star .filled-stars{right:.06em}.rating-rtl.is-heart .empty-stars{margin-right:.07em}.rating-container .clear-rating{color:#aaa;cursor:not-allowed;display:inline-block;vertical-align:middle;font-size:60%;padding-right:5px}.clear-rating-active{cursor:pointer!important}.clear-rating-active:hover{color:#843534}.rating-container .caption .label{display:inline-block;padding:.25em .4em;vertical-align:baseline}.rating-container .caption{color:#999;display:inline-block;vertical-align:middle;line-height:1;margin-left:5px;margin-right:0}.rating-rtl .caption{margin-right:5px;margin-left:0}@media print{.rating-container .clear-rating{display:none}}.rating-xl{font-size:48px}.rating-lg{font-size:40px}.rating-md{font-size:32px}.rating-sm{font-size:24px}.rating-xs{font-size:16px}.rating-xl .caption{font-size:20px}.rating-lg .caption{font-size:18px}.rating-md .caption{font-size:16px}.rating-sm .caption{font-size:14px}.rating-xs .caption{font-size:12px}.caption-badge{font-family:Arial,Helvetica,sans-serif;display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;color:#fff;white-space:nowrap;vertical-align:baseline}.caption-secondary{background-color:#6c757d}.caption-danger{background-color:#dc3545}.caption-warning{background-color:#ffc107;color:#212529}.caption-info{background-color:#0dcaf0;color:#212529}.caption-primary{background-color:#0d6efd}.caption-success{background-color:#198754}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,520 @@
|
|||
/* ========================================================================
|
||||
* bootstrap-switch - v3.3.2
|
||||
* ====================================================================== */
|
||||
|
||||
.bootstrap-switch {
|
||||
display: inline-block;
|
||||
direction: ltr;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
border: 1px solid;
|
||||
border-color: #CCC;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
line-height: 8px;
|
||||
z-index: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-container {
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
border-radius: 2px;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch .bootstrap-switch-label {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: inline-block !important;
|
||||
height: 100%;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off {
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bootstrap-switch .bootstrap-switch-handle-on i,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off i {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
left: -1px;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
|
||||
color: #fff;
|
||||
background: #337ab7;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
|
||||
color: #fff;
|
||||
background: #5bc0de;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
|
||||
color: #fff;
|
||||
background: #5cb85c;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
|
||||
background: #f0ad4e;
|
||||
color: #fff;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
|
||||
color: #fff;
|
||||
background: #d9534f;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
|
||||
color: #000;
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-themecolor,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-themecolor {
|
||||
color: #FFF;
|
||||
background: #1ABC9C;
|
||||
background: var(--themecolor);
|
||||
}
|
||||
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-black,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-black {
|
||||
color: #FFF;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-white,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-white {
|
||||
color: #000;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.bootstrap-switch .bootstrap-switch-label {
|
||||
text-align: center;
|
||||
margin-top: -1px;
|
||||
margin-bottom: -1px;
|
||||
z-index: 100;
|
||||
color: #333333;
|
||||
background: #ffffff;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on {
|
||||
border-bottom-left-radius: 1px;
|
||||
border-top-left-radius: 1px;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-off {
|
||||
border-bottom-right-radius: 1px;
|
||||
border-top-right-radius: 1px;
|
||||
}
|
||||
.bootstrap-switch input[type='radio'],
|
||||
.bootstrap-switch input[type='checkbox'] {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
|
||||
padding: 1px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
|
||||
padding: 6px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-disabled,
|
||||
.bootstrap-switch.bootstrap-switch-readonly,
|
||||
.bootstrap-switch.bootstrap-switch-indeterminate { cursor: default !important; }
|
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
|
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
|
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: default !important;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
|
||||
-webkit-transition: margin-left 0.2s ease;
|
||||
-o-transition: margin-left 0.2s ease;
|
||||
transition: margin-left 0.2s ease;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: 1px;
|
||||
border-top-right-radius: 1px;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 1px;
|
||||
border-top-left-radius: 1px;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-focused {
|
||||
outline: 0;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
|
||||
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
|
||||
border-bottom-right-radius: 1px;
|
||||
border-top-right-radius: 1px;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
|
||||
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
|
||||
border-bottom-left-radius: 1px;
|
||||
border-top-left-radius: 1px;
|
||||
}
|
||||
|
||||
.bootstrap-switch-label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 10px;
|
||||
height: 3px;
|
||||
margin-top: -2px;
|
||||
margin-left: -5px;
|
||||
display: inline-block;
|
||||
border-top: 1px solid #DDD;
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------------------
|
||||
SWITCH
|
||||
-------------------------------------------------------------- */
|
||||
.switch-toggle {
|
||||
position: absolute;
|
||||
margin-left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.switch-toggle + label {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------
|
||||
SWITCH 1 - ROUND
|
||||
----------------------------------------------------------------- */
|
||||
input.switch-toggle-round + label {
|
||||
padding: 2px;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background-color: #DDD;
|
||||
-webkit-border-radius: 15px;
|
||||
-o-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
input.switch-toggle-round + label:before,
|
||||
input.switch-toggle-round + label:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
bottom: 1px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
input.switch-toggle-round + label:before {
|
||||
right: 1px;
|
||||
background-color: #F1F1F1;
|
||||
-webkit-border-radius: 15px;
|
||||
-o-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
-webkit-transition: background 0.4s;
|
||||
-moz-transition: background 0.4s;
|
||||
-o-transition: background 0.4s;
|
||||
transition: background 0.4s;
|
||||
}
|
||||
|
||||
input.switch-toggle-round + label:after {
|
||||
width: 28px;
|
||||
background-color: #FFF;
|
||||
-webkit-border-radius: 100%;
|
||||
-o-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
-webkit-transition: margin 0.4s;
|
||||
-moz-transition: margin 0.4s;
|
||||
-o-transition: margin 0.4s;
|
||||
transition: margin 0.4s;
|
||||
}
|
||||
|
||||
input.switch-toggle-round:checked + label:before {
|
||||
background-color: #1ABC9C;
|
||||
background-color: var(--themecolor);
|
||||
}
|
||||
input.switch-toggle-round:checked + label:after { margin-left: 30px; }
|
||||
|
||||
/* --------------------------------------------------------------
|
||||
SWITCH 1 - ROUND- MINI
|
||||
----------------------------------------------------------------- */
|
||||
input.switch-rounded-mini.switch-toggle-round + label {
|
||||
padding: 1px;
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
-webkit-border-radius: 8px;
|
||||
-o-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
input.switch-rounded-mini.switch-toggle-round + label:before {
|
||||
-webkit-border-radius: 8px;
|
||||
-o-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
input.switch-rounded-mini.switch-toggle-round + label:after { width: 15px; }
|
||||
input.switch-rounded-mini.switch-toggle-round:checked + label:after { margin-left: 15px; }
|
||||
|
||||
/* --------------------------------------------------------------
|
||||
SWITCH 1 - ROUND- LARGE
|
||||
----------------------------------------------------------------- */
|
||||
input.switch-rounded-large.switch-toggle-round + label {
|
||||
width: 90px;
|
||||
height: 45px;
|
||||
-webkit-border-radius: 45px;
|
||||
-o-border-radius: 45px;
|
||||
border-radius: 45px;
|
||||
}
|
||||
|
||||
input.switch-rounded-large.switch-toggle-round + label:before {
|
||||
-webkit-border-radius: 45px;
|
||||
-o-border-radius: 45px;
|
||||
border-radius: 45px;
|
||||
}
|
||||
|
||||
input.switch-rounded-large.switch-toggle-round + label:after { width: 43px; }
|
||||
input.switch-rounded-large.switch-toggle-round:checked + label:after { margin-left: 45px; }
|
||||
|
||||
|
||||
/* --------------------------------------------------------------
|
||||
SWITCH 1 - ROUND- XLARGE
|
||||
----------------------------------------------------------------- */
|
||||
input.switch-rounded-xlarge.switch-toggle-round + label {
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
-webkit-border-radius: 60px;
|
||||
-o-border-radius: 60px;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
input.switch-rounded-xlarge.switch-toggle-round + label:before {
|
||||
-webkit-border-radius: 60px;
|
||||
-o-border-radius: 60px;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
input.switch-rounded-xlarge.switch-toggle-round + label:after { width: 58px; }
|
||||
input.switch-rounded-xlarge.switch-toggle-round:checked + label:after { margin-left: 60px; }
|
||||
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
SWITCH 2 - ROUND FLAT
|
||||
-------------------------------------------------------------- */
|
||||
input.switch-toggle-flat + label {
|
||||
padding: 2px;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background-color: #DDD;
|
||||
-webkit-border-radius: 30px;
|
||||
-moz-border-radius: 30px;
|
||||
-ms-border-radius: 30px;
|
||||
-o-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
-webkit-transition: background 0.4s;
|
||||
-moz-transition: background 0.4s;
|
||||
-o-transition: background 0.4s;
|
||||
transition: background 0.4s;
|
||||
}
|
||||
|
||||
input.switch-toggle-flat + label:before,
|
||||
input.switch-toggle-flat + label:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
input.switch-toggle-flat + label:before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
background-color: #FFF;
|
||||
-webkit-border-radius: 30px;
|
||||
-moz-border-radius: 30px;
|
||||
-ms-border-radius: 30px;
|
||||
-o-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
-webkit-transition: background 0.4s;
|
||||
-moz-transition: background 0.4s;
|
||||
-o-transition: background 0.4s;
|
||||
transition: background 0.4s;
|
||||
}
|
||||
|
||||
input.switch-toggle-flat + label:after {
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
width: 22px;
|
||||
background-color: #DDD;
|
||||
-webkit-border-radius: 22px;
|
||||
-moz-border-radius: 22px;
|
||||
-ms-border-radius: 22px;
|
||||
-o-border-radius: 22px;
|
||||
border-radius: 22px;
|
||||
-webkit-transition: margin 0.4s, background 0.4s;
|
||||
-moz-transition: margin 0.4s, background 0.4s;
|
||||
-o-transition: margin 0.4s, background 0.4s;
|
||||
transition: margin 0.4s, background 0.4s;
|
||||
}
|
||||
|
||||
input.switch-toggle-flat:checked + label {
|
||||
background-color: #1ABC9C;
|
||||
background-color: var(--themecolor);
|
||||
}
|
||||
|
||||
input.switch-toggle-flat:checked + label:after {
|
||||
margin-left: 30px;
|
||||
background-color: #1ABC9C;
|
||||
background-color: var(--themecolor);
|
||||
}
|
||||
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
SWITCH 2 - FLAT - MINI
|
||||
-------------------------------------------------------------- */
|
||||
input.switch-flat-mini.switch-toggle-flat + label {
|
||||
padding: 1px;
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
-webkit-border-radius: 16px;
|
||||
-o-border-radius: 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
input.switch-flat-mini.switch-toggle-flat + label:before {
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
bottom: 1px;
|
||||
right: 1px;
|
||||
-webkit-border-radius: 16px;
|
||||
-o-border-radius: 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
input.switch-flat-mini.switch-toggle-flat + label:after {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
width: 12px;
|
||||
-webkit-border-radius: 12px;
|
||||
-o-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
input.switch-flat-mini.switch-toggle-flat:checked + label:after { margin-left: 16px; }
|
||||
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
SWITCH 2 - FLAT - LARGE
|
||||
-------------------------------------------------------------- */
|
||||
input.switch-flat-large.switch-toggle-flat + label {
|
||||
width: 90px;
|
||||
height: 45px;
|
||||
-webkit-border-radius: 45px;
|
||||
-o-border-radius: 45px;
|
||||
border-radius: 45px;
|
||||
}
|
||||
|
||||
input.switch-flat-large.switch-toggle-flat + label:before {
|
||||
-webkit-border-radius: 45px;
|
||||
-o-border-radius: 45px;
|
||||
border-radius: 45px;
|
||||
}
|
||||
|
||||
input.switch-flat-large.switch-toggle-flat + label:after {
|
||||
width: 37px;
|
||||
-webkit-border-radius: 37px;
|
||||
-o-border-radius: 37px;
|
||||
border-radius: 37px;
|
||||
}
|
||||
|
||||
input.switch-flat-large.switch-toggle-flat:checked + label:after { margin-left: 45px; }
|
||||
|
||||
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
SWITCH 2 - FLAT - XLARGE
|
||||
-------------------------------------------------------------- */
|
||||
input.switch-flat-xlarge.switch-toggle-flat + label {
|
||||
padding: 2px;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
-webkit-border-radius: 60px;
|
||||
-o-border-radius: 60px;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
input.switch-flat-xlarge.switch-toggle-flat + label:before {
|
||||
-webkit-border-radius: 60px;
|
||||
-o-border-radius: 60px;
|
||||
border-radius: 60px;
|
||||
}
|
||||
input.switch-flat-xlarge.switch-toggle-flat + label:after {
|
||||
width: 52px;
|
||||
-webkit-border-radius: 52px;
|
||||
-o-border-radius: 52px;
|
||||
border-radius: 52px;
|
||||
}
|
||||
|
||||
input.switch-flat-xlarge.switch-toggle-flat:checked + label:after { margin-left: 60px; }
|
||||
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
/**
|
||||
* bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
|
||||
*
|
||||
* @version v3.4 for Bootstrap 4.x
|
||||
* @homepage https://bttstrp.github.io/bootstrap-switch
|
||||
* @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
|
||||
* & djibe
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
.bootstrap-switch {
|
||||
display: inline-block;
|
||||
direction: ltr;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
line-height: 8px;
|
||||
z-index: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-container {
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
border-radius: 4px;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch .bootstrap-switch-label {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off {
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
|
||||
background: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
|
||||
background: #eee;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
|
||||
background: #6c757d;
|
||||
color: #fff;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
|
||||
background: #17a2b8;
|
||||
color: #fff;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
|
||||
background: #28a745;
|
||||
color: #fff;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
|
||||
background: #ffc107;
|
||||
color: #fff;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
|
||||
background: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-themecolor,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-themecolor {
|
||||
color: #FFF;
|
||||
background: var(--cnvs-themecolor);
|
||||
border-color: transparent !important;
|
||||
outline: 0 !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-label {
|
||||
text-align: center;
|
||||
margin-top: -1px;
|
||||
margin-bottom: -1px;
|
||||
z-index: 100;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.bootstrap-switch span::before {
|
||||
content: "\200b";
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-off {
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
.bootstrap-switch input[type='radio'],
|
||||
.bootstrap-switch input[type='checkbox'] {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
visibility: hidden;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
|
||||
padding: 1px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
|
||||
padding: 6px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-disabled, .bootstrap-switch.bootstrap-switch-readonly, .bootstrap-switch.bootstrap-switch-indeterminate {
|
||||
cursor: default !important;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: default !important;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
|
||||
-webkit-transition: margin-left 0.5s;
|
||||
transition: margin-left 0.5s;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-focused {
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
|
|
@ -0,0 +1,341 @@
|
|||
|
||||
/* ========================================================================
|
||||
Dark - timepicker.css
|
||||
======================================================================== */
|
||||
.dark .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before { border-bottom: 7px solid #444; }
|
||||
.dark .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-bottom-color: #222; }
|
||||
.dark .bootstrap-datetimepicker-widget.dropdown-menu.top:before { border-top-color: #DDD; }
|
||||
.dark .bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-top-color: #222; }
|
||||
.dark .bootstrap-datetimepicker-widget table th.disabled,
|
||||
.dark .bootstrap-datetimepicker-widget table th.disabled:hover { color: #AAA; }
|
||||
.dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: #444; }
|
||||
.dark .bootstrap-datetimepicker-widget table td.cw { color: #AAA; }
|
||||
.dark .bootstrap-datetimepicker-widget table td.day:hover,
|
||||
.dark .bootstrap-datetimepicker-widget table td.hour:hover,
|
||||
.dark .bootstrap-datetimepicker-widget table td.minute:hover,
|
||||
.dark .bootstrap-datetimepicker-widget table td.second:hover { background: #444; }
|
||||
.dark .bootstrap-datetimepicker-widget table td.old,
|
||||
.dark .bootstrap-datetimepicker-widget table td.new { color: #AAA; }
|
||||
.dark .bootstrap-datetimepicker-widget table td.active,
|
||||
.dark .bootstrap-datetimepicker-widget table td.active:hover { color: #222; }
|
||||
.dark .bootstrap-datetimepicker-widget table td.active.today:before { border-bottom-color: #222; }
|
||||
.dark .bootstrap-datetimepicker-widget table td.disabled,
|
||||
.dark .bootstrap-datetimepicker-widget table td.disabled:hover { color: #AAA; }
|
||||
.dark .bootstrap-datetimepicker-widget table td span:hover { background: #444; }
|
||||
.dark .bootstrap-datetimepicker-widget table td span.active { color: #222; }
|
||||
.dark .bootstrap-datetimepicker-widget table td span.old { color: #AAA; }
|
||||
.dark .bootstrap-datetimepicker-widget table td span.disabled,
|
||||
.dark .bootstrap-datetimepicker-widget table td span.disabled:hover { color: #AAA; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
select-boxes.css
|
||||
======================================================================== */
|
||||
.dark .select2-dropdown {
|
||||
background-color: #333;
|
||||
border-color: #555;
|
||||
}
|
||||
.dark .select2-close-mask { background-color: #333; }
|
||||
|
||||
.dark .select2-container--default .select2-selection--single {
|
||||
background-color: #333;
|
||||
border-color: #555;
|
||||
}
|
||||
.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #EEE; }
|
||||
.dark .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; }
|
||||
|
||||
.dark .select2-container--default .select2-selection--multiple {
|
||||
background-color: #333;
|
||||
border-color: #555;
|
||||
}
|
||||
.dark .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #999; }
|
||||
.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
|
||||
background-color: #444;
|
||||
border-color: #555;
|
||||
}
|
||||
.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; }
|
||||
.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #EEE; }
|
||||
|
||||
.dark .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #444; }
|
||||
|
||||
.dark .select2-container--default .select2-search--dropdown .select2-search__field {
|
||||
border-color: #555;
|
||||
background-color: #555;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.dark .select2-container--default .select2-results__option[aria-disabled=true] { color: #999; }
|
||||
|
||||
.dark .select2-container--default .select2-results__option[aria-selected=true] { background-color: #444; }
|
||||
|
||||
.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #5897fb;
|
||||
color: #EEE; }
|
||||
|
||||
.dark .select2-container--classic .select2-selection--single {
|
||||
background-color: #444;
|
||||
border-color: #555;
|
||||
background-image: -webkit-linear-gradient(top, white 50%, #444 100%);
|
||||
background-image: -o-linear-gradient(top, white 50%, #444 100%);
|
||||
background-image: linear-gradient(to bottom, white 50%, #444 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44444444', endColorstr='#44EEEEEE', GradientType=0);
|
||||
}
|
||||
.dark .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; }
|
||||
.dark .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; }
|
||||
.dark .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; }
|
||||
.dark .select2-container--classic .select2-selection--single .select2-selection__arrow {
|
||||
background-color: #444;
|
||||
border-left-color: #555;
|
||||
background-image: -webkit-linear-gradient(top, #444 50%, #444 100%);
|
||||
background-image: -o-linear-gradient(top, #444 50%, #444 100%);
|
||||
background-image: linear-gradient(to bottom, #444 50%, #444 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44EEEEEE', endColorstr='#44CCCCCC', GradientType=0);
|
||||
}
|
||||
|
||||
.dark .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border-right-color: #555; }
|
||||
|
||||
.dark .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
|
||||
background-image: -webkit-linear-gradient(top, white 0%, #444 50%);
|
||||
background-image: -o-linear-gradient(top, white 0%, #444 50%);
|
||||
background-image: linear-gradient(to bottom, white 0%, #444 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44444444', endColorstr='#44EEEEEE', GradientType=0);
|
||||
}
|
||||
|
||||
.dark .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
|
||||
background-image: -webkit-linear-gradient(top, #444 50%, white 100%);
|
||||
background-image: -o-linear-gradient(top, #444 50%, white 100%);
|
||||
background-image: linear-gradient(to bottom, #444 50%, white 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44EEEEEE', endColorstr='#444', GradientType=0);
|
||||
}
|
||||
|
||||
.dark .select2-container--classic .select2-selection--multiple {
|
||||
background-color: #333;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.dark .select2-container--classic .select2-selection--multiple:focus { border-color: #5897fb; }
|
||||
.dark .select2-container--classic .select2-selection--multiple .select2-selection__choice {
|
||||
background-color: #444;
|
||||
border-color: #555;
|
||||
}
|
||||
.dark .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #EEE; }
|
||||
|
||||
.dark .select2-container--classic .select2-search--dropdown .select2-search__field { border-color: #555; }
|
||||
|
||||
.dark .select2-container--classic .select2-dropdown { background-color: #333;}
|
||||
|
||||
.dark .select2-container--classic .select2-results__option[aria-disabled=true] { color: #444; }
|
||||
|
||||
.dark .select2-container--classic .select2-results__option--highlighted[aria-selected] { color: #333; }
|
||||
|
||||
.dark .select2-container--default.select2-container--disabled .select2-selection--single { background-color: rgba(255,255,255,0.1); }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
radio-checkbox.css
|
||||
======================================================================== */
|
||||
|
||||
.dark .checkbox-style-1-label:before,
|
||||
.dark .radio-style-1-label:before,
|
||||
.dark .checkbox-style-2-label:before,
|
||||
.dark .radio-style-2-label:before,
|
||||
.dark .checkbox-style-3-label:before,
|
||||
.dark .radio-style-3-label:before {
|
||||
background: #333;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.dark .radio-style:checked + .radio-style-1-label:before { background: #CCC; }
|
||||
|
||||
/* Checkbox-small + Radio-small */
|
||||
.dark .checkbox-style-1-label.checkbox-small:before,
|
||||
.dark .radio-style-1-label.radio-small:before,
|
||||
.dark .checkbox-style-2-label.checkbox-small:before,
|
||||
.dark .radio-style-2-label.radio-small:before,
|
||||
.dark .checkbox-style-3-label.checkbox-small:before,
|
||||
.dark .radio-style-3-label.radio-small:before { border-color: #444; }
|
||||
|
||||
/* Style-2 */
|
||||
.dark .checkbox-style:checked + .checkbox-style-2-label:before { box-shadow: inset 0px 0px 0px 4px #000; }
|
||||
|
||||
.dark .radio-style:checked + .radio-style-2-label:before {
|
||||
background: #CCC;
|
||||
box-shadow: inset 0px 0px 0px 4px #333;
|
||||
}
|
||||
|
||||
.dark .checkbox-style:checked + .checkbox-style-2-label.checkbox-small:before { box-shadow: inset 0px 0px 0px 2px #000; }
|
||||
.dark .radio-style:checked + .radio-style-2-label.radio-small:before { box-shadow: inset 0px 0px 0px 2px #000; }
|
||||
|
||||
/* style-3 */
|
||||
.dark .checkbox-style:checked + .checkbox-style-3-label:before,
|
||||
.dark .radio-style:checked + .radio-style-3-label:before { color: #222; }
|
||||
.dark .radio-style:checked + .radio-style-3-label:before {
|
||||
color: #CCC;
|
||||
border-color: #CCC;
|
||||
}
|
||||
|
||||
/* style-3 - Small */
|
||||
.dark .checkbox-style + .checkbox-style-3-label.checkbox-small:before,
|
||||
.dark .radio-style + .radio-style-3-label.radio-small:before { border-color: #555; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
ion.rangeslider.css
|
||||
======================================================================== */
|
||||
.dark .irs-bar-edge,
|
||||
.dark .irs-line-mid,
|
||||
.dark .irs-line-left,
|
||||
.dark .irs-line-right { background-color: #444; }
|
||||
|
||||
|
||||
|
||||
|
||||
/*========================================================================
|
||||
daterangepicker.css
|
||||
======================================================================== */
|
||||
.dark .daterangepicker { background: #222; }
|
||||
|
||||
.dark .daterangepicker.opensleft:before {
|
||||
border-bottom-color: #444;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dark .daterangepicker.opensleft:after {
|
||||
border-bottom-color: #555;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.dark .daterangepicker.openscenter:before {
|
||||
border-bottom-color: #444;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark .daterangepicker.openscenter:after {
|
||||
border-bottom-color: #222;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.dark .daterangepicker.opensright:before {
|
||||
border-bottom-color: #444;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark .daterangepicker.opensright:after {
|
||||
border-bottom-color: #222;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.dark .daterangepicker.dropup:before{ border-top-color: #444; }
|
||||
|
||||
.dark .daterangepicker.dropup:after{ border-top-color: #222; }
|
||||
|
||||
.dark .daterangepicker .calendar-table {
|
||||
border-color: #444;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.dark .daterangepicker td.off, .dark .daterangepicker td.off.in-range, .dark .daterangepicker td.off.start-date, .dark .daterangepicker td.off.end-date {
|
||||
color: #999;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.dark .daterangepicker td.disabled, .dark .daterangepicker option.disabled { color: #999; }
|
||||
|
||||
.dark .daterangepicker td.available:hover, .dark .daterangepicker th.available:hover { background: #555; }
|
||||
|
||||
.dark .daterangepicker td.in-range {
|
||||
background: #444;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.dark .daterangepicker td.active, .dark .daterangepicker td.active:hover {
|
||||
background-color: #357ebd;
|
||||
border-color: #3071a9;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.dark .daterangepicker td.week, .dark .daterangepicker th.week { color: #444; }
|
||||
|
||||
.dark .reportrange { border-color: #444 !important; }
|
||||
|
||||
/* Text Input Above Each Calendar */
|
||||
.dark .daterangepicker .input-mini {
|
||||
border-color: #444;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.dark .daterangepicker .input-mini.active { border-color: #357ebd; }
|
||||
|
||||
.dark .daterangepicker .calendar-time select.disabled { color: #444; }
|
||||
|
||||
.daterangepicker .daterangepicker_input i { color: #333; }
|
||||
|
||||
/* Predefined Ranges */
|
||||
.dark .daterangepicker .ranges li {
|
||||
background: #333;
|
||||
border-color: #333;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.dark .daterangepicker .ranges li.active, .dark .daterangepicker .ranges li:hover {
|
||||
background: #08c;
|
||||
border-color: #08c;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.dark .input-daterange .input-group-addon {
|
||||
background-color: #222;
|
||||
border-color: #111;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
* bs-switches.css
|
||||
* ====================================================================== */
|
||||
|
||||
.dark .bootstrap-switch { border-color: #444; }
|
||||
|
||||
.dark .bootstrap-switch .bootstrap-switch-label {
|
||||
color: #EEE;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.dark .bootstrap-switch-label:after {
|
||||
border-top-color: #444;
|
||||
border-bottom-color: #444;
|
||||
}
|
||||
|
||||
/* Switches
|
||||
-------------------------------------------------------------- */
|
||||
.dark input.switch-toggle-round + label { background-color: #444; }
|
||||
|
||||
.dark input.switch-toggle-round + label:before,
|
||||
.dark input.switch-toggle-flat + label:before { background-color: #222; }
|
||||
|
||||
.dark input.switch-toggle-flat + label,
|
||||
.dark input.switch-toggle-flat + label:after { background-color: #AAA; }
|
||||
|
||||
.dark input.switch-toggle-round + label:after {
|
||||
background-color: #AAA;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
|
||||
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,410 @@
|
|||
.daterangepicker {
|
||||
position: absolute;
|
||||
color: inherit;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
width: 278px;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
margin-top: 7px;
|
||||
top: 100px;
|
||||
left: 20px;
|
||||
z-index: 3001;
|
||||
display: none;
|
||||
font-family: arial;
|
||||
font-size: 15px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.daterangepicker:before, .daterangepicker:after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.daterangepicker:before {
|
||||
top: -7px;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom: 7px solid #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker:after {
|
||||
top: -6px;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #fff;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
|
||||
.daterangepicker.opensleft:before {
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.daterangepicker.opensleft:after {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.daterangepicker.openscenter:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.daterangepicker.openscenter:after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.daterangepicker.opensright:before {
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.daterangepicker.opensright:after {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up:before {
|
||||
top: initial;
|
||||
bottom: -7px;
|
||||
border-bottom: initial;
|
||||
border-top: 7px solid #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up:after {
|
||||
top: initial;
|
||||
bottom: -6px;
|
||||
border-bottom: initial;
|
||||
border-top: 6px solid #fff;
|
||||
}
|
||||
|
||||
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.daterangepicker.single .drp-selected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .drp-calendar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .drp-buttons {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.daterangepicker.auto-apply .drp-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar {
|
||||
display: none;
|
||||
max-width: 270px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
padding: 8px 0 8px 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.single .calendar-table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
|
||||
color: #fff;
|
||||
border: solid black;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .next span {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .prev span {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table {
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
|
||||
background-color: #eee;
|
||||
border-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.daterangepicker td.week, .daterangepicker th.week {
|
||||
font-size: 80%;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.daterangepicker td.in-range {
|
||||
background-color: #ebf4f8;
|
||||
border-color: transparent;
|
||||
color: #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker td.start-date {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.daterangepicker td.end-date {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.daterangepicker td.start-date.end-date {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.daterangepicker td.active, .daterangepicker td.active:hover {
|
||||
background-color: #357ebd;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.daterangepicker th.month {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker td.disabled, .daterangepicker option.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
|
||||
font-size: 12px;
|
||||
padding: 1px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.daterangepicker select.monthselect {
|
||||
margin-right: 2%;
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
.daterangepicker select.yearselect {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
background: #eee;
|
||||
border: 1px solid #eee;
|
||||
padding: 2px;
|
||||
outline: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-time {
|
||||
text-align: center;
|
||||
margin: 4px auto 0 auto;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-time select.disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-buttons {
|
||||
clear: both;
|
||||
text-align: right;
|
||||
padding: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
display: none;
|
||||
line-height: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-selected {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-buttons .btn {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.rtl .drp-calendar.right {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.ltr .drp-calendar.left {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges {
|
||||
float: none;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .ranges {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges ul {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li {
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li.active {
|
||||
background-color: #08c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Larger Screen Styling */
|
||||
@media (min-width: 564px) {
|
||||
.daterangepicker {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges ul {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.daterangepicker.single .ranges ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.daterangepicker.single .drp-calendar.left {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.daterangepicker {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
clear: left;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left .calendar-table {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right .calendar-table {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left .calendar-table {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges, .daterangepicker .drp-calendar {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 730px) {
|
||||
.daterangepicker .ranges {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.daterangepicker.rtl .ranges {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
clear: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
/* Ion.RangeSlider
|
||||
// css version 2.0.3
|
||||
// © 2013-2014 Denis Ineshin | IonDen.com
|
||||
// ===================================================================================================================*/
|
||||
|
||||
/* =====================================================================================================================
|
||||
// RangeSlider */
|
||||
|
||||
.irs {
|
||||
position: relative; display: block;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.irs-line {
|
||||
position: relative; display: block;
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
}
|
||||
.irs-line-left, .irs-line-mid, .irs-line-right {
|
||||
position: absolute; display: block;
|
||||
top: 0;
|
||||
}
|
||||
.irs-line-left {
|
||||
left: 0; width: 11%;
|
||||
}
|
||||
.irs-line-mid {
|
||||
left: 9%; width: 82%;
|
||||
}
|
||||
.irs-line-right {
|
||||
right: 0; width: 11%;
|
||||
}
|
||||
|
||||
.irs-bar {
|
||||
position: absolute; display: block;
|
||||
left: 0; width: 0;
|
||||
}
|
||||
.irs-bar-edge {
|
||||
position: absolute; display: block;
|
||||
top: 0; left: 0;
|
||||
}
|
||||
|
||||
.irs-shadow {
|
||||
position: absolute; display: none;
|
||||
left: 0; width: 0;
|
||||
}
|
||||
|
||||
.irs-slider {
|
||||
position: absolute; display: block;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
.irs-slider.single {
|
||||
|
||||
}
|
||||
.irs-slider.from {
|
||||
|
||||
}
|
||||
.irs-slider.to {
|
||||
|
||||
}
|
||||
.irs-slider.type_last {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.irs-min {
|
||||
position: absolute; display: block;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
}
|
||||
.irs-max {
|
||||
position: absolute; display: block;
|
||||
right: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.irs-from, .irs-to, .irs-single {
|
||||
position: absolute; display: block;
|
||||
top: 0; left: 0;
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.irs-grid {
|
||||
position: absolute; display: none;
|
||||
bottom: 0; left: 0;
|
||||
width: 100%; height: 20px;
|
||||
}
|
||||
.irs-with-grid .irs-grid {
|
||||
display: block;
|
||||
}
|
||||
.irs-grid-pol {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1px; height: 8px;
|
||||
background: #000;
|
||||
}
|
||||
.irs-grid-pol.small {
|
||||
height: 4px;
|
||||
}
|
||||
.irs-grid-text {
|
||||
position: absolute;
|
||||
bottom: 0; left: 0;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 9px; line-height: 9px;
|
||||
padding: 0 3px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.irs-disable-mask {
|
||||
position: absolute; display: block;
|
||||
top: 0; left: -1%;
|
||||
width: 102%; height: 100%;
|
||||
cursor: default;
|
||||
background: rgba(0,0,0,0.0);
|
||||
z-index: 2;
|
||||
}
|
||||
.lt-ie9 .irs-disable-mask {
|
||||
background: #000;
|
||||
filter: alpha(opacity=0);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.irs-disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
||||
.irs-hidden-input {
|
||||
position: absolute !important;
|
||||
display: block !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
outline: none !important;
|
||||
z-index: -9999 !important;
|
||||
background: none !important;
|
||||
border-style: solid !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
/* Ion.RangeSlider, Nice Skin
|
||||
// css version 2.0.3
|
||||
// © Denis Ineshin, 2014 https://github.com/IonDen
|
||||
// ===================================================================================================================*/
|
||||
|
||||
/* =====================================================================================================================
|
||||
// Skin details */
|
||||
|
||||
.irs-slider {
|
||||
background: url(rangeslider/sprite-skin-nice.png) repeat-x;
|
||||
}
|
||||
|
||||
.irs-bar-edge,
|
||||
.irs-line-mid,
|
||||
.irs-line-left,
|
||||
.irs-line-right {
|
||||
background-color: #EEE;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.irs {
|
||||
height: 40px;
|
||||
}
|
||||
.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
.irs-line {
|
||||
height: 8px; top: 25px;
|
||||
}
|
||||
.irs-line-left {
|
||||
height: 8px;
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
.irs-line-mid {
|
||||
height: 8px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.irs-line-right {
|
||||
height: 8px;
|
||||
background-position: 100% -30px;
|
||||
}
|
||||
|
||||
.irs-bar {
|
||||
height: 8px;
|
||||
top: 25px;
|
||||
background-color: #1ABC9C;
|
||||
background-color: var(--themecolor);
|
||||
border-radius: 100px
|
||||
}
|
||||
.irs-bar-edge {
|
||||
top: 25px;
|
||||
height: 8px;
|
||||
width: 11px;
|
||||
background-position: 0 -90px;
|
||||
}
|
||||
|
||||
.irs-shadow {
|
||||
height: 8px;
|
||||
top: 25px;
|
||||
background: rgba(0,0,0,0.9);
|
||||
opacity: 0.15;
|
||||
}
|
||||
.lt-ie9 .irs-shadow {
|
||||
filter: alpha(opacity=15);
|
||||
}
|
||||
|
||||
.irs-slider {
|
||||
width: 22px; height: 22px;
|
||||
top: 17px;
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
.irs-min, .irs-max {
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
top: -8px;
|
||||
padding: 3px;
|
||||
background: rgba(0,0,0,0.05);
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.irs-from, .irs-to, .irs-single {
|
||||
color: #FFF;
|
||||
top: -8px;
|
||||
font-size: 11px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 3px;
|
||||
background: #1ABC9C;
|
||||
background: var(--themecolor);
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.irs-from:after, .irs-single:after, .irs-to:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #1ABC9C;
|
||||
border-top-color: var(--themecolor);
|
||||
}
|
||||
|
||||
.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single { background: #DDD; }
|
||||
|
||||
.irs-grid-pol { background: #AAA; }
|
||||
.irs-grid-text { color: #AAA }
|
||||
|
||||
.irs-disabled { }
|
||||
|
|
@ -0,0 +1,691 @@
|
|||
@charset "UTF-8";
|
||||
/**
|
||||
Ion.RangeSlider, 2.3.1
|
||||
© Denis Ineshin, 2010 - 2019, IonDen.com
|
||||
Build date: 2019-12-19 16:51:02
|
||||
*/
|
||||
.irs {
|
||||
--cnvs-range-slider-top: 25px;
|
||||
--cnvs-range-slider-bottom: 16px;
|
||||
--cnvs-range-slider-line_height: 12px;
|
||||
--cnvs-range-slider-handle_width: 16px;
|
||||
--cnvs-range-slider-handle_height: 18px;
|
||||
--cnvs-range-slider-custom_radius: 4px;
|
||||
--cnvs-range-slider-line_color: var(--cnvs-contrast-200);
|
||||
--cnvs-range-slider-bar_color: var(--cnvs-themecolor);
|
||||
--cnvs-range-slider-handle_color_1: var(--cnvs-range-slider-bar_color);
|
||||
--cnvs-range-slider-handle_color_2: var(--cnvs-contrast-500);
|
||||
--cnvs-range-slider-minmax_text_color: var(--cnvs-contrast-600);
|
||||
--cnvs-range-slider-minmax_bg_color: var(--cnvs-range-slider-line_color);
|
||||
--cnvs-range-slider-label_color_1: var(--cnvs-range-slider-bar_color);
|
||||
--cnvs-range-slider-label_color_2: white;
|
||||
--cnvs-range-slider-grid_color_1: var(--cnvs-range-slider-line_color);
|
||||
--cnvs-range-slider-grid_color_2: var(--cnvs-range-slider-minmax_text_color);
|
||||
position: relative;
|
||||
display: block;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-size: 12px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.irs-line {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
}
|
||||
.irs-bar {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
width: 0;
|
||||
}
|
||||
.irs-shadow {
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0;
|
||||
width: 0;
|
||||
}
|
||||
.irs-handle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
z-index: 1;
|
||||
}
|
||||
.irs-handle.type_last {
|
||||
z-index: 2;
|
||||
}
|
||||
.irs-min, .irs-max {
|
||||
position: absolute;
|
||||
display: block;
|
||||
cursor: default;
|
||||
}
|
||||
.irs-min {
|
||||
left: 0;
|
||||
}
|
||||
.irs-max {
|
||||
right: 0;
|
||||
}
|
||||
.irs-from, .irs-to, .irs-single {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.irs-grid {
|
||||
position: absolute;
|
||||
display: none;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
.irs-with-grid .irs-grid {
|
||||
display: block;
|
||||
}
|
||||
.irs-grid-pol {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
background: #000;
|
||||
}
|
||||
.irs-grid-pol.small {
|
||||
height: 4px;
|
||||
}
|
||||
.irs-grid-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
line-height: 9px;
|
||||
padding: 0 3px;
|
||||
color: #000;
|
||||
}
|
||||
.irs-disable-mask {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: -1%;
|
||||
width: 102%;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
z-index: 2;
|
||||
}
|
||||
.lt-ie9 .irs-disable-mask {
|
||||
background: #000;
|
||||
filter: alpha(opacity=0);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.irs-disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.irs-hidden-input {
|
||||
position: absolute !important;
|
||||
display: block !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
z-index: -9999 !important;
|
||||
background: none !important;
|
||||
border-style: solid !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.irs--flat {
|
||||
height: 40px;
|
||||
}
|
||||
.irs--flat.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
.irs--flat .irs-line {
|
||||
top: var(--cnvs-range-slider-top);
|
||||
height: var(--cnvs-range-slider-line_height);
|
||||
background-color: var(--cnvs-range-slider-line_color);
|
||||
border-radius: var(--cnvs-range-slider-custom_radius);
|
||||
}
|
||||
.irs--flat .irs-bar {
|
||||
top: var(--cnvs-range-slider-top);
|
||||
height: var(--cnvs-range-slider-line_height);
|
||||
background-color: var(--cnvs-range-slider-bar_color);
|
||||
}
|
||||
.irs--flat .irs-bar--single {
|
||||
border-radius: var(--cnvs-range-slider-custom_radius) 0 0 var(--cnvs-range-slider-custom_radius);
|
||||
}
|
||||
.irs--flat .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: var(--cnvs-range-slider-bottom);
|
||||
background-color: var(--cnvs-range-slider-line_color);
|
||||
}
|
||||
.irs--flat .irs-handle {
|
||||
top: 22px;
|
||||
width: var(--cnvs-range-slider-handle_width);
|
||||
height: var(--cnvs-range-slider-handle_height);
|
||||
background-color: transparent;
|
||||
}
|
||||
.irs--flat .irs-handle > i:first-child {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin-left: -1px;
|
||||
background-color: var(--cnvs-range-slider-handle_color_1);
|
||||
}
|
||||
.irs--flat .irs-handle.state_hover > i:first-child, .irs--flat .irs-handle:hover > i:first-child {
|
||||
background-color: var(--cnvs-range-slider-handle_color_2);
|
||||
}
|
||||
.irs--flat .irs-min,
|
||||
.irs--flat .irs-max {
|
||||
top: 0;
|
||||
padding: 1px 3px;
|
||||
color: var(--cnvs-range-slider-minmax_text_color);
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
background-color: var(--cnvs-range-slider-minmax_bg_color);
|
||||
border-radius: var(--cnvs-range-slider-custom_radius);
|
||||
}
|
||||
.irs--flat .irs-from,
|
||||
.irs--flat .irs-to,
|
||||
.irs--flat .irs-single {
|
||||
color: var(--cnvs-range-slider-label_color_2);
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: var(--cnvs-range-slider-label_color_1);
|
||||
border-radius: var(--cnvs-range-slider-custom_radius);
|
||||
}
|
||||
.irs--flat .irs-from:before,
|
||||
.irs--flat .irs-to:before,
|
||||
.irs--flat .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: var(--cnvs-range-slider-label_color_1);
|
||||
}
|
||||
.irs--flat .irs-grid-pol {
|
||||
background-color: var(--cnvs-range-slider-grid_color_1);
|
||||
}
|
||||
.irs--flat .irs-grid-text {
|
||||
color: var(--cnvs-range-slider-grid_color_2);
|
||||
}
|
||||
.irs--big {
|
||||
height: 55px;
|
||||
}
|
||||
.irs--big.irs-with-grid {
|
||||
height: 70px;
|
||||
}
|
||||
.irs--big .irs-line {
|
||||
top: 33px;
|
||||
height: 12px;
|
||||
background-color: white;
|
||||
background: linear-gradient(to bottom, #ddd -50%, white 150%);
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.irs--big .irs-bar {
|
||||
top: 33px;
|
||||
height: 12px;
|
||||
background-color: #92bce0;
|
||||
border: 1px solid #428bca;
|
||||
background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
|
||||
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.irs--big .irs-bar--single {
|
||||
border-radius: 12px 0 0 12px;
|
||||
}
|
||||
.irs--big .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 16px;
|
||||
background-color: rgba(66, 139, 202, 0.5);
|
||||
}
|
||||
.irs--big .irs-handle {
|
||||
top: 25px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
background-color: #cbcfd5;
|
||||
background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.irs--big .irs-handle.state_hover,
|
||||
.irs--big .irs-handle:hover {
|
||||
border-color: rgba(0, 0, 0, 0.45);
|
||||
background-color: #939ba7;
|
||||
background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%);
|
||||
}
|
||||
.irs--big .irs-min,
|
||||
.irs--big .irs-max {
|
||||
top: 0;
|
||||
padding: 1px 5px;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
background-color: #9f9f9f;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.irs--big .irs-from,
|
||||
.irs--big .irs-to,
|
||||
.irs--big .irs-single {
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: #428bca;
|
||||
background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.irs--big .irs-grid-pol {
|
||||
background-color: #428bca;
|
||||
}
|
||||
.irs--big .irs-grid-text {
|
||||
color: #428bca;
|
||||
}
|
||||
.irs--modern {
|
||||
height: 55px;
|
||||
}
|
||||
.irs--modern.irs-with-grid {
|
||||
height: 55px;
|
||||
}
|
||||
.irs--modern .irs-line {
|
||||
top: 25px;
|
||||
height: 5px;
|
||||
background-color: #d1d6e0;
|
||||
background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
|
||||
border: 1px solid #a3adc1;
|
||||
border-bottom-width: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.irs--modern .irs-bar {
|
||||
top: 25px;
|
||||
height: 5px;
|
||||
background: #20b426;
|
||||
background: linear-gradient(to bottom, #20b426 0%, #18891d 100%);
|
||||
}
|
||||
.irs--modern .irs-bar--single {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.irs--modern .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 21px;
|
||||
background-color: rgba(209, 214, 224, 0.5);
|
||||
}
|
||||
.irs--modern .irs-handle {
|
||||
top: 37px;
|
||||
width: 12px;
|
||||
height: 13px;
|
||||
border: 1px solid #a3adc1;
|
||||
border-top-width: 0;
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.irs--modern .irs-handle > i:nth-child(1) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -4px;
|
||||
left: 1px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 1px solid #a3adc1;
|
||||
background: white;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.irs--modern .irs-handle > i:nth-child(2) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
background: #e9e6e6;
|
||||
background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.irs--modern .irs-handle > i:nth-child(3) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 4px;
|
||||
height: 5px;
|
||||
border-left: 1px solid #a3adc1;
|
||||
border-right: 1px solid #a3adc1;
|
||||
}
|
||||
.irs--modern .irs-handle.state_hover,
|
||||
.irs--modern .irs-handle:hover {
|
||||
border-color: #7685a2;
|
||||
background: #c3c7cd;
|
||||
background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%);
|
||||
}
|
||||
.irs--modern .irs-handle.state_hover > i:nth-child(1),
|
||||
.irs--modern .irs-handle:hover > i:nth-child(1) {
|
||||
border-color: #7685a2;
|
||||
}
|
||||
.irs--modern .irs-handle.state_hover > i:nth-child(3),
|
||||
.irs--modern .irs-handle:hover > i:nth-child(3) {
|
||||
border-color: #48536a;
|
||||
}
|
||||
.irs--modern .irs-min,
|
||||
.irs--modern .irs-max {
|
||||
top: 0;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
color: white;
|
||||
background-color: #d1d6e0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.irs--modern .irs-from,
|
||||
.irs--modern .irs-to,
|
||||
.irs--modern .irs-single {
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: #20b426;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.irs--modern .irs-from:before,
|
||||
.irs--modern .irs-to:before,
|
||||
.irs--modern .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #20b426;
|
||||
}
|
||||
.irs--modern .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--modern .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--modern .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 13px;
|
||||
}
|
||||
.irs--sharp {
|
||||
height: 50px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
.irs--sharp.irs-with-grid {
|
||||
height: 57px;
|
||||
}
|
||||
.irs--sharp .irs-line {
|
||||
top: 30px;
|
||||
height: 2px;
|
||||
background-color: black;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.irs--sharp .irs-bar {
|
||||
top: 30px;
|
||||
height: 2px;
|
||||
background-color: #ee22fa;
|
||||
}
|
||||
.irs--sharp .irs-bar--single {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.irs--sharp .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 21px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.irs--sharp .irs-handle {
|
||||
top: 25px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #a804b2;
|
||||
}
|
||||
.irs--sharp .irs-handle > i:first-child {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #a804b2;
|
||||
}
|
||||
.irs--sharp .irs-handle.state_hover,
|
||||
.irs--sharp .irs-handle:hover {
|
||||
background-color: black;
|
||||
}
|
||||
.irs--sharp .irs-handle.state_hover > i:first-child,
|
||||
.irs--sharp .irs-handle:hover > i:first-child {
|
||||
border-top-color: black;
|
||||
}
|
||||
.irs--sharp .irs-min,
|
||||
.irs--sharp .irs-max {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 4px;
|
||||
opacity: 0.4;
|
||||
background-color: #a804b2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.irs--sharp .irs-from,
|
||||
.irs--sharp .irs-to,
|
||||
.irs--sharp .irs-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 4px;
|
||||
background-color: #a804b2;
|
||||
color: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.irs--sharp .irs-from:before,
|
||||
.irs--sharp .irs-to:before,
|
||||
.irs--sharp .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #a804b2;
|
||||
}
|
||||
.irs--sharp .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--sharp .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--sharp .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 13px;
|
||||
}
|
||||
.irs--round {
|
||||
height: 50px;
|
||||
}
|
||||
.irs--round.irs-with-grid {
|
||||
height: 65px;
|
||||
}
|
||||
.irs--round .irs-line {
|
||||
top: 36px;
|
||||
height: 4px;
|
||||
background-color: var(--cnvs-range-slider-bar_color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--round .irs-bar {
|
||||
top: 36px;
|
||||
height: 4px;
|
||||
background-color: var(--cnvs-range-slider-bar_color);
|
||||
}
|
||||
.irs--round .irs-bar--single {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.irs--round .irs-shadow {
|
||||
height: 4px;
|
||||
bottom: 21px;
|
||||
background-color: rgba(222, 228, 236, 0.5);
|
||||
}
|
||||
.irs--round .irs-handle {
|
||||
top: 26px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 4px solid var(--cnvs-range-slider-bar_color);
|
||||
background-color: white;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
|
||||
}
|
||||
.irs--round .irs-handle.state_hover,
|
||||
.irs--round .irs-handle:hover {
|
||||
background-color: #f0f6ff;
|
||||
}
|
||||
.irs--round .irs-min,
|
||||
.irs--round .irs-max {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--round .irs-from,
|
||||
.irs--round .irs-to,
|
||||
.irs--round .irs-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 5px;
|
||||
background-color: var(--cnvs-range-slider-bar_color);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--round .irs-from:before,
|
||||
.irs--round .irs-to:before,
|
||||
.irs--round .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: var(--cnvs-range-slider-bar_color);
|
||||
}
|
||||
.irs--round .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--round .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--round .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 13px;
|
||||
}
|
||||
.irs--square {
|
||||
height: 50px;
|
||||
}
|
||||
.irs--square.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
.irs--square .irs-line {
|
||||
top: 31px;
|
||||
height: 4px;
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--square .irs-bar {
|
||||
top: 31px;
|
||||
height: 4px;
|
||||
background-color: black;
|
||||
}
|
||||
.irs--square .irs-shadow {
|
||||
height: 2px;
|
||||
bottom: 21px;
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--square .irs-handle {
|
||||
top: 25px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 3px solid black;
|
||||
background-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.irs--square .irs-handle.state_hover,
|
||||
.irs--square .irs-handle:hover {
|
||||
background-color: #f0f6ff;
|
||||
}
|
||||
.irs--square .irs-min,
|
||||
.irs--square .irs-max {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.irs--square .irs-from,
|
||||
.irs--square .irs-to,
|
||||
.irs--square .irs-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 5px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.irs--square .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--square .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--square .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=ion.rangeslider.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1 @@
|
|||
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
/* Style-1 + Style-2 */
|
||||
.checkbox-style,
|
||||
.radio-style {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.checkbox-style, .radio-style,
|
||||
.checkbox-style-1-label, .radio-style-1-label,
|
||||
.checkbox-style-2-label, .radio-style-2-label,
|
||||
.checkbox-style-3-label, .radio-style-3-label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-style-1-label, .radio-style-1-label,
|
||||
.checkbox-style-2-label, .radio-style-2-label,
|
||||
.checkbox-style-3-label, .radio-style-3-label { position: relative; }
|
||||
|
||||
.checkbox-style-1-label:before, .radio-style-1-label:before,
|
||||
.checkbox-style-2-label:before, .radio-style-2-label:before,
|
||||
.checkbox-style-3-label:before, .radio-style-3-label:before {
|
||||
content: '';
|
||||
background: #FFF;
|
||||
border: 2px solid #DDD;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 4px;
|
||||
margin-right: 10px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.radio-style-1-label:before,
|
||||
.radio-style-2-label:before,
|
||||
.radio-style-3-label:before { border-radius: 50%; }
|
||||
|
||||
.checkbox-style:checked + .checkbox-style-1-label:before {
|
||||
background: #1ABC9C;
|
||||
background: var(--themecolor);
|
||||
}
|
||||
.radio-style:checked + .radio-style-1-label:before { background: #CCC; }
|
||||
|
||||
/* Checkbox-small + Radio-small */
|
||||
.checkbox-style-1-label.checkbox-small:before,
|
||||
.radio-style-1-label.radio-small:before,
|
||||
.checkbox-style-2-label.checkbox-small:before,
|
||||
.radio-style-2-label.radio-small:before,
|
||||
.checkbox-style-3-label.checkbox-small:before,
|
||||
.radio-style-3-label.radio-small:before {
|
||||
border: 2px solid #DDD;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 8px 1px 0;
|
||||
}
|
||||
|
||||
/* Style-2 */
|
||||
.checkbox-style:checked + .checkbox-style-2-label:before {
|
||||
background: #1ABC9C;
|
||||
background: var(--themecolor);
|
||||
box-shadow: inset 0px 0px 0px 4px #fff;
|
||||
}
|
||||
|
||||
.radio-style:checked + .radio-style-2-label:before {
|
||||
background: #ccc;
|
||||
box-shadow: inset 0px 0px 0px 4px #fff;
|
||||
}
|
||||
|
||||
.checkbox-style:checked + .checkbox-style-2-label.checkbox-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
|
||||
.radio-style:checked + .radio-style-2-label.radio-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
|
||||
|
||||
/* style-3 */
|
||||
.checkbox-style:checked + .checkbox-style-3-label:before,
|
||||
.radio-style:checked + .radio-style-3-label:before {
|
||||
content: "\e116";
|
||||
font-family: 'lined-icons';
|
||||
background: #1ABC9C;
|
||||
background: var(--themecolor);
|
||||
color: #FFF;
|
||||
}
|
||||
.radio-style:checked + .radio-style-3-label:before {
|
||||
color: #BBB;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* style-3 - Small */
|
||||
.checkbox-style + .checkbox-style-3-label.checkbox-small:before,
|
||||
.radio-style + .radio-style-3-label.radio-small:before {
|
||||
border: 1px solid #BBB;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 8px 1px 0;
|
||||
font-size: 7px;
|
||||
line-height: .8;
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
/* Style-1 + Style-2 */
|
||||
.checkbox-style,
|
||||
.radio-style {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.checkbox-style, .radio-style,
|
||||
.checkbox-style-1-label, .radio-style-1-label,
|
||||
.checkbox-style-2-label, .radio-style-2-label,
|
||||
.checkbox-style-3-label, .radio-style-3-label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-style-1-label, .radio-style-1-label,
|
||||
.checkbox-style-2-label, .radio-style-2-label,
|
||||
.checkbox-style-3-label, .radio-style-3-label { position: relative; }
|
||||
|
||||
.checkbox-style-1-label:before, .radio-style-1-label:before,
|
||||
.checkbox-style-2-label:before, .radio-style-2-label:before,
|
||||
.checkbox-style-3-label:before, .radio-style-3-label:before {
|
||||
content: '';
|
||||
background: #FFF;
|
||||
border: 2px solid #DDD;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.radio-style-1-label:before,
|
||||
.radio-style-2-label:before,
|
||||
.radio-style-3-label:before { border-radius: 50%; }
|
||||
|
||||
.checkbox-style:checked + .checkbox-style-1-label:before { background: var(--cnvs-themecolor); }
|
||||
.radio-style:checked + .radio-style-1-label:before { background: #CCC; }
|
||||
|
||||
/* Checkbox-small + Radio-small */
|
||||
.checkbox-style-1-label.checkbox-small:before,
|
||||
.radio-style-1-label.radio-small:before,
|
||||
.checkbox-style-2-label.checkbox-small:before,
|
||||
.radio-style-2-label.radio-small:before,
|
||||
.checkbox-style-3-label.checkbox-small:before,
|
||||
.radio-style-3-label.radio-small:before {
|
||||
border: 2px solid #DDD;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 8px 1px 0;
|
||||
}
|
||||
|
||||
/* Style-2 */
|
||||
.checkbox-style:checked + .checkbox-style-2-label:before {
|
||||
background: var(--cnvs-themecolor);
|
||||
box-shadow: inset 0px 0px 0px 4px #fff;
|
||||
}
|
||||
|
||||
.radio-style:checked + .radio-style-2-label:before {
|
||||
background: #ccc;
|
||||
box-shadow: inset 0px 0px 0px 4px #fff;
|
||||
}
|
||||
|
||||
.checkbox-style:checked + .checkbox-style-2-label.checkbox-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
|
||||
.radio-style:checked + .radio-style-2-label.radio-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
|
||||
|
||||
/* style-3 */
|
||||
.checkbox-style:checked + .checkbox-style-3-label:before,
|
||||
.radio-style:checked + .radio-style-3-label:before {
|
||||
content: "\F633";
|
||||
font-family: "bootstrap-icons";
|
||||
background: var(--cnvs-themecolor);
|
||||
color: #FFF;
|
||||
}
|
||||
.radio-style:checked + .radio-style-3-label:before {
|
||||
color: #BBB;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* style-3 - Small */
|
||||
.checkbox-style + .checkbox-style-3-label.checkbox-small:before,
|
||||
.radio-style + .radio-style-3-label.radio-small:before {
|
||||
border: 1px solid #BBB;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 8px 1px 0;
|
||||
font-size: 7px;
|
||||
line-height: .8;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 694 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,7 @@
|
|||
/* ----------------------------------------------------------------
|
||||
Custom CSS
|
||||
|
||||
Add all your Custom Styled CSS here for New Styles or
|
||||
Overwriting Default Theme Styles for Better Handling Updates
|
||||
-----------------------------------------------------------------*/
|
||||
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
@import url("icons/font-awesome.css"); /* Ref: https://fontawesome.com/search?o=r&m=free */
|
||||
@import url("icons/bootstrap-icons.css"); /* Ref: https://icons.getbootstrap.com/#icons */
|
||||
@import url("icons/unicons.css"); /* Ref: https://iconscout.com/unicons/explore/line */
|
||||
|
||||
[class*="fa-"],
|
||||
[class*=" fa-"],
|
||||
[class*="bi-"],
|
||||
[class*=" bi-"],
|
||||
[class*="uil-"],
|
||||
[class*=" uil-"] {
|
||||
display: inline-block;
|
||||
line-height: inherit;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
[class*="fa-"]::before,
|
||||
[class*=" fa-"]::before,
|
||||
[class*="bi-"]::before,
|
||||
[class*=" bi-"]::before,
|
||||
[class*="uil-"]::before,
|
||||
[class*=" uil-"]::before {
|
||||
display: inline-flex;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
font-size: 1.3333333333333333em;
|
||||
line-height: 0.75em;
|
||||
vertical-align: -15%;
|
||||
}
|
||||
.icon-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
.icon-3x {
|
||||
font-size: 3em;
|
||||
}
|
||||
.icon-4x {
|
||||
font-size: 4em;
|
||||
}
|
||||
.icon-5x {
|
||||
font-size: 5em;
|
||||
}
|
||||
.icon-fw {
|
||||
width: 1.2857142857142858em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
padding: 0.2em 0.25em 0.15em;
|
||||
border: solid 0.08em #eeeeee;
|
||||
border-radius: 0.1em;
|
||||
}
|
||||
.icon.pull-left {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
.icon.pull-right {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
.icon-spin {
|
||||
-webkit-animation: spin 2s infinite linear;
|
||||
-moz-animation: spin 2s infinite linear;
|
||||
-o-animation: spin 2s infinite linear;
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-o-keyframes spin {
|
||||
0% {
|
||||
-o-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-o-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-ms-keyframes spin {
|
||||
0% {
|
||||
-ms-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-ms-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
.icon-rotate-90 {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.icon-rotate-180 {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.icon-rotate-270 {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||
-webkit-transform: rotate(270deg);
|
||||
-moz-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
-o-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
.icon-flip-horizontal {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
|
||||
-webkit-transform: scale(-1, 1);
|
||||
-moz-transform: scale(-1, 1);
|
||||
-ms-transform: scale(-1, 1);
|
||||
-o-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
.icon-flip-vertical {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
|
||||
-webkit-transform: scale(1, -1);
|
||||
-moz-transform: scale(1, -1);
|
||||
-ms-transform: scale(1, -1);
|
||||
-o-transform: scale(1, -1);
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
.icon-stacked {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon-stacked-1x,
|
||||
.icon-stacked-2x {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.rtl .icon-stacked-1x,
|
||||
.rtl .icon-stacked-2x {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.icon-stacked-1x {
|
||||
line-height: inherit;
|
||||
}
|
||||
.icon-stacked-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
.icon-inverse {
|
||||
color: #ffffff;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,451 @@
|
|||
|
||||
:root {
|
||||
--cnvs-mfp-bg: rgba(0, 0, 0, 0.95);
|
||||
--cnvs-mfp-preloader-color: #FFF;
|
||||
--cnvs-mfp-preloader-size: 2rem;
|
||||
--cnvs-mfp-close-btn-size: 44px;
|
||||
--cnvs-mfp-close-btn-font-size: 1.75rem;
|
||||
--cnvs-mfp-arrow-size: 4rem;
|
||||
|
||||
--cnvs-mfp-title-color: #FFF;
|
||||
--cnvs-mfp-title-padding: 1rem;
|
||||
--cnvs-mfp-title-border-radius: 0.25rem;
|
||||
|
||||
--cnvs-mfp-link-color: #CCC;
|
||||
}
|
||||
|
||||
|
||||
/* Magnific Popup CSS */
|
||||
.mfp-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1042;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: var(--cnvs-mfp-bg);
|
||||
}
|
||||
|
||||
.mfp-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1043;
|
||||
position: fixed;
|
||||
outline: none !important;
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.mfp-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.mfp-container:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle; }
|
||||
|
||||
.mfp-align-top .mfp-container:before {
|
||||
display: none; }
|
||||
|
||||
.mfp-content {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
z-index: 1045; }
|
||||
|
||||
.mfp-inline-holder .mfp-content,
|
||||
.mfp-ajax-holder .mfp-content {
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-ajax-cur {
|
||||
cursor: progress; }
|
||||
|
||||
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out; }
|
||||
|
||||
.mfp-zoom {
|
||||
cursor: pointer;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.mfp-auto-cursor .mfp-content {
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-close,
|
||||
.mfp-arrow,
|
||||
.mfp-preloader,
|
||||
.mfp-counter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.mfp-loading.mfp-figure {
|
||||
display: none; }
|
||||
|
||||
.mfp-hide {
|
||||
display: none !important; }
|
||||
|
||||
.mfp-preloader {
|
||||
color: var(--cnvs-mfp-preloader-color);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: var(--cnvs-mfp-preloader-size);
|
||||
height: var(--cnvs-mfp-preloader-size);
|
||||
font-size: var(--cnvs-mfp-preloader-size);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1044;
|
||||
font-family: "Simple-Line-Icons";
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
|
||||
.mfp-container:not(.mfp-s-error) .mfp-preloader::before {
|
||||
content: "\e098";
|
||||
}
|
||||
|
||||
.mfp-container.mfp-s-error .mfp-preloader {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 1.5rem;
|
||||
font-family: inherit;
|
||||
animation: none;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
.mfp-preloader a {
|
||||
color: var(--cnvs-mfp-preloader-color); }
|
||||
.mfp-preloader a:hover {
|
||||
color: var(--cnvs-mfp-preloader-color); }
|
||||
|
||||
.mfp-s-ready .mfp-preloader {
|
||||
display: none; }
|
||||
|
||||
.mfp-s-error .mfp-content {
|
||||
display: none; }
|
||||
|
||||
button.mfp-close,
|
||||
button.mfp-arrow {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
z-index: 1046;
|
||||
box-shadow: none;
|
||||
touch-action: manipulation; }
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
.mfp-close {
|
||||
width: var(--cnvs-mfp-close-btn-size);
|
||||
height: var(--cnvs-mfp-close-btn-size);
|
||||
line-height: var(--cnvs-mfp-close-btn-size);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
padding: 0 0 18px 10px;
|
||||
color: var(--cnvs-mfp-link-color);
|
||||
font-style: normal;
|
||||
font-size: var(--cnvs-mfp-close-btn-font-size);
|
||||
transition: all .3s ease;}
|
||||
.mfp-close:hover,
|
||||
.mfp-close:focus {
|
||||
color: #FFF;
|
||||
}
|
||||
.mfp-close:active {
|
||||
top: 1px; }
|
||||
|
||||
.mfp-iframe-scaler .mfp-close { margin-top: calc(-1 * var(--cnvs-mfp-close-btn-size)); }
|
||||
|
||||
.mfp-close-btn-in .mfp-close {
|
||||
color: #333; }
|
||||
|
||||
.mfp-image-holder .mfp-close,
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
color: #FFF;
|
||||
right: -6px;
|
||||
text-align: right;
|
||||
padding-right: 6px;
|
||||
width: 100%; }
|
||||
|
||||
.mfp-arrow {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
width: var(--cnvs-mfp-arrow-size);
|
||||
height: var(--cnvs-mfp-arrow-size);
|
||||
font-family: "lined-icons";
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-size: calc(var(--cnvs-mfp-arrow-size) / 2);
|
||||
transform: translateY(-50%);
|
||||
color: var(--cnvs-mfp-link-color);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.mfp-arrow:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) scale(1.2);
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.mfp-arrow {
|
||||
background-color: rgba(0, 0, 0, 0.75) !important;
|
||||
}
|
||||
|
||||
.mfp-arrow:hover {
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.85) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-arrow-right:before {
|
||||
content: "\e912";
|
||||
}
|
||||
|
||||
.mfp-arrow-right {
|
||||
left: auto;
|
||||
right: 0; }
|
||||
|
||||
.mfp-arrow-left {
|
||||
right: auto;
|
||||
left: 0; }
|
||||
.mfp-arrow-left:before {
|
||||
content: "\e910";
|
||||
}
|
||||
|
||||
.mfp-iframe-holder .mfp-content {
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
max-width: 900px; }
|
||||
|
||||
|
||||
.mfp-iframe-scaler {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%; }
|
||||
.mfp-iframe-scaler iframe {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000; }
|
||||
|
||||
/* Main image in popup */
|
||||
img.mfp-img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto; }
|
||||
|
||||
/* The shadow behind the image */
|
||||
.mfp-figure {
|
||||
line-height: 0; }
|
||||
.mfp-figure:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: block;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #444; }
|
||||
.mfp-figure small {
|
||||
color: #BDBDBD;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px; }
|
||||
.mfp-figure figure {
|
||||
margin: 0; }
|
||||
|
||||
.mfp-bottom-bar {
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 25px;
|
||||
transform: translateX(-50%);
|
||||
width: auto;
|
||||
text-align: center;
|
||||
line-height: 1.65;
|
||||
color: var(--cnvs-mfp-title-color);
|
||||
word-wrap: break-word;
|
||||
padding: var(--cnvs-mfp-title-padding);
|
||||
background: rgba(39, 60, 68, .2);
|
||||
-webkit-backdrop-filter: blur(3em);
|
||||
backdrop-filter: blur(3em);
|
||||
border-radius: var(--cnvs-mfp-title-border-radius);
|
||||
}
|
||||
|
||||
.mfp-title:empty,
|
||||
.mfp-counter:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mfp-counter {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 25px;
|
||||
right: 20px;
|
||||
color: var(--cnvs-mfp-link-color);
|
||||
font-size: 0.75rem;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.mfp-title {
|
||||
padding: 1rem 1.5rem;
|
||||
line-height: 1.5;
|
||||
font-size: 0.875rem
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.mfp-ready .mfp-counter,
|
||||
.mfp-ready .mfp-arrow,
|
||||
.mfp-ready .mfp-title,
|
||||
.mfp-ready .mfp-close {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-name: fadeOut;
|
||||
animation-name: fadeOut;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.mfp-ready:hover .mfp-counter,
|
||||
.mfp-ready:hover .mfp-arrow,
|
||||
.mfp-ready:hover .mfp-title,
|
||||
.mfp-ready:hover .mfp-close {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-image-holder .mfp-content {
|
||||
max-width: 100%; }
|
||||
|
||||
.mfp-gallery .mfp-image-holder .mfp-figure {
|
||||
cursor: pointer; }
|
||||
|
||||
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
|
||||
/**
|
||||
* Remove all paddings around the image on small screen
|
||||
*/
|
||||
.mfp-img-mobile .mfp-image-holder {
|
||||
padding-left: 0;
|
||||
padding-right: 0; }
|
||||
.mfp-img-mobile img.mfp-img {
|
||||
padding: 0; }
|
||||
.mfp-img-mobile .mfp-figure:after {
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
.mfp-img-mobile .mfp-figure small {
|
||||
display: inline;
|
||||
margin-left: 5px; }
|
||||
.mfp-img-mobile .mfp-bottom-bar {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
padding: 3px 5px;
|
||||
position: fixed;
|
||||
box-sizing: border-box; }
|
||||
.mfp-img-mobile .mfp-bottom-bar:empty {
|
||||
padding: 0; }
|
||||
.mfp-img-mobile .mfp-counter {
|
||||
right: 5px;
|
||||
top: 3px; }
|
||||
.mfp-img-mobile .mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
padding: 0; } }
|
||||
|
||||
|
||||
|
||||
/* overlay at start */
|
||||
.mfp-fade.mfp-bg {
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.25s ease-out;
|
||||
-moz-transition: all 0.25s ease-out;
|
||||
transition: all 0.25s ease-out;
|
||||
}
|
||||
/* overlay animate in */
|
||||
.mfp-fade.mfp-bg.mfp-ready {
|
||||
opacity: 0.9;
|
||||
}
|
||||
/* overlay animate out */
|
||||
.mfp-fade.mfp-bg.mfp-removing {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* content at start */
|
||||
.mfp-fade.mfp-wrap .mfp-content {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transition: all 0.25s ease-out;
|
||||
-moz-transition: all 0.25s ease-out;
|
||||
transition: all 0.25s ease-out;
|
||||
}
|
||||
/* content animate it */
|
||||
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
|
||||
opacity: 1;
|
||||
}
|
||||
/* content animate out */
|
||||
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,635 @@
|
|||
/* ----------------------------------------------------------------
|
||||
Canvas: Car
|
||||
-----------------------------------------------------------------*/
|
||||
|
||||
:root {
|
||||
--cnvs-themecolor: #6aa84f;
|
||||
--cnvs-themecolor-rgb: 106, 168, 79;
|
||||
--cnvs-body-font: 'Open Sans', sans-serif;
|
||||
--cnvs-primary-font: 'Mukta Vaani', sans-serif;
|
||||
--cnvs-header-height: 50px;
|
||||
--cnvs-section-bg: #FAFAFA;
|
||||
}
|
||||
|
||||
.stretched #gotoTop {
|
||||
--cnvs-gotoTop-position-boxed-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Runing Car
|
||||
-----------------------------------------------------------------*/
|
||||
.running-car {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 659px;
|
||||
}
|
||||
|
||||
img.car,
|
||||
img.wheel {
|
||||
-webkit-transition: all 1s ease-out;
|
||||
-moz-transition: all 1s ease-out;
|
||||
transition: all 1s ease-out;
|
||||
margin-left: -660px;
|
||||
}
|
||||
|
||||
img.wheel {
|
||||
position: absolute;
|
||||
left: 401px;
|
||||
bottom:33px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.running-car.in-view img.car {
|
||||
-webkit-transform: translate(600px,0px) rotate(0deg);
|
||||
-moz-transform: translate(600px,0px) rotate(0deg);
|
||||
transform: translate(600px,0px) rotate(0deg);
|
||||
}
|
||||
.running-car.in-view img.wheel {
|
||||
-webkit-transform: translate(600px,0px) rotate(600deg);
|
||||
-moz-transform: translate(600px,0px) rotate(600deg);
|
||||
transform: translate(600px,0px) rotate(600deg);
|
||||
}
|
||||
|
||||
.device-sm .running-car.in-view img.car {
|
||||
-webkit-transform: translate(500px,0px) rotate(0deg);
|
||||
-moz-transform: translate(500px,0px) rotate(0deg);
|
||||
transform: translate(500px,0px) rotate(0deg);
|
||||
}
|
||||
.device-sm .running-car.in-view img.wheel {
|
||||
-webkit-transform: translate(500px,0px) rotate(600deg);
|
||||
-moz-transform: translate(500px,0px) rotate(600deg);
|
||||
transform: translate(500px,0px) rotate(600deg);
|
||||
}
|
||||
|
||||
.device-xs .running-car.in-view img.car {
|
||||
-webkit-transform: translate(350px,0px) rotate(0deg);
|
||||
-moz-transform: translate(350px,0px) rotate(0deg);
|
||||
transform: translate(350px,0px) rotate(0deg);
|
||||
}
|
||||
.device-xs .running-car.in-view img.wheel {
|
||||
-webkit-transform: translate(350px,0px) rotate(600deg);
|
||||
-moz-transform: translate(350px,0px) rotate(600deg);
|
||||
transform: translate(350px,0px) rotate(600deg);
|
||||
}
|
||||
|
||||
|
||||
/* Threesixty degree Styles
|
||||
-----------------------------------------------------------------*/
|
||||
.threesixty {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.threesixty .threesixty_images {
|
||||
display: none;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.threesixty .threesixty_images img {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
.threesixty .threesixty_images img.previous-image {visibility: hidden; }
|
||||
.threesixty .threesixty_images img.current-image { visibility: visible; }
|
||||
|
||||
.threesixty .spinner {
|
||||
width: 60px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
height: 30px;
|
||||
background: #333;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.threesixty .spinner span {
|
||||
font-size: 12px;
|
||||
font-weight: bolder;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
}
|
||||
.threesixty .nav_bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
margin-left: -48px;
|
||||
z-index: 11;
|
||||
}
|
||||
.threesixty .nav_bar a {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
float: left;
|
||||
background: url('images/360degree-cars/navs.png') no-repeat;
|
||||
text-indent: -99999px;
|
||||
}
|
||||
.threesixty .nav_bar a.nav_bar_play { background-position: 0 0 !important; }
|
||||
.threesixty .nav_bar a.nav_bar_previous { background-position: -3px -73px !important; }
|
||||
.threesixty .nav_bar a.nav_bar_stop { background-position: 0 -37px !important; }
|
||||
.threesixty .nav_bar a.nav_bar_next { background-position: 3px -104px !important; }
|
||||
/* html */
|
||||
.threesixty:-webkit-full-screen {
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
padding-top: 200px;
|
||||
}
|
||||
.threesixty:-moz-full-screen {
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
/* heading-block */
|
||||
.heading-block.h-large h3 {
|
||||
font-size: 44px;
|
||||
line-height: 50px;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
/* Slider Area
|
||||
-----------------------------------------------------------------*/
|
||||
.slider-caption h2 {
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
line-height: 1;
|
||||
font-size: 48px;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.slider-caption p {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.slider-caption h2,
|
||||
.slider-caption p,
|
||||
.slider-caption .button {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-20%,0,0);
|
||||
-ms-transform: translate3d(-20%,0,0);
|
||||
-o-transform: translate3d(-20%,0,0);
|
||||
-webkit-transition: -webkit-transform .05s ease-out;
|
||||
transition: -webkit-transform .05s ease-out;
|
||||
transition: transform .05s ease-out;
|
||||
transition: transform .05s ease-out, -webkit-transform .05s ease-out;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.swiper-slide.swiper-slide-active .slider-caption h2,
|
||||
.swiper-slide.swiper-slide-active .slider-caption p,
|
||||
.swiper-slide.swiper-slide-active .slider-caption .button {
|
||||
opacity: 1;
|
||||
-webkit-transition: transform 1s, opacity 2s;
|
||||
-o-transition: transform 1s, opacity 2s;
|
||||
transition: transform 1s, opacity 2s;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-ms-transform: translate3d(0,0,0);
|
||||
-o-transform: translate3d(0,0,0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.swiper-slide.swiper-slide-active .slider-caption p {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
.swiper-slide.swiper-slide-active .slider-caption .button {
|
||||
-webkit-transition: transform 1s, opacity 3s;
|
||||
-o-transition: transform 1s, opacity 3s;
|
||||
transition: transform 1s, opacity 3s;
|
||||
-webkit-transition-delay: 0.6s;
|
||||
transition-delay: 0.6s;
|
||||
}
|
||||
|
||||
.swiper-pagination { bottom: 20px !important; }
|
||||
|
||||
.swiper-pagination span {
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
background: #FFF;
|
||||
display: inline-block;
|
||||
margin: 0px 1px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
-webkit-transform: skew(-38deg);
|
||||
-moz-transform: skew(-38deg);
|
||||
-ms-transform: skew(-38deg);
|
||||
-o-transform: skew(-38deg);
|
||||
}
|
||||
|
||||
.swiper-pagination span.swiper-pagination-bullet-active { background-color: #c85e51 !important; }
|
||||
|
||||
.feature-box.fbox-plain .fbox-icon img { height: 48px; }
|
||||
|
||||
.section .iconlist li {
|
||||
margin-bottom: 6px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Portfolio Filter
|
||||
-----------------------------------------------------------------*/
|
||||
.grid-filter.style-2 {
|
||||
margin: 0 0 15px -14px;
|
||||
}
|
||||
|
||||
.grid-filter li.activeFilter a { font-weight: normal; }
|
||||
|
||||
.grid-filter.style-2 li a:not(.button) {
|
||||
font-size: 20px;
|
||||
color: #555 !important;
|
||||
}
|
||||
|
||||
.grid-filter.style-2 li a.button-reset {
|
||||
padding: 0 17px !important;
|
||||
font-size: 12px;
|
||||
line-height: 34px;
|
||||
color: #FFF !important;
|
||||
border-radius: 23px;
|
||||
text-transform: none;
|
||||
letter-spacing: 1px;
|
||||
background-color: var(--cnvs-themecolor);
|
||||
}
|
||||
|
||||
.grid-filter.style-2 li a span {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
font-family: var(--cnvs-primary-font);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 13px;
|
||||
color: #AAA;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid-filter.style-2 li a:not(.button),
|
||||
.grid-filter.style-2 li a span {
|
||||
-webkit-transition: color .3s ease;
|
||||
-o-transition: color .3s ease;
|
||||
transition: color .3s ease;
|
||||
}
|
||||
|
||||
.grid-filter.style-2 li a:not(.button):hover,
|
||||
.grid-filter.style-2 li a:not(.button):hover span,
|
||||
.grid-filter.style-2 li.activeFilter a:not(.button),
|
||||
.grid-filter.style-2 li.activeFilter a:not(.button) span {
|
||||
color: #c85e51 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.grid-filter.style-2 li.activeFilter a.button-reset {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity .4s ease;
|
||||
-o-transition: opacity .4s ease;
|
||||
transition: opacity .4s ease;
|
||||
}
|
||||
|
||||
.grid-filter.style-2 li a.button-reset { opacity: 1; }
|
||||
|
||||
.portfolio-desc span { font-size: 0.875rem; }
|
||||
|
||||
.filter-p-pricing {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0;
|
||||
background: #c85e51;
|
||||
color: #FFF;
|
||||
padding: 8px 15px;
|
||||
z-index: 1;
|
||||
font-family: var(--cnvs-primary-font);
|
||||
}
|
||||
|
||||
.filter-p-pricing::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
top: 0;
|
||||
left: -8px;
|
||||
height: 100%;
|
||||
width: 32px;
|
||||
background-color: #c85e51;
|
||||
-moz-transform: skew(-23deg,0deg);
|
||||
-o-transform: skew(-23deg,0deg);
|
||||
-ms-transform: skew(-23deg,0deg);
|
||||
-webkit-transform: skew(-23deg,0deg);
|
||||
transform: skew(-23deg,0deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.p-price-msrp {
|
||||
font-weight: 300;
|
||||
padding-left: 12px;
|
||||
margin-left: 10px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.car-p-features {
|
||||
border-top: 1px solid #DDD;
|
||||
padding: 5px 8px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.car-p-features [class^=col-] { margin-top: 5px; }
|
||||
|
||||
.car-p-features i {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.car-p-features span {
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.half-screen {
|
||||
position: relative;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
.section .video-wrap { z-index: 0; }
|
||||
|
||||
/* Video On Hover
|
||||
-----------------------------------------------------------------*/
|
||||
.videoplay-on-hover .vertical-middle,
|
||||
.videoplay-on-hover .video-overlay {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity .2s ease;
|
||||
-o-transition: opacity .2s ease;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
.videoplay-on-hover:hover .vertical-middle,
|
||||
.videoplay-on-hover:hover .video-overlay { opacity: 0; }
|
||||
|
||||
.counter + h5 { margin-top: 0; }
|
||||
|
||||
.counter-section [class^=col-] {
|
||||
border-left: none;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Page Loader
|
||||
-----------------------------------------------------------------*/
|
||||
.css3-spinner { background-color: #e6e6e6; }
|
||||
|
||||
.css3-spinner > div {
|
||||
margin-top: -65px;
|
||||
margin-left: -80px;
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
background-color: transparent;
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Border Form Design
|
||||
---------------------------------------------------------------------------- */
|
||||
|
||||
.form-control.border-form-control {
|
||||
--cnvs-input-btn-padding-y : 7px;
|
||||
--cnvs-input-btn-padding-x : 4px;
|
||||
--cnvs-input-btn-font-size : 17px;
|
||||
--cnvs-input-btn-border-color: #444;
|
||||
--cnvs-input-font-family: var(--cnvs-primary-font);
|
||||
}
|
||||
|
||||
.customjs.btn-default:active,
|
||||
.customjs.btn-default.active,
|
||||
.customjs.open > .dropdown-toggle.btn-default,
|
||||
.customjs.border-form-control .btn-default {
|
||||
background-color: transparent !important;
|
||||
font-weight: 300;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
line-height: inherit;
|
||||
font-size: 14px;
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.customjs.bootstrap-select .dropdown-toggle:focus,
|
||||
.customjs.bootstrap-select .dropdown-menu {
|
||||
margin: 0;
|
||||
outline: 0px !important;
|
||||
outline-offset: 0px !important;
|
||||
}
|
||||
|
||||
.border-form-control::-moz-placeholder { font-weight: 300; color: #CCC; }
|
||||
.border-form-control:-ms-input-placeholder {font-weight: 300; color: #CCC; }
|
||||
.border-form-control::-webkit-input-placeholder { font-weight: 300; color: #CCC; }
|
||||
|
||||
textarea.border-form-control {
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.widget .oc-item a {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bootstrap-select.btn-group .dropdown-menu a.dropdown-item span.dropdown-item-inner.opt { padding-left: 0.8rem; }
|
||||
|
||||
.dropdown-toggle::after { margin-left: -10px; }
|
||||
|
||||
.dark .btn-light.dropdown-toggle:focus { box-shadow: none !important; }
|
||||
|
||||
/* Footer
|
||||
-----------------------------------------------------------------*/
|
||||
|
||||
.widget_links li,
|
||||
.widget_links li a {
|
||||
background-image: none !important;
|
||||
padding-left: 0;
|
||||
color: #555 !important;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.dark .form-control:not(.not-dark), .dark .sm-form-control:not(.not-dark),
|
||||
.dark .form-control:not(.not-dark):active,
|
||||
.dark .form-control:not(.not-dark):focus,
|
||||
.dark .sm-form-control:not(.not-dark):active,
|
||||
.dark .sm-form-control:not(.not-dark):focus { border-color: rgba(255, 255, 255, 0.5) !important; }
|
||||
|
||||
|
||||
/* Larger Device View
|
||||
-----------------------------------------------------------------*/
|
||||
@media (min-width: 992px) {
|
||||
|
||||
/* Primary Menu Header size */
|
||||
#header { border-bottom: 1px solid #e7e7e7 }
|
||||
|
||||
#header.full-header #logo,
|
||||
#header.full-header .menu-container {
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Slider caption */
|
||||
.swiper-pagination { bottom: 40px !important; }
|
||||
|
||||
.swiper-pagination span {
|
||||
width: 70px;
|
||||
height: 6px;
|
||||
}
|
||||
.slider-caption.top-left { margin-top: -150px; }
|
||||
|
||||
/* 360 degree */
|
||||
.threesixty .threesixty_images img { top: 30px; }
|
||||
.threesixty .nav_bar { top: 10px; }
|
||||
|
||||
.counter-section [class^=col-]:not(:first-child) {
|
||||
border-left: 1px solid rgba(255,255,255,0.05);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.half-screen {
|
||||
position: relative;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.heading-block.h-large h3 {
|
||||
font-size: 64px;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
/* running car */
|
||||
.running-car {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 659px;
|
||||
}
|
||||
|
||||
.slider-text h2 { font-size: 2.5rem; }
|
||||
}
|
||||
|
||||
#contact-me {
|
||||
position: fixed;
|
||||
z-index: 299;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
-webkit-transition: transform .3s ease;
|
||||
-o-transition: transform .3s ease;
|
||||
transition: transform .3s ease;
|
||||
}
|
||||
|
||||
.gototop-active #contact-me {
|
||||
-webkit-transform: translateY(-50px);
|
||||
-ms-transform: translateY(-50px);
|
||||
-o-transform: translateY(-50px);
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
#header.sticky-header #header-wrap {
|
||||
-webkit-transition: left .4s ease;
|
||||
-o-transition: left .4s ease;
|
||||
transition: left .4s ease;
|
||||
}
|
||||
|
||||
body.side-panel-open #header.sticky-header #header-wrap { left: -300px; }
|
||||
|
||||
body #side-panel .widget {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.9);
|
||||
-ms-transform: scale(0.9);
|
||||
-o-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
-webkit-transition: transform .3s ease, opacity .3s ease;
|
||||
-o-transition: transform .3s ease, opacity .3s ease;
|
||||
transition: transform .3s ease, opacity .3s ease;
|
||||
}
|
||||
|
||||
body.side-panel-open #side-panel .widget {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 52px;
|
||||
left: 50%;
|
||||
margin-left: -25px;
|
||||
border-radius: 50%;
|
||||
color: #222 !important;
|
||||
background-color: #FFF;
|
||||
-webkit-transition: transform .3s ease;
|
||||
-o-transition: transform .3s ease;
|
||||
transition: transform .3s ease;
|
||||
}
|
||||
|
||||
.play-icon i {
|
||||
position: relative;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.play-icon:hover {
|
||||
-webkit-transform: scale(1.15);
|
||||
-ms-transform: scale(1.15);
|
||||
-o-transform: scale(1.15);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.arrow-box::after {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-right-color: #ffffff;
|
||||
border-width: 12px;
|
||||
margin-top: -12px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.arrow-box.right::after {
|
||||
left: 100%;
|
||||
border-right: 0;
|
||||
border-left-color: #ffffff;
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
background: #fff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
small {
|
||||
font-size: .66666667em;
|
||||
}
|
||||
a {
|
||||
color: #e74c3c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
box-shadow: 0 1px #e74c3c;
|
||||
}
|
||||
.bshadow0, input {
|
||||
box-shadow: inset 0 -2px #e7e7e7;
|
||||
}
|
||||
input:hover {
|
||||
box-shadow: inset 0 -2px #ccc;
|
||||
}
|
||||
input, fieldset {
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
input {
|
||||
color: inherit;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
padding: .25em 0;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 -2px #449fdb;
|
||||
}
|
||||
.glyph {
|
||||
font-size: 16px;
|
||||
width: 15em;
|
||||
padding-bottom: 1em;
|
||||
margin-right: 4em;
|
||||
margin-bottom: 1em;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.liga {
|
||||
width: 80%;
|
||||
width: calc(100% - 2.5em);
|
||||
}
|
||||
.talign-right {
|
||||
text-align: right;
|
||||
}
|
||||
.talign-center {
|
||||
text-align: center;
|
||||
}
|
||||
.bgc1 {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.fgc1 {
|
||||
color: #999;
|
||||
}
|
||||
.fgc0 {
|
||||
color: #000;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.mvm {
|
||||
margin-top: .75em;
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
.mtn {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mtl, .mal {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.mbl, .mal {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.mal, .mhl {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.mhmm {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.mls {
|
||||
margin-left: .25em;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
.pbs, .pvs {
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
.pvs, .pts {
|
||||
padding-top: .25em;
|
||||
}
|
||||
.unit {
|
||||
float: left;
|
||||
}
|
||||
.unitRight {
|
||||
float: right;
|
||||
}
|
||||
.size1of2 {
|
||||
width: 50%;
|
||||
}
|
||||
.size1of1 {
|
||||
width: 100%;
|
||||
}
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.hidden-true {
|
||||
display: none;
|
||||
}
|
||||
.textbox0 {
|
||||
width: 3em;
|
||||
background: #f1f1f1;
|
||||
padding: .25em .5em;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
}
|
||||
#testDrive {
|
||||
display: block;
|
||||
padding-top: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.fs0 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fs1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
if (!('boxShadow' in document.body.style)) {
|
||||
document.body.setAttribute('class', 'noBoxShadow');
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", function(e) {
|
||||
var target = e.target;
|
||||
if (target.tagName === "INPUT" &&
|
||||
target.getAttribute('class').indexOf('liga') === -1) {
|
||||
target.select();
|
||||
}
|
||||
});
|
||||
|
||||
(function() {
|
||||
var fontSize = document.getElementById('fontSize'),
|
||||
testDrive = document.getElementById('testDrive'),
|
||||
testText = document.getElementById('testText');
|
||||
function updateTest() {
|
||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||
if (window.icomoonLiga) {
|
||||
window.icomoonLiga(testDrive);
|
||||
}
|
||||
}
|
||||
function updateSize() {
|
||||
testDrive.style.fontSize = fontSize.value + 'px';
|
||||
}
|
||||
fontSize.addEventListener('change', updateSize, false);
|
||||
testText.addEventListener('input', updateTest, false);
|
||||
testText.addEventListener('change', updateTest, false);
|
||||
updateSize();
|
||||
}());
|
||||
|
|
@ -0,0 +1,694 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Car Icons</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="demo-files/demo.css">
|
||||
<link rel="stylesheet" href="style.css"></head>
|
||||
<body>
|
||||
<div class="bgc1 clearfix">
|
||||
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> car-icons <small class="fgc1">(Glyphs: 41)</small></h1>
|
||||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-asset">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-asset</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e900" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-battery">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-battery</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e901" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-bearing">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-bearing</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e902" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-board1">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-board1</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e903" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-care">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-care</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e904" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-cog">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-cog</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e905" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-cog3">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-cog3</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e906" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-cogs">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-cogs</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e907" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-cogs2">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-cogs2</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e908" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-crane">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-crane</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e909" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-door">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-door</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90a" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-fan">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-fan</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90b" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-fuel">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-fuel</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90c" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-fuel2">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-fuel2</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90d" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-fulltime">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-fulltime</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90e" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-machine">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-machine</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-meter">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-meter</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e910" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-money">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-money</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e911" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-note">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-note</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e912" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-note2">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-note2</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e913" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-paint">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-paint</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e914" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-pump">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-pump</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e915" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-service">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-service</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e916" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-service2">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-service2</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e917" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-signal">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-signal</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e918" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-signal2">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-signal2</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e919" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-stearing">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-stearing</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91a" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-tuning">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-tuning</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91b" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-wheel">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-wheel</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91c" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-alert">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-alert</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91d" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-cabriolet">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-cabriolet</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91e" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-cuv">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-cuv</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-hatchback">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-hatchback</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e920" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-micro">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-micro</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e921" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-minivan">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-minivan</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e922" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-pickup">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-pickup</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e923" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-sedan">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-sedan</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e924" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-supercar">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-supercar</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e925" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-suv">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-suv</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e926" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-truck">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-truck</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e927" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-car-van">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-car-van</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e928" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--[if gt IE 8]><!-->
|
||||
<div class="mhl clearfix mbl">
|
||||
<h1>Font Test Drive</h1>
|
||||
<label>
|
||||
Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
|
||||
min="8" value="48" />
|
||||
px
|
||||
</label>
|
||||
<input id="testText" type="text" class="phl size1of1 mvl"
|
||||
placeholder="Type some text to test..." value=""/>
|
||||
<div id="testDrive" class="icon-car-">
|
||||
</div>
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
<div class="bgc1 clearfix">
|
||||
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
|
||||
</div>
|
||||
|
||||
<script src="demo-files/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue