playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Adding basic alerts. Inline ones too.

pull/231/head
connors 11 years ago
parent
cea7a11a2e
commit
847fc1d3c4
3 changed files with 180 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      dist/ratchet.css
  2. 262
      examples/app-default/index.html
  3. 23
      lib/sass/alerts.scss

24
dist/ratchet.css vendored
Unescape View File

@ -993,6 +993,30 @@ input[type="button"] {
background-color: rgba(0, 0, 0, 0.15); 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 { .modal {
position: fixed; position: fixed;
top: 0; top: 0;

262
examples/app-default/index.html
Unescape View File

@ -18,143 +18,147 @@
</head> </head>
<body> <body>
<header class="bar-nav"> <!-- Alert -->
<h1 class="title">Movie finder</h1> <div class="alert alert-negative">
</header> <strong>This</strong> is an alert.
<nav class="bar-standard bar-header-secondary"> </div>
<form>
<input type="search" placeholder="Search"> <header class="bar-nav">
</form> <h1 class="title">Movie finder</h1>
</nav> </header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<nav class="bar-tab"> <nav class="bar-tab">
<ul class="tab-inner"> <ul class="tab-inner">
<li class="tab-item active"> <li class="tab-item active">
<a href="index.html" data-transition="fade"> <a href="index.html" data-transition="fade">
<span class="icon icon-share"></span> <span class="icon icon-share"></span>
<div class="tab-label">Movies</div> <div class="tab-label">Movies</div>
</a> </a>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<a href="theaters.html" data-transition="fade"> <a href="theaters.html" data-transition="fade">
<span class="icon icon-pages"></span> <span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div> <div class="tab-label">Theaters</div>
</a> </a>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<a href="settings.html" data-transition="fade"> <a href="settings.html" data-transition="fade">
<span class="icon icon-sound"></span> <span class="icon icon-sound"></span>
<div class="tab-label">Settings</div> <div class="tab-label">Settings</div>
</a> </a>
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="content"> <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>
<div class="slider"> <ul class="table-view">
<ul> <li class="table-view-cell table-view-divider">Recommended movies</li>
<li> <li class="table-view-cell">
<img src="img/argo.png"> <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>
<li> <li class="table-view-cell table-view-divider">Top movies</li>
<img src="img/skyfall.png"> <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>
<li> <li class="table-view-cell">
<img src="img/ralph.png"> <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> </li>
</ul> </ul>
</div> </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> </body>
</html> </html>

23
lib/sass/alerts.scss
Unescape View File

@ -3,5 +3,28 @@
// -------------------------------------------------- // --------------------------------------------------
.alert { .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;
} }

Write Preview
Loading…
Cancel
Save