Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

New style for buttons

  • Loading branch information...
commit c5c8eee1a614c61b916059c6aeac7826c6ec2d70 1 parent 699a440
@soyjavi soyjavi authored
View
11 examples/test/index.html
@@ -39,7 +39,11 @@
<body class="app">
<section id="test-1" class="pop">
<header data-title="Test-1" class="extended">
- <a href="#kitchen-sink-scroll" class="button onleft" data-target="aside" data-icon="items"></a>
+ <div class="onleft">
+ <a href="#kitchen-sink-scroll" class="button default onleft" data-target="aside" data-icon="items"></a>
+ <a href="#kitchen-sink-scroll" class="button onleft" data-target="aside" data-icon="items">Prueba</a>
+ <a href="#kitchen-sink-scroll" class="button onleft" data-target="aside">Prueba</a>
+ </div>
<nav class="onright">
<a href="#" class="active" data-icon="star"></a>
<a href="#profiles" class="active" data-target="aside" data-icon="plus">&nbsp;Add</a>
@@ -52,7 +56,7 @@
<a href="#nav-2" data-target="article" data-icon="calendar">&nbsp;Calendar</a>
</nav>
-<!--
+ <!--
<footer class="toolbar with-labels">
<nav>
<a href="#nav-1" data-target="article" data-icon="clock" data-label="Alarm"></a>
@@ -60,7 +64,8 @@
<a href="#nav-3" data-target="article" data-icon="mail" data-label="Emails" data-count="124"></a>
<a href="#nav-4" data-target="article" data-icon="phone" data-label="Calls" data-count="12"></a>
</nav>
- </footer> -->
+ </footer>
+ -->
<footer class="toolbar">
<nav>
View
7 src/stylesheets/css/Lungo.theme.default.css
@@ -263,15 +263,12 @@ section.aside.onright {
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
- -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), inset 0 -3px 0 rgba(255, 255, 255, 0.05);
+ -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.25), inset 0 -3px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.3);
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
-.button.big {
- -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), inset 0 -3px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.3);
-}
.button:active {
- -webkit-box-shadow: inset 0 29px 8px rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
.button.default {
background: #5a5a5a;
View
2  src/stylesheets/css/Lungo.widgets.button.css
@@ -1 +1 @@
-a.button{display:inline-block;height:30px;padding:0 9px 0 8px;color:#fff!important;outline:0;background:#5a5a5a;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;line-height:31px;text-align:center;text-decoration:none}a.button:active,a.button.active{background:#4b4b4b}a.button:disabled,a.button.disabled{background:rgba(255,255,255,0.2);color:#999!important}a.button .icon{position:relative;top:3px;height:16px;width:16px;font-size:22px;line-height:17px}a.button img{top:0!important}a.button.big{width:100%;height:40px;padding:0;margin-bottom:4px;font-size:16px;line-height:42px}a.button.big .icon{margin-right:4px;font-size:24px;height:18px;width:18px}
+a.button{display:inline-block;height:32px;padding:0 9px 0 8px;color:#fff!important;outline:0;background:#5a5a5a;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;line-height:31px;text-align:center;text-decoration:none}a.button:active,a.button.active{background:#4b4b4b}a.button:disabled,a.button.disabled{background:rgba(255,255,255,0.2);color:#999!important}a.button .icon{position:relative;top:3px;height:16px;width:16px;font-size:22px;line-height:17px}a.button img{top:0!important}a.button.big{width:100%;height:40px;padding:0;margin-bottom:4px;font-size:16px;line-height:42px}a.button.big .icon{margin-right:4px;font-size:24px;height:18px;width:18px}
View
10 src/stylesheets/less/Lungo.theme.default.less
@@ -248,14 +248,14 @@ section.aside {
/* @group .button */
.button {
.border-radius(@border-radius);
- -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05);
-
+ -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3);
+
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
- &.big { -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3); }
-
- &:active { -webkit-box-shadow: inset 0 29px 8px rgba(0,0,0,0.1); }
+ &:active {
+ -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
+ }
&.default {
background: #5a5a5a;
View
3  src/stylesheets/less/Lungo.widgets.button.less
@@ -12,7 +12,8 @@
a.button {
display: inline-block;
- height: 30px;
+ height: 32px;
+ //min-width: 32px;
padding: 0 9px 0 8px;
color: #fff !important;
outline: none;
Please sign in to comment.
Something went wrong with that request. Please try again.