richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adds travel distance to button active state, fixing issues with uneven padding

pull/340/merge
jlukic 11 years ago
parent
75b047b7f4
commit
7995bd8150
4 changed files with 51 additions and 47 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      server/documents/modules/dropdown.html.eco
  2. 2
      server/layouts/default.html.eco
  3. 18
      src/elements/button.less
  4. 72
      src/global.variables

6
server/documents/modules/dropdown.html.eco
View File

@ -76,7 +76,7 @@ type : 'UI Module'
<p>A dropdown menu can appear to be floating below an element.</p>
<div class="ui teal buttons">
<div class="ui button">Save</div>
<div class="ui teal floating dropdown icon button">
<div class="ui floating dropdown icon button">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item"><i class="edit icon"></i>Edit Post</div>
@ -413,7 +413,7 @@ type : 'UI Module'
<p>A <a href="/elements/button.html">button</a> can be formatted with a dropdown</p>
<div class="ui teal buttons">
<div class="ui button">Update Post</div>
<div class="ui teal dropdown icon button">
<div class="ui dropdown icon button">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item"><i class="edit icon"></i>Edit Post</div>
@ -524,7 +524,7 @@ type : 'UI Module'
<p>A dropdown can have different <a href="/modules/transition.html">transitions</a>.</p>
<div class="ui teal buttons">
<div class="ui button">Toggle</div>
<div class="ui teal floating dropdown icon button">
<div class="ui floating dropdown icon button">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="horizontal flip">Horizontal Flip</div>

2
server/layouts/default.html.eco
View File

@ -61,7 +61,7 @@
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/accordion.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/dropdown.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/popup.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/reveal.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/reveal.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/rating.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/sidebar.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/shape.css">

18
src/elements/button.less
View File

@ -34,18 +34,18 @@
@fontWeight: bold;
@textColor: rgba(0, 0, 0, 0.6);
@borderRadius: 0.25em;
@shadowDistance: 0.133em;
@verticalPadding: 0.8em;
@horizontalPadding: 1.5em;
@compactVerticalPadding: (@verticalPadding * 0.75);
@compactHorizontalPadding: (@horizontalPadding * 0.75);
@borderRadius: 0.25em;
@backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
@shadowDistance: 0.133em;
@boxShadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
@ -106,7 +106,7 @@
color: @textColor;
margin: 0em;
padding: @verticalPadding @horizontalPadding ( @verticalPadding + (@shadowDistance / 2) );
padding: @verticalPadding @horizontalPadding ( @verticalPadding + @shadowDistance );
font-size: 1rem;
text-transform: @textTransform;
@ -161,6 +161,8 @@
.ui.active.button:active {
background-color: @downBackgroundColor;
background-image: @downBackgroundImage;
padding-top: (@verticalPadding + (@shadowDistance / 2));
padding-bottom: (@verticalPadding + (@shadowDistance / 2));
color: @selectedTextColor;
box-shadow: @downBoxShadow;
}
@ -173,6 +175,8 @@
.ui.active.button {
background-color: @activeBackgroundColor;
background-image: @activeBackgroundImage;
padding-top: (@verticalPadding + (@shadowDistance / 2));
padding-bottom: (@verticalPadding + (@shadowDistance / 2));
box-shadow: @activeBoxShadow;
color: @textColor;
}
@ -533,11 +537,11 @@
.ui.compact.buttons .button,
.ui.compact.button {
padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + (@shadowDistance / 2) );
padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowDistance );
}
.ui.compact.icon.buttons .button,
.ui.compact.buttons .icon.button {
padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + (@shadowDistance / 2) );
padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowDistance );
}
@ -631,7 +635,7 @@
.ui.icon.buttons .button,
.ui.icon.button {
padding: @verticalPadding @verticalPadding ( @verticalPadding + (@shadowDistance / 2) );
padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowDistance );
}
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {

72
src/global.variables
View File

@ -251,44 +251,44 @@
--------------------*/
/*--- Standard ---*/
@primaryColorActive : lighten(@primaryColor, 10);
@secondaryColorActive : lighten(@secondaryColor, 10);
@tertiaryColorActive : lighten(@tertiaryColor, 10);
@blueActive : lighten(@blue, 10);
@greenActive : lighten(@green, 10);
@orangeActive : lighten(@orange, 10);
@pinkActive : lighten(@pink, 10);
@purpleActive : lighten(@purple, 10);
@redActive : lighten(@red, 10);
@tealActive : lighten(@teal, 10);
@yellowActive : lighten(@yellow, 10);
@primaryColorActive : darken(@primaryColor, 10);
@secondaryColorActive : darken(@secondaryColor, 10);
@tertiaryColorActive : darken(@tertiaryColor, 10);
@blueActive : darken(@blue, 10);
@greenActive : darken(@green, 10);
@orangeActive : darken(@orange, 10);
@pinkActive : darken(@pink, 10);
@purpleActive : darken(@purple, 10);
@redActive : darken(@red, 10);
@tealActive : darken(@teal, 10);
@yellowActive : darken(@yellow, 10);
/*--- Emotive ---*/
@positiveColorActive : lighten(@positiveColor, 10);
@negativeColorActive : lighten(@negativeColor, 10);
@positiveColorActive : darken(@positiveColor, 10);
@negativeColorActive : darken(@negativeColor, 10);
@infoColorActive : lighten(@infoColor, 10);
@warningColorActive : lighten(@warningColor, 10);
@errorColorActive : lighten(@errorColor, 10);
@infoColorActive : darken(@infoColor, 10);
@warningColorActive : darken(@warningColor, 10);
@errorColorActive : darken(@errorColor, 10);
/*--- Neutrals ---*/
@darkBlackActive : lighten(@darkBlack, 10);
@blackActive : lighten(@black, 10);
@lightBlackActive : lighten(@lightBlack, 10);
@lightGreyActive : lighten(@lightGrey, 10);
@greyActive : lighten(@grey, 10);
@darkGreyActive : lighten(@darkGrey, 10);
@whiteActive : lighten(@white, 10);
@offWhiteActive : lighten(@offWhite, 10);
@darkWhiteActive : lighten(@darkWhite, 10);
@facebookActiveColor : lighten(@facebookColor, 10);
@twitterActiveColor : lighten(@twitterColor, 10);
@googlePlusActiveColor : lighten(@googlePlusColor, 10);
@linkedInActiveColor : lighten(@linkedInColor, 10);
@youtubeActiveColor : lighten(@youtubeColor, 10);
@instagramActiveColor : lighten(@instagramColor, 10);
@pinterestActiveColor : lighten(@pinterestColor, 10);
@darkBlackActive : darken(@darkBlack, 10);
@blackActive : darken(@black, 10);
@lightBlackActive : darken(@lightBlack, 10);
@lightGreyActive : darken(@lightGrey, 10);
@greyActive : darken(@grey, 10);
@darkGreyActive : darken(@darkGrey, 10);
@whiteActive : darken(@white, 10);
@offWhiteActive : darken(@offWhite, 10);
@darkWhiteActive : darken(@darkWhite, 10);
@facebookActiveColor : darken(@facebookColor, 10);
@twitterActiveColor : darken(@twitterColor, 10);
@googlePlusActiveColor : darken(@googlePlusColor, 10);
@linkedInActiveColor : darken(@linkedInColor, 10);
@youtubeActiveColor : darken(@youtubeColor, 10);
@instagramActiveColor : darken(@instagramColor, 10);
@pinterestActiveColor : darken(@pinterestColor, 10);
Write Preview
Loading…
Cancel
Save