jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor(buttons): apple new buttons design

pull/3/head
alex 2016-02-09 16:10:17 +03:00
parent a8912c1638
commit a7cc583d02
9 changed files with 163 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/app/pages/ui/buttons/buttons.html
View File

@ -1,9 +1,48 @@
<div class="widgets"> <div class="widgets">
<div class="row"> <div class="row">
<div class="col-md-12" <div class="col-md-3"
ba-panel ba-panel
ba-panel-class="with-scroll"> ba-panel-title="Flat Buttons"
<div ng-include="'app/pages/ui/buttons/widgets/buttons.html'"></div> ba-panel-class="with-scroll button-panel">
<div class="button-wrapper"><button type="button" class="btn btn-default">Default</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-primary">Primary</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-success">Success</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-info">Info</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-warning">Warning</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-danger">Danger</button></div>
</div>
<div class="col-md-3"
ba-panel
ba-panel-title="Raised Buttons"
ba-panel-class="with-scroll button-panel">
<div class="button-wrapper"><button type="button" class="btn btn-default btn-raised">Default</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-primary btn-raised">Primary</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-success btn-raised">Success</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-info btn-raised">Info</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-warning btn-raised">Warning</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-danger btn-raised">Danger</button></div>
</div>
<div class="col-md-3"
ba-panel
ba-panel-title="Different sizes"
ba-panel-class="with-scroll button-panel df-size-button-panel">
<div class="button-wrapper"><button type="button" class="btn btn-default btn-xs">Default</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-primary btn-sm">Primary</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-success btn-mm">Success</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-info btn-md">Info</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-warning btn-xm">Warning</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-danger btn-lg">Danger</button></div>
</div>
<div class="col-md-3"
ba-panel
ba-panel-title="Disabled"
ba-panel-class="with-scroll button-panel">
<div class="button-wrapper"><button type="button" class="btn btn-default" disabled="disabled">Default</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-primary" disabled="disabled">Primary</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-success" disabled="disabled">Success</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-info" disabled="disabled">Info</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-warning" disabled="disabled">Warning</button></div>
<div class="button-wrapper"><button type="button" class="btn btn-danger" disabled="disabled">Danger</button></div>
</div> </div>
</div> </div>
@ -18,7 +57,7 @@
<div <div
ba-panel ba-panel
ba-panel-title="Large Buttons" ba-panel-title="Large Buttons"
ba-panel-class="with-scroll"> ba-panel-class="with-scroll large-buttons-panel">
<div ng-include="'app/pages/ui/buttons/widgets/largeButtons.html'"></div> <div ng-include="'app/pages/ui/buttons/widgets/largeButtons.html'"></div>
</div> </div>
</div> </div>

16
src/app/pages/ui/buttons/widgets/buttonGroups.html
View File

@ -9,18 +9,18 @@
<div class="btn-toolbar-example"> <div class="btn-toolbar-example">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group"> <div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-default">3</button> <button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-default">4</button> <button type="button" class="btn btn-primary">4</button>
</div> </div>
<div class="btn-group" role="group" aria-label="Second group"> <div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-default">6</button> <button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-default">7</button> <button type="button" class="btn btn-primary">7</button>
</div> </div>
<div class="btn-group" role="group" aria-label="Third group"> <div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-default">8</button> <button type="button" class="btn btn-primary">8</button>
</div> </div>
</div> </div>
</div> </div>

2
src/app/pages/ui/buttons/widgets/progressButtons.html
View File

@ -1,4 +1,4 @@
<div class="progress-buttons-container text-center"> <div class="progress-buttons-container text-center default-text">
<div class="row"> <div class="row">
<section class="col-md-6 col-lg-3"> <section class="col-md-6 col-lg-3">
<span class="button-title">fill horizontal</span> <span class="button-title">fill horizontal</span>

18
src/app/theme/theme.constants.js
View File

