Adding basic alerts. Inline ones too.
This commit is contained in:
Родитель
cea7a11a2e
Коммит
847fc1d3c4
|
@ -993,6 +993,30 @@ input[type="button"] {
|
|||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.alert {
|
||||
position: fixed;
|
||||
right: 15px;
|
||||
left: 15px;
|
||||
bottom: 65px;
|
||||
padding: 15px;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.alert-positive {
|
||||
background-color: rgba(76, 217, 100, 0.97);
|
||||
}
|
||||
|
||||
.alert-negative {
|
||||
background-color: rgba(221, 82, 77, 0.97);
|
||||
}
|
||||
|
||||
.alert-inline {
|
||||
position: static;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
|
@ -18,143 +18,147 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<header class="bar-nav">
|
||||
<h1 class="title">Movie finder</h1>
|
||||
</header>
|
||||
<nav class="bar-standard bar-header-secondary">
|
||||
<form>
|
||||
<input type="search" placeholder="Search">
|
||||
</form>
|
||||
</nav>
|
||||
<!-- Alert -->
|
||||
<div class="alert alert-negative">
|
||||
<strong>This</strong> is an alert.
|
||||
</div>
|
||||
|
||||
<nav class="bar-tab">
|
||||
<ul class="tab-inner">
|
||||
<li class="tab-item active">
|
||||
<a href="index.html" data-transition="fade">
|
||||
<span class="icon icon-share"></span>
|
||||
<div class="tab-label">Movies</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<a href="theaters.html" data-transition="fade">
|
||||
<span class="icon icon-pages"></span>
|
||||
<div class="tab-label">Theaters</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<a href="settings.html" data-transition="fade">
|
||||
<span class="icon icon-sound"></span>
|
||||
<div class="tab-label">Settings</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header class="bar-nav">
|
||||
<h1 class="title">Movie finder</h1>
|
||||
</header>
|
||||
<nav class="bar-standard bar-header-secondary">
|
||||
<form>
|
||||
<input type="search" placeholder="Search">
|
||||
</form>
|
||||
</nav>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="slider">
|
||||
<ul>
|
||||
<li>
|
||||
<img src="img/argo.png">
|
||||
<nav class="bar-tab">
|
||||
<ul class="tab-inner">
|
||||
<li class="tab-item active">
|
||||
<a href="index.html" data-transition="fade">
|
||||
<span class="icon icon-share"></span>
|
||||
<div class="tab-label">Movies</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="img/skyfall.png">
|
||||
<li class="tab-item">
|
||||
<a href="theaters.html" data-transition="fade">
|
||||
<span class="icon icon-pages"></span>
|
||||
<div class="tab-label">Theaters</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="img/ralph.png">
|
||||
<li class="tab-item">
|
||||
<a href="settings.html" data-transition="fade">
|
||||
<span class="icon icon-sound"></span>
|
||||
<div class="tab-label">Settings</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="content">
|
||||
<div class="slider">
|
||||
<ul>
|
||||
<li>
|
||||
<img src="img/argo.png">
|
||||
</li>
|
||||
<li>
|
||||
<img src="img/skyfall.png">
|
||||
</li>
|
||||
<li>
|
||||
<img src="img/ralph.png">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="table-view">
|
||||
<li class="table-view-cell table-view-divider">Recommended movies</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Argo</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Skyfall: 007</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Wreck-it Ralph</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell table-view-divider">Top movies</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 4</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 5</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 6</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 7</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 8</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 9</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 10</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 11</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 12</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="table-view">
|
||||
<li class="table-view-cell table-view-divider">Recommended movies</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Argo</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Skyfall: 007</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Wreck-it Ralph</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell table-view-divider">Top movies</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 4</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 5</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 6</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 7</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 8</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 9</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 10</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 11</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a href="choose-theater.html" data-transition="slide-in">
|
||||
<strong>Movie 12</strong>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -3,5 +3,28 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
.alert {
|
||||
|
||||
position: fixed;
|
||||
right: 15px;
|
||||
left: 15px;
|
||||
bottom: $bar-tab-height + 15px;
|
||||
padding: 15px;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// Positive alert (Default color is green)
|
||||
.alert-positive {
|
||||
background-color: transparentize($positive-color, .03);
|
||||
}
|
||||
|
||||
// Negative alert (Default color is red)
|
||||
.alert-negative {
|
||||
background-color: transparentize($negative-color, .03);
|
||||
}
|
||||
|
||||
// Inline alert
|
||||
.alert-inline {
|
||||
position: static;
|
||||
margin: 15px;
|
||||
}
|
||||
|
|
Загрузка…
Ссылка в новой задаче