Skip to content
Snippets Groups Projects
Commit 2d0d3e0b authored by btalhaoui's avatar btalhaoui
Browse files

Beginning of the mockup

parent aa0f4751
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Mockup/Server.html 0 → 100644
+ 55
− 0
View file @ 2d0d3e0b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="/home/bilal/Pingendo/Monitoring/theme.css"> </head>
<body>
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"><i class="fa d-inline fa-lg fa-line-chart"></i><b>Monitoring</b></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false"
aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-bookmark-o"></i>&nbsp;My organizations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i>&nbsp;Notifications</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="py-5">
<div class="container bg-light py-2">
<div class="row bg-primary my-1">
<div class="col-md-12">
<h3 class="display py-1">Server name</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-group">
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo">Simple collapsible<span class="badge badge-primary badge-pill">1</span></button>
<div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing 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. </div>
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo2">Simple collapsible<span class="badge badge-primary badge-pill">1</span></button>
<div id="demo2" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing 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. </div>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
Mockup/index.html 0 → 100644
+ 166
− 0
View file @ 2d0d3e0b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css"> </head>
<body>
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"><i class="fa d-inline fa-lg fa-line-chart"></i><b>Monitoring</b></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false"
aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-bookmark-o"></i>&nbsp;My organizations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i>&nbsp;Notifications</a>
</li>
</ul>
<a class="btn navbar-btn ml-2 text-white btn-secondary"><i class="fa d-inline fa-lg fa-user-circle-o"></i> Sign in</a>
</div>
</div>
</nav>
<div class="py-5">
<div class="container bg-light">
<div class="row bg-primary">
<div class="col-md-12">
<h3 class="display-5">Dashboard</h3>
</div>
</div>
<div class="row my-1">
<div class="col-md-3">
<div class="card border">
<div class="card-header"> Organization 1</div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Reboot needed</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space ok
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
<div class="card-body">
<h4>Server 2</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Reboot needed</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header"> Organization 2</div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Reboot</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header"> Oganization 3</div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Reboot</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header"> Organization 4</div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;OK</h6>
<p><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Free space :&lt;10%</p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
</div>
<div class="row my-1">
<div class="col-md-3">
<div class="card border">
<div class="card-header"> Organization 5</div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Reboot needed</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space ok
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
<div class="card-body">
<h4>Server 2</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Reboot needed</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header"> Organization 6</div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Reboot</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header"> Oganization 7</div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Reboot</h6>
<p><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;Free space
<br>
<br> </p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header"> Organization 4</div>
<div class="card-body">
<h4>Server 1</h4>
<h6 class="text-muted"><i class="fa d-inline fa-lg fa-circle text-success"></i>&nbsp;OK</h6>
<p><i class="fa d-inline fa-lg fa-exclamation-circle text-danger"></i>&nbsp;Free space :&lt;10%</p>
<a class="btn btn-secondary" href="#">Go to details</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
Mockup/organizations.html 0 → 100644
+ 120
− 0
View file @ 2d0d3e0b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="/home/bilal/Pingendo/Monitoring/theme.css">
</head>
<body>
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"><i class="fa d-inline fa-lg fa-line-chart"></i><b>Monitoring</b></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false"
aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-bookmark-o"></i>&nbsp;My organizations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i>&nbsp;Notifications</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="py-5">
<div class="container bg-light">
<div class="row bg-primary my-1">
<div class="col-md-12">
<h3 class="display py-1">My organizations</h3>
</div>
</div>
<div class="row">
<div class="col-md-6 p-2">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 1</h5> <small>3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 2</h5> <small class="text-muted">3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 1</h5> <small>3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 2</h5> <small class="text-muted">3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 1</h5> <small>3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 2</h5> <small class="text-muted">3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 1</h5> <small>3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 2</h5> <small class="text-muted">3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a>
</div>
</div>
<div class="col-md-6 p-2">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 1</h5> <small>3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 2</h5> <small class="text-muted">3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 1</h5> <small>3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 2</h5> <small class="text-muted">3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 1</h5> <small>3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 2</h5> <small class="text-muted">3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 1</h5> <small>3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Oganization 2</h5> <small class="text-muted">3 days ago</small> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
Mockup/styleguide.html 0 → 100644
+ 612
− 0
View file @ 2d0d3e0b
This diff is collapsed.
Mockup/theme.css 0 → 100644
+ 6180
− 0
View file @ 2d0d3e0b
This diff is collapsed.
Mockup/theme.scss 0 → 100644
+ 148
− 0
View file @ 2d0d3e0b
/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com)
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #333,
secondary: #4f70ce,
light: #f3f3f3,
dark: #151515,
info: #ccc,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: white;
$body-color: #333;
$body-color-inverse: invert($body-color) !default;
$link-color: #FFF;
// Fonts
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$headings-font-family: $font-family-base;
$display-font-family: $font-family-base;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.cover {
min-height:100%;
display:flex;
align-items:center
}
.bg-gradient {
overflow: hidden;
color: color-yiq(map-get($theme-colors, 'primary'));
background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);
}
.filter-dark {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'dark'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
.filter-color {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'primary'), 0.75);
}
}
.filter-gradient {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);
}
}
.filter-fade-in {
overflow: hidden;
position: relative;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));
}
}
@media (min-width: 1200px) {
.container{
max-width: 970px;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment