javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Mixins and buttons done

Browse Source
This commit is contained in:
Max Lynch
2013-08-23 17:49:50 -05:00
parent 85f0963c65
commit 628703969b
6 changed files with 180 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
dist/framework-with-theme.css vendored
View File

@ -188,13 +188,79 @@ a.list-item:hover, a.list-item:focus {
.button { .button {
color: #222222; color: #222222;
border-radius: 2px; border-radius: 2px;
padding: 10px 10px; } border-width: 1px;
border-style: solid;
padding: 10px 15px; }
.button-default { .button-default {
background-color: white; background-color: white;
border: 1px solid #dddddd; } border-color: #dddddd; }
.button-default:hover {
background-color: white; }
.button-default:active { .button-default:active {
background-color: #eeeeee; } background-color: #e6e6e6; }
.button-secondary {
background-color: whitesmoke;
border-color: #cccccc; }
.button-secondary:hover {
background-color: white; }
.button-secondary:active {
background-color: gainsboro; }
.button-primary {
color: white;
background-color: #6999e9;
border-color: #5981c5; }
.button-primary:hover {
background-color: #95b7f0; }
.button-primary:active {
background-color: #3d7be2; }
.button-info {
color: white;
background-color: #60d2e6;
border-color: #51b3c4; }
.button-info:hover {
background-color: #8cdeed; }
.button-info:active {
background-color: #34c6df; }
.button-success {
color: white;
background-color: #89c163;
border-color: #71a052; }
.button-success:hover {
background-color: #a5d087; }
.button-success:active {
background-color: #6fac45; }
.button-warning {
color: white;
background-color: #f0b840;
border-color: #cf9a29; }
.button-warning:hover {
background-color: #f4ca6f; }
.button-warning:active {
background-color: #eba612; }
.button-danger {
color: white;
background-color: #de5645;
border-color: #bc4435; }
.button-danger:hover {
background-color: #e67d70; }
.button-danger:active {
background-color: #cc3724; }
.button-dark {
color: white;
background-color: #444444;
border-color: #111111; }
.button-dark:hover {
background-color: #5e5e5e; }
.button-dark:active {
background-color: #2b2b2b; }
.list-divider { .list-divider {
background-color: whitesmoke; background-color: whitesmoke;

51
example/buttons.html
View File

@ -1,29 +1,48 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="../dist/framework-structure.css"> <meta charset="utf-8">
<link rel="stylesheet" href="../dist/framework-theme-default.css"> <title>Example</title>
<title>Buttons</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="">
<!-- Set Apple icons for when prototype is saved to home screen -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../dist/framework-with-theme.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
</head> </head>
<body> <body>
<header class="bar-header"> <header class="bar bar-header bar-dark">
<a class="button-prev" data-history-go="-1" href="#">
Previous
</a>
<h1 class="title">Willkommen!</h1> <h1 class="title">Willkommen!</h1>
</header> </header>
<main class="content">
<main>
<p> <p>
<a class="button button-default" href="grid.html">Grid</a> <a class="button button-default" href="grid.html">Default</a>
</p> <a class="button button-secondary" href="index.html">Secondary</a>
<p> <a class="button button-primary" href="listview.html">Primary</a>
<a class="button button-primary" href="listview.html">List View</a> <a class="button button-info" href="index.html">Info</a>
</p> <a class="button button-success" href="index.html">Success</a>
<p> <a class="button button-warning" href="index.html">Warning</a>
<a class="button button-secondary" href="index.html">Home</a> <a class="button button-danger" href="index.html">Danger</a>
<a class="button button-dark" href="index.html">Dark</a>
</p> </p>
</main> </main>

2
scss/framework-structure.scss
View File

@ -4,6 +4,8 @@
// Components // Components
@import @import
"framework/structure/variables", "framework/structure/variables",
"framework/structure/mixins",
"framework/structure/base", "framework/structure/base",
"framework/structure/bar", "framework/structure/bar",
"framework/structure/button", "framework/structure/button",

12
scss/framework/structure/_mixins.scss Normal file
View File

@ -0,0 +1,12 @@
@mixin button-style($bgColor, $borderColor) {
background-color: $bgColor;
border-color: $borderColor;
// Give desktop users something to play with
&:hover {
background-color: lighten($bgColor, 10%);
}
&:active {
background-color: darken($bgColor, 10%);
}
}

36
scss/framework/theme/default/_button.scss
View File

@ -1,15 +1,39 @@
.button { .button {
color: $buttonColor; color: $buttonColor;
border-radius: $buttonBorderRadius; border-radius: $buttonBorderRadius;
border-width: $buttonBorderWidth;
border-style: solid;
padding: $buttonPadding; padding: $buttonPadding;
} }
.button-default { .button-default {
background-color: $buttonDefaultBackground; @include button-style($buttonDefaultBackground, $buttonDefaultBorder);
border: $buttonBorderWidth solid $buttonDefaultBorder;
&:active {
background-color: $buttonDefaultBackgroundActive;
} }
.button-secondary {
@include button-style($buttonSecondaryBackground, $buttonSecondaryBorder);
}
.button-primary {
color: $lightColor;
@include button-style($buttonPrimaryBackground, $buttonPrimaryBorder);
}
.button-info {
color: $lightColor;
@include button-style($buttonInfoBackground, $buttonInfoBorder);
}
.button-success {
color: $lightColor;
@include button-style($buttonSuccessBackground, $buttonSuccessBorder);
}
.button-warning {
color: $lightColor;
@include button-style($buttonWarningBackground, $buttonWarningBorder);
}
.button-danger {
color: $lightColor;
@include button-style($buttonDangerBackground, $buttonDangerBorder);
}
.button-dark {
color: $lightColor;
@include button-style($buttonDarkBackground, $buttonDarkBorder);
} }

31
scss/framework/theme/default/_variables.scss
View File

@ -5,7 +5,7 @@ $darkColor: #333;
// //
// Buttons // Buttons
$buttonColor: #222; $buttonColor: #222;
$buttonPadding: 10px 10px; $buttonPadding: 10px 15px;
$buttonBorderRadius: 2px; $buttonBorderRadius: 2px;
$buttonBorderWidth: 1px; $buttonBorderWidth: 1px;
@ -13,6 +13,35 @@ $buttonDefaultBackground: #fff;
$buttonDefaultBackgroundActive: #eee; $buttonDefaultBackgroundActive: #eee;
$buttonDefaultBorder: #ddd; $buttonDefaultBorder: #ddd;
$buttonSecondaryBackground: #f5f5f5;
$buttonSecondaryBackgroundActive: #eee;
$buttonSecondaryBorder: #ccc;
$buttonPrimaryBackground: #6999e9;
$buttonPrimaryBackgroundActive: #eee;
$buttonPrimaryBorder: #5981c5;
$buttonInfoBackground: #60d2e6;
$buttonInfoBackgroundActive: #eee;
$buttonInfoBorder: #51b3c4;
$buttonSuccessBackground: #89c163;
$buttonSuccessBackgroundActive: #eee;
$buttonSuccessBorder: #71a052;
$buttonWarningBackground: #f0b840;
$buttonWarningBackgroundActive: #eee;
$buttonWarningBorder: #cf9a29;
$buttonDangerBackground: #de5645;
$buttonDangerBackgroundActive: #eee;
$buttonDangerBorder: #bc4435;
$buttonDarkBackground: #444;
$buttonDarkBackgroundActive: #eee;
$buttonDarkBorder: #111;
// //
// Bars // Bars