mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-27 09:00:36 +03:00
Continued work, added support for material colors
This commit is contained in:
Federico Zivolo
parent
6139774f42
commit
2fc4809bf3
15
README.md
15
README.md
|
|
@ -1,4 +1,4 @@
|
||||||
Bootstrap Material Design
|
Material Design for Bootstrap
|
||||||
=========================
|
=========================
|
||||||
|
|
||||||
This Bootstrap theme is an easy way to use the new Material Design guide-lines by Google in your Bootstrap 3 based application.
|
This Bootstrap theme is an easy way to use the new Material Design guide-lines by Google in your Bootstrap 3 based application.
|
||||||
|
|
@ -31,6 +31,19 @@ Currently supported elements:
|
||||||
|
|
||||||
Material Design for Bootstrap provides some additional stuff to get the best from Material Design.
|
Material Design for Bootstrap provides some additional stuff to get the best from Material Design.
|
||||||
|
|
||||||
|
### Variations:
|
||||||
|
|
||||||
|
There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progess bars and more.
|
||||||
|
They can be used adding to the desired element the class suffix `-material-color` replacing `color` with the desired one.
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
<button class="btn btn-material-deeppurple">Deep purple button</button>
|
||||||
|
|
||||||
|
These colors are took from the Material Design color palette and are reported below:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Buttons:
|
### Buttons:
|
||||||
|
|
||||||
Add `.btn-flat` to a button to make it flat, without shadows.
|
Add `.btn-flat` to a button to make it flat, without shadows.
|
||||||
|
|
|
||||||
26
alerts.less
26
alerts.less
|
|
@ -1,26 +1,18 @@
|
||||||
// main: material.less
|
// main: material.less
|
||||||
|
|
||||||
.alert, .alert-success, .alert-info, .alert-warning, .alert-danger {
|
.alert {
|
||||||
border: 0px;
|
border: 0px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
a, .alert-link {
|
a, .alert-link {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
.variations(~"", background-color, #FFFFFF);
|
||||||
|
&-info, &-danger, &-warning, &-success {
|
||||||
.alert-success {
|
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background-color: @alert-success;
|
}
|
||||||
}
|
&-default {
|
||||||
.alert-info {
|
a, .alert-link {
|
||||||
color: #FFFFFF;
|
color: #000000;
|
||||||
background-color: @alert-info;
|
}
|
||||||
}
|
}
|
||||||
.alert-warning {
|
|
||||||
color: #FFFFFF;
|
|
||||||
background-color: @alert-warning;
|
|
||||||
}
|
|
||||||
.alert-danger {
|
|
||||||
color: #FFFFFF;
|
|
||||||
background-color: @alert-danger;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
820
bootstrap.css
vendored
820
bootstrap.css
vendored
|
|
@ -1,820 +0,0 @@
|
||||||
/* Generated by less 1.7.0 */
|
|
||||||
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
|
|
||||||
@-webkit-keyframes input-highlight {
|
|
||||||
0% {
|
|
||||||
left: 20%;
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
99% {
|
|
||||||
width: 0;
|
|
||||||
left: 0;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-moz-keyframes input-highlight {
|
|
||||||
0% {
|
|
||||||
left: 20%;
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
99% {
|
|
||||||
width: 0;
|
|
||||||
left: 0;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes input-highlight {
|
|
||||||
0% {
|
|
||||||
left: 20%;
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
99% {
|
|
||||||
width: 0;
|
|
||||||
left: 0;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shadow-z-1 {
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
||||||
}
|
|
||||||
.shadow-z-2 {
|
|
||||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
}
|
|
||||||
.shadow-z-2-hover {
|
|
||||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
|
|
||||||
}
|
|
||||||
.shadow-z-3 {
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
}
|
|
||||||
.shadow-z-4 {
|
|
||||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
||||||
}
|
|
||||||
.shadow-z-5 {
|
|
||||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
background-color: #EEEEEE;
|
|
||||||
}
|
|
||||||
body,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
.h1,
|
|
||||||
.h2,
|
|
||||||
.h3,
|
|
||||||
.h4,
|
|
||||||
.h5,
|
|
||||||
.h6 {
|
|
||||||
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
position: relative;
|
|
||||||
padding: 8px 30px;
|
|
||||||
border: 0;
|
|
||||||
margin: 10px 1px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 4px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
outline: none !important;
|
|
||||||
}
|
|
||||||
.btn:hover:not(.btn-link) {
|
|
||||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
|
|
||||||
}
|
|
||||||
.btn:active:not(.btn-link) {
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
}
|
|
||||||
.btn-raised {
|
|
||||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.btn-raised:active:not(.btn-link) {
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
}
|
|
||||||
.btn-default,
|
|
||||||
.btn-default:hover,
|
|
||||||
.btn-default:active,
|
|
||||||
.btn-default:focus {
|
|
||||||
background-color: transparent;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
.btn-default:hover {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
.btn-primary,
|
|
||||||
.btn-primary:hover,
|
|
||||||
.btn-primary:active,
|
|
||||||
.btn-primary:focus {
|
|
||||||
background-color: #4285f4;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.btn-success,
|
|
||||||
.btn-success:hover,
|
|
||||||
.btn-success:active,
|
|
||||||
.btn-success:focus {
|
|
||||||
background-color: #0f9d58;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.btn-info,
|
|
||||||
.btn-info:hover,
|
|
||||||
.btn-info:active,
|
|
||||||
.btn-info:focus {
|
|
||||||
background-color: #3498db;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.btn-warning,
|
|
||||||
.btn-warning:hover,
|
|
||||||
.btn-warning:active,
|
|
||||||
.btn-warning:focus {
|
|
||||||
background-color: #ff5722;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.btn-danger,
|
|
||||||
.btn-danger:hover,
|
|
||||||
.btn-danger:active,
|
|
||||||
.btn-danger:focus {
|
|
||||||
background-color: #db4437;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.open > .dropdown-toggle.btn-default {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.open > .dropdown-toggle.btn-primary {
|
|
||||||
background-color: #4285f4;
|
|
||||||
}
|
|
||||||
.open > .dropdown-toggle.btn-success {
|
|
||||||
background-color: #0f9d58;
|
|
||||||
}
|
|
||||||
.open > .dropdown-toggle.btn-info {
|
|
||||||
background-color: #3498db;
|
|
||||||
}
|
|
||||||
.open > .dropdown-toggle.btn-warning {
|
|
||||||
background-color: #ff5722;
|
|
||||||
}
|
|
||||||
.open > .dropdown-toggle.btn-danger {
|
|
||||||
background-color: #db4437;
|
|
||||||
}
|
|
||||||
.btn-flat {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
.btn-flat.btn-default:hover {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
.btn-group,
|
|
||||||
.btn-group-vertical {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin: 10px 1px;
|
|
||||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.btn-group:active:not(.btn-link),
|
|
||||||
.btn-group-vertical:active:not(.btn-link) {
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
}
|
|
||||||
.btn-group.open .dropdown-toggle,
|
|
||||||
.btn-group-vertical.open .dropdown-toggle {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.btn-group.btn-group-raised,
|
|
||||||
.btn-group-vertical.btn-group-raised {
|
|
||||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.btn-group.btn-group-raised:active:not(.btn-link),
|
|
||||||
.btn-group-vertical.btn-group-raised:active:not(.btn-link) {
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
}
|
|
||||||
.btn-group .btn,
|
|
||||||
.btn-group-vertical .btn,
|
|
||||||
.btn-group .btn:active,
|
|
||||||
.btn-group-vertical .btn:active,
|
|
||||||
.btn-group .btn-group,
|
|
||||||
.btn-group-vertical .btn-group {
|
|
||||||
box-shadow: none !important;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.btn-group .btn:active .caret,
|
|
||||||
.btn-group-vertical .btn:active .caret {
|
|
||||||
margin-left: -1px;
|
|
||||||
}
|
|
||||||
.btn-group-flat {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
.ripple-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.ripple {
|
|
||||||
fill: black;
|
|
||||||
fill-opacity: 0.05;
|
|
||||||
stroke: none;
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
-ms-transform: scale(1);
|
|
||||||
transform: scale(1);
|
|
||||||
-webkit-transform-origin: 50%;
|
|
||||||
-ms-transform-origin: 50%;
|
|
||||||
transform-origin: 50%;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.ripple.ripple-on {
|
|
||||||
transition: opacity 0.15s ease-in 0s -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
|
||||||
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.ripple.ripple-out {
|
|
||||||
-webkit-transition: opacity 0.2s linear 0s !important;
|
|
||||||
transition: opacity 0.2s linear 0s !important;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.form-horizontal .checkbox {
|
|
||||||
padding-top: 15px;
|
|
||||||
}
|
|
||||||
.checkbox label {
|
|
||||||
cursor: pointer;
|
|
||||||
padding-left: 45px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.checkbox label span {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
|
||||||
.checkbox label .bubble {
|
|
||||||
background: rgba(137, 137, 137, 0.3);
|
|
||||||
left: 0;
|
|
||||||
top: -10px;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
border-radius: 100%;
|
|
||||||
transform: scale(0);
|
|
||||||
transition: transform .1s, opacity 0.2s 0.4s;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.checkbox label .bubble.animate {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.checkbox label .box {
|
|
||||||
border: 2px solid #5A5F5A;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
transition-delay: 0.2s;
|
|
||||||
}
|
|
||||||
.checkbox label .check {
|
|
||||||
top: -4px;
|
|
||||||
left: 16px;
|
|
||||||
width: 12px;
|
|
||||||
height: 24px;
|
|
||||||
border: 2px solid #0F9D58;
|
|
||||||
border-top: none;
|
|
||||||
border-left: none;
|
|
||||||
opacity: 0;
|
|
||||||
z-index: 888;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
transition-delay: 0.2s;
|
|
||||||
}
|
|
||||||
.checkbox input[type=checkbox] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.checkbox input[type=checkbox]:checked ~ .box {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0) rotate(-180deg);
|
|
||||||
}
|
|
||||||
.checkbox input[type=checkbox]:checked ~ .bubble {
|
|
||||||
background: rgba(15, 157, 88, 0.3);
|
|
||||||
}
|
|
||||||
.checkbox input[type=checkbox]:checked ~ .check {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1) rotate(45deg);
|
|
||||||
}
|
|
||||||
.form-horizontal .radio {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.radio label {
|
|
||||||
cursor: pointer;
|
|
||||||
padding-left: 45px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.radio label span {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
top: 2px;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
|
||||||
.radio label .bubble {
|
|
||||||
background: rgba(137, 137, 137, 0.3);
|
|
||||||
left: 0;
|
|
||||||
top: -8px;
|
|
||||||
height: 34px;
|
|
||||||
width: 34px;
|
|
||||||
border-radius: 100%;
|
|
||||||
transform: scale(0);
|
|
||||||
transition: transform .1s, opacity 0.2s 0.4s;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.radio label .bubble.animate {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.radio label .circle {
|
|
||||||
border: 2px solid #5A5F5A;
|
|
||||||
height: 15px;
|
|
||||||
width: 15px;
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
.radio label .check {
|
|
||||||
height: 15px;
|
|
||||||
width: 15px;
|
|
||||||
border-radius: 100%;
|
|
||||||
background-color: #5a5f5a;
|
|
||||||
transform: scale(0);
|
|
||||||
}
|
|
||||||
.radio.radio-default .check {
|
|
||||||
background-color: #5a5f5a;
|
|
||||||
}
|
|
||||||
.radio.radio-primary .check {
|
|
||||||
background-color: #4285f4;
|
|
||||||
}
|
|
||||||
.radio.radio-success .check {
|
|
||||||
background-color: #0f9d58;
|
|
||||||
}
|
|
||||||
.radio.radio-info {
|
|
||||||
background-color: #3498db;
|
|
||||||
}
|
|
||||||
.radio.radio-warning .check {
|
|
||||||
background-color: #ff5722;
|
|
||||||
}
|
|
||||||
.radio.radio-danger .check {
|
|
||||||
background-color: #db4437;
|
|
||||||
}
|
|
||||||
.radio input[type=radio] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.radio input[type=radio]:checked ~ .check {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
.radio input[type=radio]:checked ~ .circle {
|
|
||||||
transform: scale(1);
|
|
||||||
border: 1px;
|
|
||||||
}
|
|
||||||
.form-control-wrapper {
|
|
||||||
position: relative;
|
|
||||||
/* active state */
|
|
||||||
}
|
|
||||||
.form-control-wrapper .form-control,
|
|
||||||
.form-control-wrapper .form-control:focus {
|
|
||||||
float: none;
|
|
||||||
border: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
background: transparent;
|
|
||||||
border-bottom: 1px solid #757575;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .form-control:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .floating-label {
|
|
||||||
color: #7E7E7E;
|
|
||||||
font-size: 14px;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
left: 12px;
|
|
||||||
top: 7px;
|
|
||||||
transition: 0.2s ease all;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .form-control:focus ~ .floating-label {
|
|
||||||
top: -10px;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #5264ae;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .form-control:not(.empty) ~ .floating-label {
|
|
||||||
top: -10px;
|
|
||||||
font-size: 10px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .form-control:focus:invalid ~ .floating-label {
|
|
||||||
color: #db4437;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .form-control:focus ~ .material-input:after {
|
|
||||||
background-color: #5264ae;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
|
|
||||||
.form-control-wrapper .form-control:focus:invalid ~ .material-input:after {
|
|
||||||
background-color: #db4437;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .form-control.empty ~ .floating-label {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .material-input:before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #5264ae;
|
|
||||||
bottom: -1px;
|
|
||||||
transform: scaleX(0);
|
|
||||||
transition: transform 0s;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .form-control:focus ~ .material-input:before {
|
|
||||||
transform: scaleX(1);
|
|
||||||
transition: transform 0.2s ease-out;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .material-input:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
height: 18px;
|
|
||||||
width: 100px;
|
|
||||||
margin-top: -1px;
|
|
||||||
top: 25%;
|
|
||||||
left: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .input-lg ~ .material-input:after {
|
|
||||||
height: 26px;
|
|
||||||
}
|
|
||||||
.form-control-wrapper textarea {
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
.form-control-wrapper textarea ~ .form-control-highlight {
|
|
||||||
margin-top: -11px;
|
|
||||||
}
|
|
||||||
.form-control-wrapper .form-control:focus ~ .material-input:after {
|
|
||||||
-webkit-animation: input-highlight 0.3s ease;
|
|
||||||
animation: input-highlight 0.3s ease;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
.form-group.has-warning .material-input:before,
|
|
||||||
.form-group.has-warning input.form-control:focus ~ .material-input:after {
|
|
||||||
background: #ff5722;
|
|
||||||
}
|
|
||||||
.form-group.has-warning .control-label,
|
|
||||||
.form-group.has-warning input.form-control:focus ~ .floating-label {
|
|
||||||
color: #ff5722;
|
|
||||||
}
|
|
||||||
.form-group.has-error .material-input:before,
|
|
||||||
.form-group.has-error input.form-control:focus ~ .material-input:after {
|
|
||||||
background: #db4437;
|
|
||||||
}
|
|
||||||
.form-group.has-error .control-label,
|
|
||||||
.form-group.has-error input.form-control:focus ~ .floating-label {
|
|
||||||
color: #db4437;
|
|
||||||
}
|
|
||||||
.form-group.has-success .material-input:before,
|
|
||||||
.form-group.has-success input.form-control:focus ~ .material-input:after {
|
|
||||||
background: #0f9d58;
|
|
||||||
}
|
|
||||||
.form-group.has-success .control-label,
|
|
||||||
.form-group.has-success input.form-control:focus ~ .floating-label {
|
|
||||||
color: #0f9d58;
|
|
||||||
}
|
|
||||||
.form-group.has-info .material-input:before,
|
|
||||||
.form-group.has-info input.form-control:focus ~ .material-input:after {
|
|
||||||
background: #3498db;
|
|
||||||
}
|
|
||||||
.form-group.has-info .control-label,
|
|
||||||
.form-group.has-info input.form-control:focus ~ .floating-label {
|
|
||||||
color: #3498db;
|
|
||||||
}
|
|
||||||
.input-group .form-control-wrapper {
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
bottom: -10px;
|
|
||||||
}
|
|
||||||
.input-group .form-control-wrapper .form-control {
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
.input-group .input-group-addon {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
.input-group .input-group-btn .btn {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
select.form-control {
|
|
||||||
border: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
border-bottom: 1px solid #757575;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
select.form-control:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
border-color: #757575;
|
|
||||||
}
|
|
||||||
.container .well,
|
|
||||||
.container .jumbotron {
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.container .well p,
|
|
||||||
.container .jumbotron p {
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
.modal-content {
|
|
||||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
border-radius: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
.modal-content .modal-header {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
.modal-content .modal-footer {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
.modal-content .modal-footer .btn + .btn {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.list-group {
|
|
||||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.list-group .list-group-item:last-child {
|
|
||||||
border-bottom-right-radius: 2px;
|
|
||||||
border-bottom-left-radius: 2px;
|
|
||||||
}
|
|
||||||
.list-group .list-group-item:first-child {
|
|
||||||
border-top-right-radius: 2px;
|
|
||||||
boborder-top-right-radius: 2px;
|
|
||||||
}
|
|
||||||
.navbar {
|
|
||||||
background-color: #4285f4;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
.navbar .navbar-brand {
|
|
||||||
position: relative;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 30px;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-brand:hover,
|
|
||||||
.navbar .navbar-brand:focus {
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.navbar .navbar-text {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-nav > li > a {
|
|
||||||
color: #ffffff;
|
|
||||||
padding-top: 20px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
.navbar .navbar-nav > li > a:hover,
|
|
||||||
.navbar .navbar-nav > li > a:focus {
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.navbar .navbar-nav > .active > a,
|
|
||||||
.navbar .navbar-nav > .active > a:hover,
|
|
||||||
.navbar .navbar-nav > .active > a:focus {
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.navbar .navbar-nav > .disabled > a,
|
|
||||||
.navbar .navbar-nav > .disabled > a:hover,
|
|
||||||
.navbar .navbar-nav > .disabled > a:focus {
|
|
||||||
color: #e5e5e5;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.navbar .navbar-toggle {
|
|
||||||
border-color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-toggle:hover,
|
|
||||||
.navbar .navbar-toggle:focus {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.navbar .navbar-toggle .icon-bar {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-collapse,
|
|
||||||
.navbar .navbar-form {
|
|
||||||
border-color: #206ff2;
|
|
||||||
}
|
|
||||||
.navbar .navbar-nav > .open > a,
|
|
||||||
.navbar .navbar-nav > .open > a:hover,
|
|
||||||
.navbar .navbar-nav > .open > a:focus {
|
|
||||||
background-color: rgba(0, 0, 0, 0.05);
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu > .dropdown-header {
|
|
||||||
border: 0;
|
|
||||||
color: #d4d4d4;
|
|
||||||
}
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu .divider {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu > li > a {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu > li > a:focus {
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu > .active > a,
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
|
|
||||||
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
|
|
||||||
color: #e5e5e5;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.navbar .navbar-link {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-link:hover {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .btn-link {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .btn-link:hover,
|
|
||||||
.navbar .btn-link:focus {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .btn-link[disabled]:hover,
|
|
||||||
fieldset[disabled] .navbar .btn-link:hover,
|
|
||||||
.navbar .btn-link[disabled]:focus,
|
|
||||||
fieldset[disabled] .navbar .btn-link:focus {
|
|
||||||
color: #e5e5e5;
|
|
||||||
}
|
|
||||||
.navbar .navbar-form .form-control-wrapper .form-control {
|
|
||||||
border-color: #ffffff;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-form .form-control-wrapper .material-input:before,
|
|
||||||
.navbar .navbar-form .form-control-wrapper input:focus ~ .material-input:after {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-form ::-webkit-input-placeholder {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-form :-moz-placeholder {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-form ::-moz-placeholder {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar .navbar-form :-ms-input-placeholder {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.navbar-primary {
|
|
||||||
background-color: #4285f4;
|
|
||||||
}
|
|
||||||
.navbar-primary .navbar-collapse,
|
|
||||||
.navbar-primary .navbar-form {
|
|
||||||
border-color: #206ff2;
|
|
||||||
}
|
|
||||||
.navbar-success {
|
|
||||||
background-color: #0f9d58;
|
|
||||||
}
|
|
||||||
.navbar-success .navbar-collapse,
|
|
||||||
.navbar-success .navbar-form {
|
|
||||||
border-color: #0c7c46;
|
|
||||||
}
|
|
||||||
.navbar-info {
|
|
||||||
background-color: #3498db;
|
|
||||||
}
|
|
||||||
.navbar-info .navbar-collapse,
|
|
||||||
.navbar-info .navbar-form {
|
|
||||||
border-color: #2386c8;
|
|
||||||
}
|
|
||||||
.navbar-warning {
|
|
||||||
background-color: #ff5722;
|
|
||||||
}
|
|
||||||
.navbar-warning .navbar-collapse,
|
|
||||||
.navbar-warning .navbar-form {
|
|
||||||
border-color: #fd3d00;
|
|
||||||
}
|
|
||||||
.navbar-danger {
|
|
||||||
background-color: #db4437;
|
|
||||||
}
|
|
||||||
.navbar-danger .navbar-collapse,
|
|
||||||
.navbar-danger .navbar-form {
|
|
||||||
border-color: #ca3124;
|
|
||||||
}
|
|
||||||
.navbar-inverse {
|
|
||||||
background-color: #5264ae;
|
|
||||||
}
|
|
||||||
.navbar-inverse .navbar-collapse,
|
|
||||||
.navbar-inverse .navbar-form {
|
|
||||||
border-color: #465696;
|
|
||||||
}
|
|
||||||
.dropdown-menu {
|
|
||||||
border: 0;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
|
||||||
}
|
|
||||||
.dropdown-menu .divider {
|
|
||||||
background-color: rgba(229, 229, 229, 0.12);
|
|
||||||
}
|
|
||||||
.dropdown-menu li {
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.dropdown-menu li a:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.alert,
|
|
||||||
.alert-success,
|
|
||||||
.alert-info,
|
|
||||||
.alert-warning,
|
|
||||||
.alert-danger {
|
|
||||||
border: 0px;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
.alert a,
|
|
||||||
.alert-success a,
|
|
||||||
.alert-info a,
|
|
||||||
.alert-warning a,
|
|
||||||
.alert-danger a,
|
|
||||||
.alert .alert-link,
|
|
||||||
.alert-success .alert-link,
|
|
||||||
.alert-info .alert-link,
|
|
||||||
.alert-warning .alert-link,
|
|
||||||
.alert-danger .alert-link {
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
.alert-success {
|
|
||||||
color: #FFFFFF;
|
|
||||||
background-color: #0f9d58;
|
|
||||||
}
|
|
||||||
.alert-info {
|
|
||||||
color: #FFFFFF;
|
|
||||||
background-color: #3498db;
|
|
||||||
}
|
|
||||||
.alert-warning {
|
|
||||||
color: #FFFFFF;
|
|
||||||
background-color: #ff5722;
|
|
||||||
}
|
|
||||||
.alert-danger {
|
|
||||||
color: #FFFFFF;
|
|
||||||
background-color: #db4437;
|
|
||||||
}
|
|
||||||
.progress {
|
|
||||||
height: 4px;
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
background: #c8c8c8;
|
|
||||||
}
|
|
||||||
.progress .progress-bar {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.progress .progress-bar,
|
|
||||||
.progress .progress-bar-info {
|
|
||||||
background-color: #3498db;
|
|
||||||
}
|
|
||||||
.progress .progress-bar-warning {
|
|
||||||
background-color: #ff5722;
|
|
||||||
}
|
|
||||||
.progress .progress-bar-danger {
|
|
||||||
background-color: #db4437;
|
|
||||||
}
|
|
||||||
.progress .progress-bar-success {
|
|
||||||
background-color: #0f9d58;
|
|
||||||
}
|
|
||||||
.text-warning {
|
|
||||||
color: #ff5722;
|
|
||||||
}
|
|
||||||
.text-primary {
|
|
||||||
color: #4285f4;
|
|
||||||
}
|
|
||||||
.text-danger {
|
|
||||||
color: #db4437;
|
|
||||||
}
|
|
||||||
.text-success {
|
|
||||||
color: #0f9d58;
|
|
||||||
}
|
|
||||||
.text-info {
|
|
||||||
color: #3498db;
|
|
||||||
}
|
|
||||||
62
buttons.less
62
buttons.less
|
|
@ -18,7 +18,11 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
color: @darkbg-text;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: @darkbg-text;
|
||||||
|
}
|
||||||
&:hover:not(.btn-link) {
|
&:hover:not(.btn-link) {
|
||||||
.shadow-z-2-hover();
|
.shadow-z-2-hover();
|
||||||
}
|
}
|
||||||
|
|
@ -27,57 +31,29 @@
|
||||||
.shadow-z-3();
|
.shadow-z-3();
|
||||||
}
|
}
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
|
|
||||||
|
.variations(~":not(.btn-link)", background-color, @btn-default);
|
||||||
|
|
||||||
}
|
}
|
||||||
.btn-raised {
|
// This is needed to style buttons which has not a variation suffix (they must stiled as btn-default)
|
||||||
.btn-shadow();
|
.btn-link, .btn:not([class^="btn btn-"]), .btn-default {
|
||||||
}
|
color: @lightbg-text;
|
||||||
.btn-default {
|
|
||||||
&, &:hover, &:active, &:focus {
|
|
||||||
background-color: @btn-default;
|
|
||||||
color: @btn-default-text;
|
|
||||||
}
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #FFFFFF;
|
color: @lightbg-text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn-primary {
|
.btn:not([class^="btn btn-"]), .btn-default {
|
||||||
&, &:hover, &:active, &:focus {
|
&:hover {
|
||||||
background-color: @btn-primary;
|
background-color: rgba(255,255,255,0.5);
|
||||||
color: @btn-primary-text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn-success {
|
|
||||||
&, &:hover, &:active, &:focus {
|
|
||||||
background-color: @btn-success;
|
|
||||||
color: @btn-success-text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn-info {
|
|
||||||
&, &:hover, &:active, &:focus {
|
|
||||||
background-color: @btn-info;
|
|
||||||
color: @btn-info-text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn-warning {
|
|
||||||
&, &:hover, &:active, &:focus {
|
|
||||||
background-color: @btn-warning;
|
|
||||||
color: @btn-warning-text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn-danger {
|
|
||||||
&, &:hover, &:active, &:focus {
|
|
||||||
background-color: @btn-danger;
|
|
||||||
color: @btn-danger-text;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-raised {
|
||||||
|
.btn-shadow();
|
||||||
|
}
|
||||||
|
|
||||||
.open > .dropdown-toggle.btn {
|
.open > .dropdown-toggle.btn {
|
||||||
&-default { background-color: @btn-default; }
|
.variations(~"", background-color, @btn-default);
|
||||||
&-primary { background-color: @btn-primary; }
|
|
||||||
&-success { background-color: @btn-success; }
|
|
||||||
&-info { background-color: @btn-info; }
|
|
||||||
&-warning { background-color: @btn-warning; }
|
|
||||||
&-danger { background-color: @btn-danger; }
|
|
||||||
}
|
}
|
||||||
.btn-flat {
|
.btn-flat {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,8 @@
|
||||||
left: 10px;
|
left: 10px;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
.bubble {
|
.ripple {
|
||||||
background: @input-unchecked;
|
background-color: @lightbg-text;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -24,13 +24,15 @@
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
transition: transform .1s, opacity 0.2s 0.4s;
|
transition: transform .1s, opacity 0.2s 0.4s;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
opacity: 0.2;
|
||||||
|
margin: 0;
|
||||||
&.animate {
|
&.animate {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.box {
|
.box {
|
||||||
border: 2px solid #5A5F5A;
|
border: 2px solid @lightbg-text;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
transition-delay: 0.2s;
|
transition-delay: 0.2s;
|
||||||
|
|
@ -40,7 +42,7 @@
|
||||||
left: 16px;
|
left: 16px;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
border: 2px solid #0F9D58;
|
border: 2px solid;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-left: none;
|
border-left: none;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -48,18 +50,28 @@
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
transition-delay: 0.2s;
|
transition-delay: 0.2s;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.variations(~" .check", color, @success);
|
||||||
|
|
||||||
|
input[type=checkbox][disabled]:checked ~ .check,
|
||||||
|
input[type=checkbox][disabled]:not(:checked) ~ .box {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
input[type=checkbox][disabled] ~ .ripple {
|
||||||
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
input[type=checkbox] { display: none; }
|
input[type=checkbox] { display: none; }
|
||||||
input[type=checkbox]:checked ~ .box {
|
input[type=checkbox]:checked ~ .box {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0) rotate(-180deg);
|
transform: scale(0) rotate(-180deg);
|
||||||
}
|
}
|
||||||
input[type=checkbox]:checked ~ .bubble {
|
.variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success);
|
||||||
background: @input-checked;
|
|
||||||
}
|
|
||||||
input[type=checkbox]:checked ~ .check {
|
input[type=checkbox]:checked ~ .check {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1) rotate(45deg);
|
transform: scale(1) rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type=checkbox][disabled] ~ .ripple {
|
||||||
|
background-color: @lightbg-text;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Bootstrap Material</title>
|
<title>Bootstrap Material</title>
|
||||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
|
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
|
||||||
<link href="material/material.css" rel="stylesheet">
|
<link href="material.css" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold;padding: 5px 10px;}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 0;background-color:#141d27;color:#fff;text-align:center}.splash h1{font-size:4em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor a:hover{text-decoration:none}@media (max-width:767px){#banner{margin-bottom:2em;text-align:center}}
|
body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold;padding: 5px 10px;}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 0;background-color:#141d27;color:#fff;text-align:center}.splash h1{font-size:4em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor a:hover{text-decoration:none}@media (max-width:767px){#banner{margin-bottom:2em;text-align:center}}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1286,6 +1286,6 @@
|
||||||
})();
|
})();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script src="material/material.js?v2"></script>
|
<script src="material.js?v0.0.1"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
12
inputs.less
12
inputs.less
|
|
@ -93,6 +93,14 @@
|
||||||
-webkit-animation-fill-mode: forwards;
|
-webkit-animation-fill-mode: forwards;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
select ~ .material-input:before {
|
||||||
|
bottom: 1px;
|
||||||
|
}
|
||||||
|
select ~ .material-input:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
|
|
@ -128,6 +136,10 @@
|
||||||
color: @input-info;
|
color: @input-info;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.variations(~" .material-input:before", background-color, @lightbg-text);
|
||||||
|
.variations(~" input.form-control:focus ~ .material-input:after", background-color, @lightbg-text);
|
||||||
|
.variations(~" .control-label", color, @lightbg-text);
|
||||||
|
.variations(~" input.form-control:focus ~ .floating-label", color, @lightbg-text);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
1081
material.css
1081
material.css
File diff suppressed because it is too large
Load Diff
22
material.js
22
material.js
|
|
@ -6,10 +6,10 @@ $(function (){
|
||||||
$(withRipple).append("<div class=ripple-wrapper><div class=ripple></div></div>");
|
$(withRipple).append("<div class=ripple-wrapper><div class=ripple></div></div>");
|
||||||
|
|
||||||
// Add fake-checkbox to material checkboxes
|
// Add fake-checkbox to material checkboxes
|
||||||
$(".checkbox label input").after("<span class=\"bubble\"></span><span class=\"check\"></span><span class=\"box\"></span>");
|
$(".checkbox label input").after("<span class=ripple></span><span class=check></span><span class=box></span>");
|
||||||
|
|
||||||
// Add fake-radio to material radios
|
// Add fake-radio to material radios
|
||||||
$(".radio label input").after("<span class=\"bubble\"></span><span class=\"circle\"></span><span class=\"check\"></span>");
|
$(".radio label input").after("<span class=ripple></span><span class=circle></span><span class=check></span>");
|
||||||
|
|
||||||
// Add elements for material inputs
|
// Add elements for material inputs
|
||||||
$("input.form-control, textarea.form-control, select.form-control").each( function() {
|
$("input.form-control, textarea.form-control, select.form-control").each( function() {
|
||||||
|
|
@ -74,7 +74,7 @@ $(function (){
|
||||||
rippleOut($ripple, $rippleWrapper);
|
rippleOut($ripple, $rippleWrapper);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.on("mouseup", withRipple, function() {
|
.on("mouseup mouseleave", withRipple, function() {
|
||||||
var $self = $(this),
|
var $self = $(this),
|
||||||
$rippleWrapper = $self.find(".ripple-wrapper"),
|
$rippleWrapper = $self.find(".ripple-wrapper"),
|
||||||
$ripple = $self.find(".ripple");
|
$ripple = $self.find(".ripple");
|
||||||
|
|
@ -87,23 +87,23 @@ $(function (){
|
||||||
|
|
||||||
var rippleOut = function($ripple, $rippleWrapper) {
|
var rippleOut = function($ripple, $rippleWrapper) {
|
||||||
$ripple.attr("class", "ripple ripple-on ripple-out");
|
$ripple.attr("class", "ripple ripple-on ripple-out");
|
||||||
$rippleWrapper.fadeOut(200, function() {
|
$rippleWrapper.fadeOut(800, function() {
|
||||||
$rippleWrapper.attr("class", "ripple-wrapper").attr("style", "");
|
$rippleWrapper.attr("class", "ripple-wrapper").attr("style", "");
|
||||||
$ripple.attr("class", "ripple").attr("style", "");
|
$ripple.attr("class", "ripple").attr("style", "");
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// Material inputs engine (bubble effect)
|
// Material inputs engine (ripple effect)
|
||||||
$(document).on("click", ".checkbox label, .radio label", function() {
|
$(document).on("click", ".checkbox label, .radio label", function() {
|
||||||
var $bubble = $(this).find(".bubble"),
|
var $ripple = $(this).find(".ripple"),
|
||||||
timestamp = "t" + new Date().getTime();
|
timestamp = "t" + new Date().getTime();
|
||||||
$bubble.attr("class", "bubble");
|
$ripple.attr("class", "ripple");
|
||||||
$bubble.addClass("animate").addClass(timestamp);
|
$ripple.addClass("animate").addClass(timestamp);
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
if ($bubble.hasClass(timestamp)) {
|
if ($ripple.hasClass(timestamp)) {
|
||||||
$bubble.removeClass("animate").removeClass(timestamp);
|
$ripple.removeClass("animate").removeClass(timestamp);
|
||||||
}
|
}
|
||||||
}, 200);
|
}, 800);
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on("change", ".form-control", function() {
|
$(document).on("change", ".form-control", function() {
|
||||||
|
|
|
||||||
|
|
@ -5,11 +5,18 @@
|
||||||
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
|
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
|
||||||
|
|
||||||
@import "variables.less";
|
@import "variables.less";
|
||||||
|
@import "mixins.less";
|
||||||
@import "animations.less";
|
@import "animations.less";
|
||||||
@import "shadows.less";
|
@import "shadows.less";
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #EEEEEE;
|
background-color: #EEEEEE;
|
||||||
|
&.inverse {
|
||||||
|
background: #333333;
|
||||||
|
&, .form-control {
|
||||||
|
color: @darkbg-text;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
|
|
@ -31,8 +38,11 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
// Text inputs
|
// Text inputs
|
||||||
@import "inputs.less";
|
@import "inputs.less";
|
||||||
|
|
||||||
|
legend {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container, .container-fluid {
|
||||||
.well, .jumbotron {
|
.well, .jumbotron {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
.shadow-z-2();
|
.shadow-z-2();
|
||||||
|
|
|
||||||
78
mixins.less
Normal file
78
mixins.less
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
// main: material.less
|
||||||
|
|
||||||
|
// usage: .variations(~" .check", color, transparent);
|
||||||
|
.variations(@extra, @property, @default) {
|
||||||
|
// Bootstrap shades
|
||||||
|
&@{extra}, &-default@{extra} {
|
||||||
|
@{property}: @default;
|
||||||
|
}
|
||||||
|
&-primary@{extra} {
|
||||||
|
@{property}: @primary;
|
||||||
|
}
|
||||||
|
&-success@{extra} {
|
||||||
|
@{property}: @success;
|
||||||
|
}
|
||||||
|
&-info@{extra} {
|
||||||
|
@{property}: @info;
|
||||||
|
}
|
||||||
|
&-warning@{extra} {
|
||||||
|
@{property}: @warning;
|
||||||
|
}
|
||||||
|
&-danger@{extra} {
|
||||||
|
@{property}: @danger;
|
||||||
|
}
|
||||||
|
// Material shades
|
||||||
|
&-material-red@{extra} {
|
||||||
|
@{property}: @red;
|
||||||
|
}
|
||||||
|
&-material-pink@{extra} {
|
||||||
|
@{property}: @pink;
|
||||||
|
}
|
||||||
|
&-material-purple@{extra} {
|
||||||
|
@{property}: @purple;
|
||||||
|
}
|
||||||
|
&-material-deeppurple@{extra} {
|
||||||
|
@{property}: @deeppurple;
|
||||||
|
}
|
||||||
|
&-material-indigo@{extra} {
|
||||||
|
@{property}: @indigo;
|
||||||
|
}
|
||||||
|
&-material-lightblue@{extra} {
|
||||||
|
@{property}: @lightblue;
|
||||||
|
}
|
||||||
|
&-material-cyan@{extra} {
|
||||||
|
@{property}: @cyan;
|
||||||
|
}
|
||||||
|
&-material-teal@{extra} {
|
||||||
|
@{property}: @teal;
|
||||||
|
}
|
||||||
|
&-material-lightgreen@{extra} {
|
||||||
|
@{property}: @lightgreen;
|
||||||
|
}
|
||||||
|
&-material-lime@{extra} {
|
||||||
|
@{property}: @lime;
|
||||||
|
}
|
||||||
|
&-material-lightyellow@{extra} {
|
||||||
|
@{property}: @lightyellow;
|
||||||
|
}
|
||||||
|
&-material-orange@{extra} {
|
||||||
|
@{property}: @orange;
|
||||||
|
}
|
||||||
|
&-material-deeporange@{extra} {
|
||||||
|
@{property}: @deeporange;
|
||||||
|
}
|
||||||
|
&-material-grey@{extra} {
|
||||||
|
@{property}: @grey;
|
||||||
|
}
|
||||||
|
&-material-bluegrey@{extra} {
|
||||||
|
@{property}: @bluegrey;
|
||||||
|
}
|
||||||
|
&-material-brown@{extra} {
|
||||||
|
@{property}: @brown;
|
||||||
|
}
|
||||||
|
&-material-lightgrey@{extra} {
|
||||||
|
@{property}: @lightgrey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@all-variations: ~"-default, -primary, -info, -success, -warning, -danger";
|
||||||
26
navbar.less
26
navbar.less
|
|
@ -65,7 +65,7 @@
|
||||||
|
|
||||||
.navbar-collapse,
|
.navbar-collapse,
|
||||||
.navbar-form {
|
.navbar-form {
|
||||||
border-color: darken(@navbar-default-bg, 7%);
|
border-color: rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dropdowns
|
// Dropdowns
|
||||||
|
|
@ -154,27 +154,9 @@
|
||||||
::-moz-placeholder { color: @navbar-border; };
|
::-moz-placeholder { color: @navbar-border; };
|
||||||
:-ms-input-placeholder { color: @navbar-border; };
|
:-ms-input-placeholder { color: @navbar-border; };
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
.variations(~"", background-color, @primary);
|
||||||
&-primary {
|
&-inverse {
|
||||||
background-color: @navbar-default-bg;
|
background-color: @indigo;
|
||||||
.navbar-collapse, .navbar-form { border-color: darken(@navbar-default-bg, 7%); }
|
|
||||||
}
|
|
||||||
&-success {
|
|
||||||
background-color: @navbar-success-bg;
|
|
||||||
.navbar-collapse, .navbar-form { border-color: darken(@navbar-success-bg, 7%); }
|
|
||||||
}
|
|
||||||
&-info { background-color: @navbar-info-bg;
|
|
||||||
.navbar-collapse, .navbar-form { border-color: darken(@navbar-info-bg, 7%); }
|
|
||||||
}
|
|
||||||
&-warning { background-color: @navbar-warning-bg;
|
|
||||||
.navbar-collapse, .navbar-form { border-color: darken(@navbar-warning-bg, 7%); }
|
|
||||||
}
|
|
||||||
&-danger { background-color: @navbar-danger-bg;
|
|
||||||
.navbar-collapse, .navbar-form { border-color: darken(@navbar-danger-bg, 7%); }
|
|
||||||
}
|
|
||||||
&-inverse { background-color: @navbar-inverse-bg;
|
|
||||||
.navbar-collapse, .navbar-form { border-color: darken(@navbar-inverse-bg, 7%); }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,17 +7,6 @@
|
||||||
background: #c8c8c8;
|
background: #c8c8c8;
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
&, &-info {
|
.variations(~"", background-color, @primary);
|
||||||
background-color: @progress-info;
|
|
||||||
}
|
|
||||||
&-warning {
|
|
||||||
background-color: @progress-warning;
|
|
||||||
}
|
|
||||||
&-danger {
|
|
||||||
background-color: @progress-danger;
|
|
||||||
}
|
|
||||||
&-success {
|
|
||||||
background-color: @progress-success;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
32
radios.less
32
radios.less
|
|
@ -15,8 +15,8 @@
|
||||||
top: 2px;
|
top: 2px;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
.bubble {
|
.ripple {
|
||||||
background: @input-unchecked;
|
background-color: @lightbg-text;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: -8px;
|
top: -8px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
|
|
@ -25,13 +25,15 @@
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
transition: transform .1s, opacity 0.2s 0.4s;
|
transition: transform .1s, opacity 0.2s 0.4s;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
opacity: 0.2;
|
||||||
|
margin: 0;
|
||||||
&.animate {
|
&.animate {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.circle {
|
.circle {
|
||||||
border: 2px solid #5A5F5A;
|
border: 2px solid @lightbg-text;
|
||||||
height: 15px;
|
height: 15px;
|
||||||
width: 15px;
|
width: 15px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
|
@ -44,21 +46,23 @@
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.radio {
|
.variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
|
||||||
&-default .check { background-color: @radio-default; }
|
.variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
|
||||||
&-primary .check { background-color: @radio-primary; }
|
|
||||||
&-success .check { background-color: @radio-success; }
|
input[type=radio][disabled] ~ .check,
|
||||||
&-info { background-color: @radio-info; }
|
input[type=radio][disabled] ~ .circle {
|
||||||
&-warning .check { background-color: @radio-warning; }
|
opacity: 0.5;
|
||||||
&-danger .check { background-color: @radio-danger; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=radio] { display: none; }
|
input[type=radio] { display: none; }
|
||||||
input[type=radio]:checked ~ .check {
|
input[type=radio]:checked ~ .check {
|
||||||
transform: scale(1);
|
transform: scale(0.55);
|
||||||
}
|
}
|
||||||
input[type=radio]:checked ~ .circle {
|
input[type=radio][disabled] ~ .circle {
|
||||||
transform: scale(1);
|
border-color: @lightbg-text;
|
||||||
border: 1px;
|
}
|
||||||
|
input[type=radio][disabled] ~ .check {
|
||||||
|
background-color: @lightbg-text;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.ripple.ripple-out {
|
.ripple.ripple-out {
|
||||||
-webkit-transition: opacity 0.2s linear 0s !important;
|
-webkit-transition: opacity 1s linear 0s !important;
|
||||||
transition: opacity 0.2s linear 0s !important;
|
transition: opacity 0.8s linear 0s !important;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
BIN
screenshots/palette.jpg
Normal file
BIN
screenshots/palette.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
|
|
@ -6,6 +6,7 @@
|
||||||
> a {
|
> a {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
|
||||||
120
variables.less
120
variables.less
|
|
@ -1,65 +1,101 @@
|
||||||
// main: material.less
|
// main: material.less
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Material colors palette
|
||||||
|
@red: #F44336;
|
||||||
|
@pink: #E91E63;
|
||||||
|
@purple: #9C27B0;
|
||||||
|
@deeppurple: #673AB7;
|
||||||
|
@indigo: #3F51B5;
|
||||||
|
@lightblue: #03A9F4;
|
||||||
|
@cyan: #00BCD4;
|
||||||
|
@teal: #009688;
|
||||||
|
@lightgreen: #8BC34A;
|
||||||
|
@lime: #CDDC39;
|
||||||
|
@lightyellow: #FFEB3B;
|
||||||
|
@orange: #FF9800;
|
||||||
|
@deeporange: #FF5722;
|
||||||
|
@grey: #9E9E9E;
|
||||||
|
@bluegrey: #607D8B;
|
||||||
|
@brown: #795548;
|
||||||
|
@lightgrey: #ECECEC;
|
||||||
|
|
||||||
|
// Bootstrap shades
|
||||||
|
@primary: #4285F4;
|
||||||
|
@success: #0F9D58;
|
||||||
|
@info: #3498DB;
|
||||||
|
@warning: @deeporange;
|
||||||
|
@danger: @red;
|
||||||
|
|
||||||
|
// Typography elements for Material
|
||||||
|
@darkbg-text: #FFFFFF;
|
||||||
|
@lightbg-text: #4D4D4D;
|
||||||
|
@icon-color: rgba(0,0,0,0.5);
|
||||||
|
|
||||||
|
|
||||||
|
// Bootstrap variables
|
||||||
@btn-default: transparent;
|
@btn-default: transparent;
|
||||||
@btn-default-text: #000000;
|
@btn-default-text: @lightbg-text;
|
||||||
|
|
||||||
@btn-primary: #4285F4;
|
@btn-primary: @primary;
|
||||||
@btn-primary-text: #FFFFFF;
|
@btn-primary-text: @darkbg-text;
|
||||||
|
|
||||||
@btn-success: #0F9D58;
|
@btn-success: @success;
|
||||||
@btn-success-text: #FFFFFF;
|
@btn-success-text: @darkbg-text;
|
||||||
|
|
||||||
@btn-info: #3498DB;
|
@btn-info: @info;
|
||||||
@btn-info-text: #FFFFFF;
|
@btn-info-text: @darkbg-text;
|
||||||
|
|
||||||
@btn-warning: #FF5722;
|
@btn-warning: @warning;
|
||||||
@btn-warning-text: #FFFFFF;
|
@btn-warning-text: @darkbg-text;
|
||||||
|
|
||||||
@btn-danger: #DB4437;
|
@btn-danger: @danger;
|
||||||
@btn-danger-text: #FFFFFF;
|
@btn-danger-text: @darkbg-text;
|
||||||
|
|
||||||
@input-unchecked: rgba(137, 137, 137, 0.3);
|
@input-unchecked: rgba(137, 137, 137, 0.3);
|
||||||
@input-checked: rgba(15, 157, 88, 0.3);
|
@input-checked: rgba(15, 157, 88, 0.3);
|
||||||
|
|
||||||
@radio-default: #5A5F5A;
|
@radio-default: @lightbg-text;
|
||||||
@radio-primary: @btn-primary;
|
@radio-primary: @primary;
|
||||||
@radio-success: @btn-success;
|
@radio-success: @success;
|
||||||
@radio-info: @btn-info;
|
@radio-info: @info;
|
||||||
@radio-warning: @btn-warning;
|
@radio-warning: @warning;
|
||||||
@radio-danger: @btn-danger;
|
@radio-danger: @danger;
|
||||||
|
|
||||||
@input-danger: @btn-danger;
|
@input-danger: @danger;
|
||||||
@input-default: #5264AE;
|
@input-default: #5264AE;
|
||||||
@input-warning: @btn-warning;
|
@input-warning: @warning;
|
||||||
@input-success: @btn-success;
|
@input-success: @success;
|
||||||
@input-info: @btn-info;
|
@input-info: @info;
|
||||||
|
|
||||||
@navbar-danger-bg: @btn-danger;
|
@navbar-danger-bg: @danger;
|
||||||
@navbar-inverse-bg: #5264AE;
|
@navbar-inverse-bg: #5264AE;
|
||||||
@navbar-warning-bg: @btn-warning;
|
@navbar-warning-bg: @warning;
|
||||||
@navbar-success-bg: @btn-success;
|
@navbar-success-bg: @success;
|
||||||
@navbar-info-bg: @btn-info;
|
@navbar-info-bg: @info;
|
||||||
@navbar-default-bg: @btn-primary;
|
@navbar-default-bg: @primary;
|
||||||
@navbar-color: #FFFFFF;
|
@navbar-color: @darkbg-text;
|
||||||
@navbar-link-color: #FFFFFF;
|
@navbar-link-color: @darkbg-text;
|
||||||
@navbar-link-hover-color: #FFFFFF;
|
@navbar-link-hover-color: @darkbg-text;
|
||||||
@navbar-link-hover-bg: transparent;
|
@navbar-link-hover-bg: transparent;
|
||||||
@navbar-link-active-color: #FFFFFF;
|
@navbar-link-active-color: @darkbg-text;
|
||||||
@navbar-link-active-bg: rgba(0,0,0,0.05);
|
@navbar-link-active-bg: rgba(0,0,0,0.05);
|
||||||
@navbar-link-disabled-color: #E5E5E5;
|
@navbar-link-disabled-color: #E5E5E5;
|
||||||
@navbar-link-disabled-bg: transparent;
|
@navbar-link-disabled-bg: transparent;
|
||||||
@navbar-brand-color: #FFFFFF;
|
@navbar-brand-color: @darkbg-text;
|
||||||
@navbar-toggle-border-color: #FFFFFF;
|
@navbar-toggle-border-color: @darkbg-text;
|
||||||
@navbar-toggle-hover-bg: transparent;
|
@navbar-toggle-hover-bg: transparent;
|
||||||
@navbar-toggle-icon-bar-bg: #FFFFFF;
|
@navbar-toggle-icon-bar-bg: @darkbg-text;
|
||||||
@navbar-border: #FFFFFF;
|
@navbar-border: @darkbg-text;
|
||||||
|
|
||||||
@alert-success: @btn-success;
|
@alert-success: @success;
|
||||||
@alert-info: @btn-info;
|
@alert-info: @info;
|
||||||
@alert-warning: @btn-warning;
|
@alert-warning: @warning;
|
||||||
@alert-danger: @btn-danger;
|
@alert-danger: @danger;
|
||||||
|
|
||||||
|
@progress-success: @success;
|
||||||
|
@progress-info: @info;
|
||||||
|
@progress-warning: @warning;
|
||||||
|
@progress-danger: @danger;
|
||||||
|
|
||||||
@progress-success: @btn-success;
|
|
||||||
@progress-info: @btn-info;
|
|
||||||
@progress-warning: @btn-warning;
|
|
||||||
@progress-danger: @btn-danger;
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user