jinql
/
blur-admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(progressButtons): style progress button styles

pull/3/head
Vladimir Lugovsky 2015-11-24 12:21:04 +03:00
parent 71cbaf6e52
commit b304355b80
3 changed files with 86 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/pages/buttons/_buttonsPage.scss
View File

@ -79,9 +79,6 @@ $btn-icon-size: 34px;
.progress-buttons-container {
text-align: center;
font-size: 16px;
.progress {
margin-bottom: 0;
}
span.button-title {
display: inline-block;
width: 100%;

36
src/app/pages/buttons/widgets/progressButtons.html
View File

@ -2,83 +2,83 @@
<div class="row">
<section class="col-md-6 col-lg-3">
<span class="button-title">fill horizontal</span>
<button progress-button="progressFunction()">Submit</button>
<button progress-button="progressFunction()" class="btn btn-success">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">fill vertical</span>
<button progress-button="progressFunction()" pb-direction="vertical">Submit</button>
<button progress-button="progressFunction()" pb-direction="vertical" class="btn btn-danger">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">shrink horizontal</span>
<button progress-button="progressFunction()" pb-style="shrink">Submit</button>
<button progress-button="progressFunction()" pb-style="shrink" class="btn btn-warning">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">shrink vertical</span>
<button progress-button="progressFunction()" pb-style="shrink" pb-direction="vertical">Submit</button>
<button progress-button="progressFunction()" pb-style="shrink" pb-direction="vertical" class="btn btn-info">Submit</button>
</section>
</div>
<div class="row">
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-angle-bottom <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-angle-bottom">Submit</button>
<button progress-button="progressFunction()" pb-style="rotate-angle-bottom" class="btn btn-success">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-angle-top <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-angle-top">Submit</button>
<button progress-button="progressFunction()" pb-style="rotate-angle-top" class="btn btn-danger">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-angle-left <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-angle-left">Submit</button>
<button progress-button="progressFunction()" pb-style="rotate-angle-left" class="btn btn-warning">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-angle-right <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-angle-right">Submit</button>
<button progress-button="progressFunction()" pb-style="rotate-angle-right" class="btn btn-info">Submit</button>
</section>
</div>
<div class="row">
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-side-down <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-side-down">Submit</button>
<button progress-button="progressFunction()" pb-style="rotate-side-down" class="btn btn-success">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-side-up <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-side-up">Submit</button>
<button progress-button="progressFunction()" pb-style="rotate-side-up" class="btn btn-danger">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-side-left <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-side-left">Submit</button>
<button progress-button="progressFunction()" pb-style="rotate-side-left" class="btn btn-warning">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-side-right <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-side-right">Submit</button>
<button progress-button="progressFunction()" pb-style="rotate-side-right" class="btn btn-info">Submit</button>
</section>
</div>
<div class="row">
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-back <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-back">Submit</button>
<button progress-button="progressFunction()" pb-style="rotate-back" class="btn btn-success">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">flip-open <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="flip-open">Submit</button>
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-danger">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">slide-down <br/>horizontal</span>
<button progress-button="progressFunction()" pb-style="slide-down">Submit</button>
<button progress-button="progressFunction()" pb-style="slide-down" class="btn btn-warning">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">move-up <br/>horizontal</span>
<button progress-button="progressFunction()" pb-style="move-up">Submit</button>
<button progress-button="progressFunction()" pb-style="move-up" class="btn btn-info">Submit</button>
</section>
</div>
<div class="row">
<section class="col-md-6">
<span class="button-title">top-line <br/>horizontal</span>
<button progress-button="progressFunction()" pb-style="top-line">Submit</button>
<button progress-button="progressFunction()" pb-style="top-line" class="btn btn-success">Submit</button>
</section>
<section class="col-md-6">
<span class="button-title">lateral-lines <br/>vertical</span>
<button progress-button="progressFunction()" pb-style="lateral-lines">Submit</button>
<button progress-button="progressFunction()" pb-style="lateral-lines" class="btn btn-info">Submit</button>
</section>
</div>
</div>

68
src/assets/css/_buttons.scss
View File

@ -108,3 +108,71 @@ $hover: 24;
.btn .caret {
margin-left: 2px;
}
@mixin progressButtonColor($btnColor) {
.content {
&:after, &:before {
color: darken($btnColor, 40);
}
}
&.progress-button-style-move-up, &.progress-button-style-slide-down {
.content {
background-color: darken($btnColor, 10);
}
}
&.progress-button-style-lateral-lines .progress-inner {
border-color: darken($btnColor, 10);
background: 0 0;
}
.progress {
background-color: darken($btnColor, 10);
box-shadow: 0 1px 0 darken($btnColor, 10);
}
.progress-inner {
background-color: darken($btnColor, 20);
}
&.progress-button-perspective {
background: none;
.content {
background-color: $btnColor;
}
}
}
.progress-button {
.progress {
margin-bottom: 0;
border-radius: 0;
}
&:hover {
transform: none;
}
&.btn-primary {
@include progressButtonColor($primary);
}
&.btn-default {
@include progressButtonColor($default);
}
&.btn-success {
@include progressButtonColor($success);
}
&.btn-info {
@include progressButtonColor($info);
}
&.btn-warning {
@include progressButtonColor($warning);
}
&.btn-danger {
@include progressButtonColor($danger);
}
}