@ -18,16 +18,16 @@
successLight: '#85BA54', successLight: '#85BA54',
primaryLight: '#5FBCBB', primaryLight: '#5FBCBB',
warningLight: '#c5d36a', warningLight: '#c5d36a',
primaryDark: '#001d21', primaryDark: '#003e4b',
dangerDark: '#573925', dangerDark: '#c37350',
successDark: '#052c27', successDark: '#18524b',
warningDark: '#3f5237', warningDark: '#8adc68',
primaryBg: '#b3ccd0', primaryBg: '#0d8da2',
successBg: '#b7d9d5', successBg: '#02b6a2',
dangerBg: '#ffe5d3', dangerBg: '#ffcd92',
infoBg: '#d4eadd', infoBg: '#a8e6b3',
warningBg: '#eafbe3', warningBg: '#e4fbd3',
defaultText: '#585858' defaultText: '#585858'
}) })

37
src/sass/app/_buttonsPage.scss
View File

@ -91,3 +91,40 @@ $btn-icon-size: 34px;
} }
} }
.button-panel{
height: 315px;
.btn{
width: 150px;
}
}
.large-buttons-panel{
height: 202px;
}
.button-panel.df-size-button-panel{
.btn-xs{
width: 60px;
}
.btn-sm{
width: 90px;
}
.btn-mm{
width: 120px;
}
.btn-md{
width: 150px;
}
.btn-xm{
width: 175px;
}
.btn-lg{
width: 200px;
}
}
.button-wrapper{
text-align: center;
margin: 5px 0;
}

63
src/sass/theme/_buttons.scss
View File

@ -5,7 +5,7 @@ $hover: 24;
} }
.btn { .btn {
border-radius: 0; border-radius: 5px;
transition: all 0.1s ease; transition: all 0.1s ease;
} }
@ -13,45 +13,45 @@ $hover: 24;
transform: scale(1.2); transform: scale(1.2);
} }
@mixin styleButton($color) { @mixin styleButton($color, $borderColor) {
background: $color; background: $color;
border-color: $color; border-color: $borderColor;
} }
@mixin buttonColor($color) { @mixin buttonColor($color, $borderColor) {
@include styleButton($color); @include styleButton($color, $borderColor);
&.disabled, &[disabled], fieldset[disabled] &, &.disabled:hover, &[disabled]:hover, &.disabled, &[disabled], fieldset[disabled] &, &.disabled:hover, &[disabled]:hover,
fieldset[disabled] &:hover, &.disabled:focus, &[disabled]:focus, fieldset[disabled] &:focus, fieldset[disabled] &:hover, &.disabled:focus, &[disabled]:focus, fieldset[disabled] &:focus,
&.disabled.focus, &[disabled].focus, fieldset[disabled] &.focus, &.disabled:active, &.disabled.focus, &[disabled].focus, fieldset[disabled] &.focus, &.disabled:active,
&[disabled]:active, fieldset[disabled] &:active, &.disabled.active, &[disabled].active, &[disabled]:active, fieldset[disabled] &:active, &.disabled.active, &[disabled].active,
fieldset[disabled] &.active { fieldset[disabled] &.active {
@include styleButton($color + $hover/2); @include styleButton($color, $borderColor + $hover/2);
} }
&:hover, &:focus, &.focus, &:active, &.active { &:hover, &:focus, &.focus, &:active, &.active {
@include styleButton($color - $hover); @include styleButton($color, $borderColor - $hover);
} }
} }
.open > .dropdown-toggle { .open > .dropdown-toggle {
&.btn-primary { &.btn-primary {
@include styleButton($primary - $hover); @include styleButton($primary-btn, $primary-btn - $hover);
} }
&.btn-default { &.btn-default {
@include styleButton($default - $hover); @include styleButton(transparent, $default);
} }
&.btn-success { &.btn-success {
@include styleButton($success - $hover); @include styleButton($success-btn, $success-btn - $hover);
} }
&.btn-info { &.btn-info {
@include styleButton($info - $hover); @include styleButton($info-btn, $info-btn - $hover);
} }
&.btn-warning { &.btn-warning {
@include styleButton($warning - $hover); @include styleButton($warning-btn, $warning-btn - $hover);
} }
&.btn-danger { &.btn-danger {
@include styleButton($danger - $hover); @include styleButton($danger-btn, $danger-btn - $hover);
} }
} }
@ -60,27 +60,28 @@ $hover: 24;
} }
.btn-primary { .btn-primary {
@include buttonColor($primary); @include buttonColor($primary-btn, $primary-btn);
} }
.btn-default { .btn-default {
@include buttonColor($default); border-width: 2px;
@include buttonColor(transparent, $default);
} }
.btn-success { .btn-success {
@include buttonColor($success); @include buttonColor($success-btn, $success-btn);
} }
.btn-info { .btn-info {
@include buttonColor($info); @include buttonColor($info-btn, $info-btn);
} }
.btn-warning { .btn-warning {
@include buttonColor($warning); @include buttonColor($warning-btn, $warning-btn);
} }
.btn-danger { .btn-danger {
@include buttonColor($danger); @include buttonColor($danger-btn, $danger-btn);
} }
.btn-with-icon { .btn-with-icon {
@ -153,7 +154,7 @@ $hover: 24;
} }
&.btn-primary { &.btn-primary {
@include progressButtonColor($primary); @include progressButtonColor($primary-btn);
} }
&.btn-default { &.btn-default {
@ -161,18 +162,32 @@ $hover: 24;
} }
&.btn-success { &.btn-success {
@include progressButtonColor($success); @include progressButtonColor($success-btn);
} }
&.btn-info { &.btn-info {
@include progressButtonColor($info); @include progressButtonColor($info-btn);
} }
&.btn-warning { &.btn-warning {
@include progressButtonColor($warning); @include progressButtonColor($warning-btn);
} }
&.btn-danger { &.btn-danger {
@include progressButtonColor($danger); @include progressButtonColor($danger-btn);
} }
} }
.btn-raised{
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35);
}
.btn-mm{
padding: 5px 11px;
font-size: 13px;
}
.btn-xm{
padding: 8px 14px;
font-size: 16px;
}

