Commit 972abd11 authored by Pietro Albini's avatar Pietro Albini

buttons: add

parent e3adcca7
...@@ -240,6 +240,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. ...@@ -240,6 +240,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</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> <footer>
<p> <p>
Ubuntu e Canonical sono marchi registrati da Canonical Ubuntu e Canonical sono marchi registrati da Canonical
......
/* 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 @@ ...@@ -17,6 +17,8 @@
@import "variables"; @import "variables";
@import "base"; @import "base";
@import "buttons";
@import "cookiepolicy"; @import "cookiepolicy";
@import "navbar"; @import "navbar";
@import "page"; @import "page";
......
Markdown is supported
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