mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
Continued work, added support for material colors
This commit is contained in:
Federico Zivolo
parent
6139774f42
commit
2fc4809bf3
17
README.md
17
README.md
|
|
@ -1,7 +1,7 @@
|
|||
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.
|
||||
Just include the theme right after the Bootstrap CSS and include the javascript at the end of your document, everything will be converted to Material Design (paper) style.
|
||||
|
||||
This theme is in early developement and is not ready for production.
|
||||
|
|
@ -31,6 +31,19 @@ Currently supported elements:
|
|||
|
||||
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:
|
||||
|
||||
Add `.btn-flat` to a button to make it flat, without shadows.
|
||||
|
|
|
|||
28
alerts.less
28
alerts.less
|
|
@ -1,26 +1,18 @@
|
|||
// main: material.less
|
||||
|
||||
.alert, .alert-success, .alert-info, .alert-warning, .alert-danger {
|
||||
.alert {
|
||||
border: 0px;
|
||||
border-radius: 0;
|
||||
a, .alert-link {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: #FFFFFF;
|
||||
background-color: @alert-success;
|
||||
}
|
||||
.alert-info {
|
||||
color: #FFFFFF;
|
||||
background-color: @alert-info;
|
||||
}
|
||||
.alert-warning {
|
||||
color: #FFFFFF;
|
||||
background-color: @alert-warning;
|
||||
}
|
||||
.alert-danger {
|
||||
color: #FFFFFF;
|
||||
background-color: @alert-danger;
|
||||
.variations(~"", background-color, #FFFFFF);
|
||||
&-info, &-danger, &-warning, &-success {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
&-default {
|
||||
a, .alert-link {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: @darkbg-text;
|
||||
|
||||
&:hover {
|
||||
color: @darkbg-text;
|
||||
}
|
||||
&:hover:not(.btn-link) {
|
||||
.shadow-z-2-hover();
|
||||
}
|
||||
|
|
@ -27,57 +31,29 @@
|
|||
.shadow-z-3();
|
||||
}
|
||||
outline: none !important;
|
||||
|
||||
.variations(~":not(.btn-link)", background-color, @btn-default);
|
||||
|
||||
}
|
||||
.btn-raised {
|
||||
.btn-shadow();
|
||||
}
|
||||
.btn-default {
|
||||
&, &:hover, &:active, &:focus {
|
||||
background-color: @btn-default;
|
||||
color: @btn-default-text;
|
||||
}
|
||||
// This is needed to style buttons which has not a variation suffix (they must stiled as btn-default)
|
||||
.btn-link, .btn:not([class^="btn btn-"]), .btn-default {
|
||||
color: @lightbg-text;
|
||||
&:hover {
|
||||
background-color: #FFFFFF;
|
||||
color: @lightbg-text;
|
||||
}
|
||||
}
|
||||
.btn-primary {
|
||||
&, &:hover, &:active, &:focus {
|
||||
background-color: @btn-primary;
|
||||
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:not([class^="btn btn-"]), .btn-default {
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-raised {
|
||||
.btn-shadow();
|
||||
}
|
||||
|
||||
.open > .dropdown-toggle.btn {
|
||||
&-default { 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; }
|
||||
.variations(~"", background-color, @btn-default);
|
||||
}
|
||||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
left: 10px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.bubble {
|
||||
background: @input-unchecked;
|
||||
.ripple {
|
||||
background-color: @lightbg-text;
|
||||
left: 0;
|
||||
top: -10px;
|
||||
height: 40px;
|
||||
|
|
@ -24,13 +24,15 @@
|
|||
transform: scale(0);
|
||||
transition: transform .1s, opacity 0.2s 0.4s;
|
||||
z-index: 1;
|
||||
opacity: 0.2;
|
||||
margin: 0;
|
||||
&.animate {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
border: 2px solid #5A5F5A;
|
||||
border: 2px solid @lightbg-text;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
transition-delay: 0.2s;
|
||||
|
|
@ -40,7 +42,7 @@
|
|||
left: 16px;
|
||||
width: 12px;
|
||||
height: 24px;
|
||||
border: 2px solid #0F9D58;
|
||||
border: 2px solid;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
opacity: 0;
|
||||
|
|
@ -48,18 +50,28 @@
|
|||
transform: rotate(45deg);
|
||||
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]:checked ~ .box {
|
||||
opacity: 0;
|
||||
transform: scale(0) rotate(-180deg);
|
||||
}
|
||||
input[type=checkbox]:checked ~ .bubble {
|
||||
background: @input-checked;
|
||||
}
|
||||
.variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success);
|
||||
input[type=checkbox]:checked ~ .check {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
|
||||
input[type=checkbox][disabled] ~ .ripple {
|
||||
background-color: @lightbg-text;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Bootstrap Material</title>
|
||||
<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>
|
||||
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>
|
||||
|
|
@ -1286,6 +1286,6 @@
|
|||
})();
|
||||
|
||||
</script>
|
||||
<script src="material/material.js?v2"></script>
|
||||
<script src="material.js?v0.0.1"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
12
inputs.less
12
inputs.less
|
|
@ -93,6 +93,14 @@
|
|||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
select ~ .material-input:before {
|
||||
bottom: 1px;
|
||||
}
|
||||
select ~ .material-input:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
|
@ -128,6 +136,10 @@
|
|||
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>");
|
||||
|
||||
// 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
|
||||
$(".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
|
||||
$("input.form-control, textarea.form-control, select.form-control").each( function() {
|
||||
|
|
@ -74,7 +74,7 @@ $(function (){
|
|||
rippleOut($ripple, $rippleWrapper);
|
||||
}
|
||||
})
|
||||
.on("mouseup", withRipple, function() {
|
||||
.on("mouseup mouseleave", withRipple, function() {
|
||||
var $self = $(this),
|
||||
$rippleWrapper = $self.find(".ripple-wrapper"),
|
||||
$ripple = $self.find(".ripple");
|
||||
|
|
@ -87,23 +87,23 @@ $(function (){
|
|||
|
||||
var rippleOut = function($ripple, $rippleWrapper) {
|
||||
$ripple.attr("class", "ripple ripple-on ripple-out");
|
||||
$rippleWrapper.fadeOut(200, function() {
|
||||
$rippleWrapper.fadeOut(800, function() {
|
||||
$rippleWrapper.attr("class", "ripple-wrapper").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() {
|
||||
var $bubble = $(this).find(".bubble"),
|
||||
var $ripple = $(this).find(".ripple"),
|
||||
timestamp = "t" + new Date().getTime();
|
||||
$bubble.attr("class", "bubble");
|
||||
$bubble.addClass("animate").addClass(timestamp);
|
||||
$ripple.attr("class", "ripple");
|
||||
$ripple.addClass("animate").addClass(timestamp);
|
||||
setTimeout(function() {
|
||||
if ($bubble.hasClass(timestamp)) {
|
||||
$bubble.removeClass("animate").removeClass(timestamp);
|
||||
if ($ripple.hasClass(timestamp)) {
|
||||
$ripple.removeClass("animate").removeClass(timestamp);
|
||||
}
|
||||
}, 200);
|
||||
}, 800);
|
||||
});
|
||||
|
||||
$(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 "variables.less";
|
||||
@import "mixins.less";
|
||||
@import "animations.less";
|
||||
@import "shadows.less";
|
||||
|
||||
body {
|
||||
background-color: #EEEEEE;
|
||||
&.inverse {
|
||||
background: #333333;
|
||||
&, .form-control {
|
||||
color: @darkbg-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
@import "inputs.less";
|
||||
|
||||
legend {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
.container, .container-fluid {
|
||||
.well, .jumbotron {
|
||||
background-color: #fff;
|
||||
.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-form {
|
||||
border-color: darken(@navbar-default-bg, 7%);
|
||||
border-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
|
|
@ -154,27 +154,9 @@
|
|||
::-moz-placeholder { color: @navbar-border; };
|
||||
:-ms-input-placeholder { color: @navbar-border; };
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
&-primary {
|
||||
background-color: @navbar-default-bg;
|
||||
.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%); }
|
||||
.variations(~"", background-color, @primary);
|
||||
&-inverse {
|
||||
background-color: @indigo;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,17 +7,6 @@
|
|||
background: #c8c8c8;
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
&, &-info {
|
||||
background-color: @progress-info;
|
||||
}
|
||||
&-warning {
|
||||
background-color: @progress-warning;
|
||||
}
|
||||
&-danger {
|
||||
background-color: @progress-danger;
|
||||
}
|
||||
&-success {
|
||||
background-color: @progress-success;
|
||||
}
|
||||
.variations(~"", background-color, @primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
32
radios.less
32
radios.less
|
|
@ -15,8 +15,8 @@
|
|||
top: 2px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.bubble {
|
||||
background: @input-unchecked;
|
||||
.ripple {
|
||||
background-color: @lightbg-text;
|
||||
left: 0;
|
||||
top: -8px;
|
||||
height: 34px;
|
||||
|
|
@ -25,13 +25,15 @@
|
|||
transform: scale(0);
|
||||
transition: transform .1s, opacity 0.2s 0.4s;
|
||||
z-index: 1;
|
||||
opacity: 0.2;
|
||||
margin: 0;
|
||||
&.animate {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.circle {
|
||||
border: 2px solid #5A5F5A;
|
||||
border: 2px solid @lightbg-text;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -44,21 +46,23 @@
|
|||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
&.radio {
|
||||
&-default .check { background-color: @radio-default; }
|
||||
&-primary .check { background-color: @radio-primary; }
|
||||
&-success .check { background-color: @radio-success; }
|
||||
&-info { background-color: @radio-info; }
|
||||
&-warning .check { background-color: @radio-warning; }
|
||||
&-danger .check { background-color: @radio-danger; }
|
||||
.variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
|
||||
.variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
|
||||
|
||||
input[type=radio][disabled] ~ .check,
|
||||
input[type=radio][disabled] ~ .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input[type=radio] { display: none; }
|
||||
input[type=radio]:checked ~ .check {
|
||||
transform: scale(1);
|
||||
transform: scale(0.55);
|
||||
}
|
||||
input[type=radio]:checked ~ .circle {
|
||||
transform: scale(1);
|
||||
border: 1px;
|
||||
input[type=radio][disabled] ~ .circle {
|
||||
border-color: @lightbg-text;
|
||||
}
|
||||
input[type=radio][disabled] ~ .check {
|
||||
background-color: @lightbg-text;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
.ripple.ripple-out {
|
||||
-webkit-transition: opacity 0.2s linear 0s !important;
|
||||
transition: opacity 0.2s linear 0s !important;
|
||||
-webkit-transition: opacity 1s linear 0s !important;
|
||||
transition: opacity 0.8s linear 0s !important;
|
||||
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 {
|
||||
color: #FFFFFF;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
|
|
|||
120
variables.less
120
variables.less
|
|
@ -1,65 +1,101 @@
|
|||
// 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-text: #000000;
|
||||
@btn-default-text: @lightbg-text;
|
||||
|
||||
@btn-primary: #4285F4;
|
||||
@btn-primary-text: #FFFFFF;
|
||||
@btn-primary: @primary;
|
||||
@btn-primary-text: @darkbg-text;
|
||||
|
||||
@btn-success: #0F9D58;
|
||||
@btn-success-text: #FFFFFF;
|
||||
@btn-success: @success;
|
||||
@btn-success-text: @darkbg-text;
|
||||
|
||||
@btn-info: #3498DB;
|
||||
@btn-info-text: #FFFFFF;
|
||||
@btn-info: @info;
|
||||
@btn-info-text: @darkbg-text;
|
||||
|
||||
@btn-warning: #FF5722;
|
||||
@btn-warning-text: #FFFFFF;
|
||||
@btn-warning: @warning;
|
||||
@btn-warning-text: @darkbg-text;
|
||||
|
||||
@btn-danger: #DB4437;
|
||||
@btn-danger-text: #FFFFFF;
|
||||
@btn-danger: @danger;
|
||||
@btn-danger-text: @darkbg-text;
|
||||
|
||||
@input-unchecked: rgba(137, 137, 137, 0.3);
|
||||
@input-checked: rgba(15, 157, 88, 0.3);
|
||||
|
||||
@radio-default: #5A5F5A;
|
||||
@radio-primary: @btn-primary;
|
||||
@radio-success: @btn-success;
|
||||
@radio-info: @btn-info;
|
||||
@radio-warning: @btn-warning;
|
||||
@radio-danger: @btn-danger;
|
||||
@radio-default: @lightbg-text;
|
||||
@radio-primary: @primary;
|
||||
@radio-success: @success;
|
||||
@radio-info: @info;
|
||||
@radio-warning: @warning;
|
||||
@radio-danger: @danger;
|
||||
|
||||
@input-danger: @btn-danger;
|
||||
@input-danger: @danger;
|
||||
@input-default: #5264AE;
|
||||
@input-warning: @btn-warning;
|
||||
@input-success: @btn-success;
|
||||
@input-info: @btn-info;
|
||||
@input-warning: @warning;
|
||||
@input-success: @success;
|
||||
@input-info: @info;
|
||||
|
||||
@navbar-danger-bg: @btn-danger;
|
||||
@navbar-danger-bg: @danger;
|
||||
@navbar-inverse-bg: #5264AE;
|
||||
@navbar-warning-bg: @btn-warning;
|
||||
@navbar-success-bg: @btn-success;
|
||||
@navbar-info-bg: @btn-info;
|
||||
@navbar-default-bg: @btn-primary;
|
||||
@navbar-color: #FFFFFF;
|
||||
@navbar-link-color: #FFFFFF;
|
||||
@navbar-link-hover-color: #FFFFFF;
|
||||
@navbar-warning-bg: @warning;
|
||||
@navbar-success-bg: @success;
|
||||
@navbar-info-bg: @info;
|
||||
@navbar-default-bg: @primary;
|
||||
@navbar-color: @darkbg-text;
|
||||
@navbar-link-color: @darkbg-text;
|
||||
@navbar-link-hover-color: @darkbg-text;
|
||||
@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-disabled-color: #E5E5E5;
|
||||
@navbar-link-disabled-bg: transparent;
|
||||
@navbar-brand-color: #FFFFFF;
|
||||
@navbar-toggle-border-color: #FFFFFF;
|
||||
@navbar-brand-color: @darkbg-text;
|
||||
@navbar-toggle-border-color: @darkbg-text;
|
||||
@navbar-toggle-hover-bg: transparent;
|
||||
@navbar-toggle-icon-bar-bg: #FFFFFF;
|
||||
@navbar-border: #FFFFFF;
|
||||
@navbar-toggle-icon-bar-bg: @darkbg-text;
|
||||
@navbar-border: @darkbg-text;
|
||||
|
||||
@alert-success: @btn-success;
|
||||
@alert-info: @btn-info;
|
||||
@alert-warning: @btn-warning;
|
||||
@alert-danger: @btn-danger;
|
||||
@alert-success: @success;
|
||||
@alert-info: @info;
|
||||
@alert-warning: @warning;
|
||||
@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