4
src/sass/theme/conf/_mixins.scss
View File

@ -113,8 +113,4 @@
.progress { .progress {
background: $color; background: $color;
} }
.dropdown-menu {
background-color: $dropdownColor;
}
} }

23
src/sass/theme/conf/_variables.scss
View File

@ -12,8 +12,6 @@ $success-dark: shade($success, 66%);
$warning-dark: shade($warning, 66%); $warning-dark: shade($warning, 66%);
$danger-dark: shade($danger, 66%); $danger-dark: shade($danger, 66%);
$primary-light: #5FBCBB;
$success-light: #85BA54;
$primary-bg: tint($primary, 70%); $primary-bg: tint($primary, 70%);
$info-bg: tint($info, 70%); $info-bg: tint($info, 70%);
@ -21,6 +19,27 @@ $success-bg: tint($success, 70%);
$warning-bg: tint($warning, 70%); $warning-bg: tint($warning, 70%);
$danger-bg: tint($danger, 70%); $danger-bg: tint($danger, 70%);
$primaryDark: #003e4b;
$dangerDark: #c37350;
$successDark: #18524b;
$warningDark: #8adc68;
$primaryBg: #0d8da2;
$successBg: #02b6a2;
$dangerBg: #ffcd92;
$infoBg: #a8e6b3;
$warningBg: #e4fbd3;
$primary-light: #5FBCBB;
$success-light: #85BA54;
$primary-btn: #209e91;
$info-btn: #2dacd1;
$success-btn: #90b900;
$primary-btn: #209e91;
$warning-btn: #dfb81c;
$danger-btn: #e85656;
$facebook-color: #3b5998; $facebook-color: #3b5998;
$twitter-color: #55acee; $twitter-color: #55acee;
$google-color: #dd4b39; $google-color: #dd4b39;

4
src/sass/theme/skins/_02_transparent.scss
View File

@ -6,9 +6,13 @@ body.badmin-transparent {
} }
.panel.panel-blur{ .panel.panel-blur{
border-radius: 5px; border-radius: 5px;
color: $default;
.panel-heading{ .panel-heading{
border-bottom: 1px solid rgba(0,0,0,0.12); border-bottom: 1px solid rgba(0,0,0,0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
} }
} }
.btn-default{
color: $default;
}
} }