...
 
Commits (2)
......@@ -96,7 +96,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti
corporis <code>libero</code> a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur. Velit minus aut et
voluptatem. Dolorem explicabo commodi ullam in iusto
......@@ -240,6 +240,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
<div class="page">
<div class="row">
<div class="col">
<h1>Bottoni</h1>
<p>
Per utilizzare i bottoni basta applicare la classe
<code>.btn</code>, e <code>.btn-inverse</code> per
i bottoni inversi.
</p>
<div>
<a href="#" class="btn">Test button</a>
<a href="#" class="btn btn-inverse">Test button</a>
</div>
<div>
<button class="btn">Test button</button>
<button class="btn btn-inverse">Test button</button>
</div>
</div>
</div>
</div>
<footer>
<p>
Ubuntu e Canonical sono marchi registrati da Canonical
......
......@@ -47,6 +47,19 @@ a {
}
}
pre, code {
background: mix(#fff, $color_orange, 90%);
border-radius: 0.3em;
}
pre {
padding: 1em;
}
code {
padding: 0.3em;
}
.container {
max-width: $page_size;
margin: auto;
......
/* Copyright (C) 2018 Pietro Albini <pietroalbini@ubuntu.com>
*
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU Affero General Public License as published by the
* Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
* for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
.btn {
user-select: none;
display: inline-block;
margin: 0.3em;
padding: 0.4em 0.8em;
border: 0;
border-radius: 0.2em;
font-size: 1em;
font-weight: 300;
font-family: 'Ubuntu';
line-height: 1.4em;
background: $color_orange;
color: #fff;
cursor: pointer;
transition: background 0.1s ease-out;
// Fix for Firefox
&::-moz-focus-inner {
padding: 0;
border: 0;
}
&:hover {
background: mix(#fff, $color_orange, 20%);
text-decoration: none;
}
&.btn-inverse {
background: #fff;
color: $color_orange;
&:hover {
background: mix(#fff, $color_warm_gray, 80%);
}
}
}
......@@ -17,6 +17,8 @@
@import "variables";
@import "base";
@import "buttons";
@import "cookiepolicy";
@import "navbar";
@import "page";
......