mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
Mixins and buttons done
This commit is contained in:
Max Lynch
72
dist/framework-with-theme.css
vendored
72
dist/framework-with-theme.css
vendored
@ -188,13 +188,79 @@ a.list-item:hover, a.list-item:focus {
|
||||
.button {
|
||||
color: #222222;
|
||||
border-radius: 2px;
|
||||
padding: 10px 10px; }
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
padding: 10px 15px; }
|
||||
|
||||
.button-default {
|
||||
background-color: white;
|
||||
border: 1px solid #dddddd; }
|
||||
border-color: #dddddd; }
|
||||
.button-default:hover {
|
||||
background-color: white; }
|
||||
.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 {
|
||||
background-color: whitesmoke;
|
||||
|
||||
@ -1,29 +1,48 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../dist/framework-structure.css">
|
||||
<link rel="stylesheet" href="../dist/framework-theme-default.css">
|
||||
<title>Buttons</title>
|
||||
<meta charset="utf-8">
|
||||
<title>Example</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>
|
||||
<body>
|
||||
|
||||
|
||||
<header class="bar-header">
|
||||
<a class="button-prev" data-history-go="-1" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Willkommen!</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<main class="content">
|
||||
<p>
|
||||
<a class="button button-default" href="grid.html">Grid</a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="button button-primary" href="listview.html">List View</a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="button button-secondary" href="index.html">Home</a>
|
||||
<a class="button button-default" href="grid.html">Default</a>
|
||||
<a class="button button-secondary" href="index.html">Secondary</a>
|
||||
<a class="button button-primary" href="listview.html">Primary</a>
|
||||
<a class="button button-info" href="index.html">Info</a>
|
||||
<a class="button button-success" href="index.html">Success</a>
|
||||
<a class="button button-warning" href="index.html">Warning</a>
|
||||
<a class="button button-danger" href="index.html">Danger</a>
|
||||
<a class="button button-dark" href="index.html">Dark</a>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
// Components
|
||||
@import
|
||||
"framework/structure/variables",
|
||||
"framework/structure/mixins",
|
||||
|
||||
"framework/structure/base",
|
||||
"framework/structure/bar",
|
||||
"framework/structure/button",
|
||||
|
||||
12
scss/framework/structure/_mixins.scss
Normal file
12
scss/framework/structure/_mixins.scss
Normal 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%);
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,39 @@
|
||||
|
||||
.button {
|
||||
color: $buttonColor;
|
||||
border-radius: $buttonBorderRadius;
|
||||
border-width: $buttonBorderWidth;
|
||||
border-style: solid;
|
||||
padding: $buttonPadding;
|
||||
|
||||
}
|
||||
|
||||
.button-default {
|
||||
background-color: $buttonDefaultBackground;
|
||||
border: $buttonBorderWidth solid $buttonDefaultBorder;
|
||||
|
||||
&:active {
|
||||
background-color: $buttonDefaultBackgroundActive;
|
||||
@include button-style($buttonDefaultBackground, $buttonDefaultBorder);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
@ -5,7 +5,7 @@ $darkColor: #333;
|
||||
//
|
||||
// Buttons
|
||||
$buttonColor: #222;
|
||||
$buttonPadding: 10px 10px;
|
||||
$buttonPadding: 10px 15px;
|
||||
$buttonBorderRadius: 2px;
|
||||
$buttonBorderWidth: 1px;
|
||||
|
||||
@ -13,6 +13,35 @@ $buttonDefaultBackground: #fff;
|
||||
$buttonDefaultBackgroundActive: #eee;
|
||||
$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
|
||||
|
||||
Reference in New Issue
Block a user