Skip to content

Commit

Permalink
feat(buttons): more v2 like buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlynch
mlynch committed Dec 9, 2015
1 parent e22c5ac commit 21e54be
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 4 deletions.
6 changes: 3 additions & 3 deletions scss/_mixins.scss
View file
Expand Up @@ -3,7 +3,7 @@
// --------------------------------------------------

@mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
border-color: $border-color;
border-color: transparent;//$border-color;
background-color: $bg-color;
color: $color;

Expand All @@ -14,9 +14,9 @@
}
&.active,
&.activated {
border-color: $active-border-color;
//border-color: transparent;//$active-border-color;
background-color: $active-bg-color;
box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
//box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
}
}

Expand Down
2 changes: 1 addition & 1 deletion scss/_variables.scss
View file
Expand Up @@ -69,7 +69,7 @@ $scroll-refresh-icon-color: #666666 !default;
$button-color: #222 !default;
$button-block-margin: 10px !default;
$button-clear-padding: 6px !default;
$button-border-radius: 2px !default;
$button-border-radius: 4px !default;
$button-border-width: 1px !default;

$button-font-size: 16px !default;
Expand Down
30 changes: 30 additions & 0 deletions test/css/buttons.html
View file
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html ng-app="ionic">
<head>
<script src="../../dist/js/ionic.bundle.js"></script>
<meta charset="utf-8">
<title>Buttons</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="../../dist/css/ionic.css" rel="stylesheet">
<style>
body {
position: absolute;;
}
</style>
</head>
<body>

<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: borderless</h1>
</header>

<div class="content has-header">

<button class="button button-primary">Hello</button>
<button class="button button-assertive">Hello</button>
<button class="button button-stable">Hello</button>
<button class="button button-calm">Hello</button>
</div>

</body>
</html>

6 comments on commit 21e54be

@gness
Copy link

@gness gness commented on 21e54be Dec 31, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could someone please explain the reasons behind the modification in the @mixin button-style? The mixin is accepting @border-color and @active-border-color variables but they are ignored inside the mixin by using hardcoded transparent color instead. This setup makes creating bordered buttons a real struggle. You would basically have to redefine the styles to all the button variations (default, hover and active) if the default button is designed to have a border. If the new v2 default look of the buttons should be without the borders, wouldn't it be a more flexible solution if the Ionic variables such as $button-light-border and $button-light-active-border (and other moods) would be set to transparent and in the mixin they'd be used as before: border-color: $border-color;? This way if a design requires it, one could redefine those variables in their custom css. If not, the default transparent value defined in ionic variables would be used.

@mlynch
Copy link
Contributor Author

@mlynch mlynch commented on 21e54be Dec 31, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea I could do something like that. Watch for the next relesae

@alexkb
Copy link

@alexkb alexkb commented on 21e54be Jan 10, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The docs are still showing buttons with borders, yet this commit that removes the borders is part of the stable 1.2.1 version. Do you need to update your docs, or have I missed something here. Thanks.

@beatgrabe
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexkb +1

@santimacia
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When is the next release, the buttons now are almost invisible, same with button bar.

@joeljameswatson
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've logged this as an issue here

#5576

Please sign in to comment.