mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-20 19:09:15 +03:00
Initial upload.
This commit is contained in:
Federico Zivolo
parent
eb1cd98d72
commit
76c70d2a2e
44
.jshintrc
Normal file
44
.jshintrc
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
{
|
||||
"bitwise": true,
|
||||
"camelcase": true,
|
||||
"curly": true,
|
||||
"eqeqeq": false,
|
||||
"es3": false,
|
||||
"forin": true,
|
||||
"freeze": false,
|
||||
"immed": true,
|
||||
"indent": 4,
|
||||
"latedef": true,
|
||||
"newcap": true,
|
||||
"noarg": true,
|
||||
"noempty": true,
|
||||
"nonbsp": true,
|
||||
"nonew": true,
|
||||
"plusplus": false,
|
||||
"quotmark": "double",
|
||||
"undef": true,
|
||||
"unused": true,
|
||||
"strict": false,
|
||||
"trailing": true,
|
||||
"maxparams": 5,
|
||||
"maxdepth": 5,
|
||||
"maxstatements": 50,
|
||||
"maxlen": 150,
|
||||
|
||||
"eqnull": true,
|
||||
|
||||
"browser": false,
|
||||
"devel": false,
|
||||
"node": true,
|
||||
|
||||
"white": true,
|
||||
|
||||
"globals": {
|
||||
"$": true,
|
||||
"document": true,
|
||||
"brackets": true,
|
||||
"define": true,
|
||||
"Mustache": true,
|
||||
"window": true
|
||||
}
|
||||
}
|
||||
26
alerts.less
Normal file
26
alerts.less
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// main: material.less
|
||||
|
||||
.alert, .alert-success, .alert-info, .alert-warning, .alert-danger {
|
||||
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;
|
||||
}
|
||||
44
animations.less
Normal file
44
animations.less
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
// main: material.less
|
||||
|
||||
@-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;
|
||||
}
|
||||
}
|
||||
820
bootstrap.css
vendored
Normal file
820
bootstrap.css
vendored
Normal file
|
|
@ -0,0 +1,820 @@
|
|||
/* 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;
|
||||
}
|
||||
109
buttons.less
Normal file
109
buttons.less
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
// main: material.less
|
||||
|
||||
.btn-shadow() {
|
||||
.shadow-z-2();
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
&:active:not(.btn-link) {
|
||||
.shadow-z-3();
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding: 8px 30px;
|
||||
border: 0;
|
||||
margin: 10px 1px;
|
||||
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover:not(.btn-link) {
|
||||
.shadow-z-2-hover();
|
||||
}
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
&:active:not(.btn-link) {
|
||||
.shadow-z-3();
|
||||
}
|
||||
outline: none !important;
|
||||
}
|
||||
.btn-raised {
|
||||
.btn-shadow();
|
||||
}
|
||||
.btn-default {
|
||||
&, &:hover, &:active, &:focus {
|
||||
background-color: @btn-default;
|
||||
color: @btn-default-text;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
&.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group, .btn-group-vertical {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
margin: 10px 1px;
|
||||
|
||||
.btn-shadow();
|
||||
&.open .dropdown-toggle {
|
||||
box-shadow: none;
|
||||
}
|
||||
&.btn-group-raised {
|
||||
.btn-shadow();
|
||||
}
|
||||
.btn, .btn:active, .btn-group {
|
||||
box-shadow: none !important;
|
||||
margin: 0;
|
||||
}
|
||||
.btn:active .caret { margin-left: -1px; }
|
||||
}
|
||||
.btn-group-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
65
checkboxes.less
Normal file
65
checkboxes.less
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
// main: material.less
|
||||
|
||||
.form-horizontal .checkbox {
|
||||
padding-top: 15px;
|
||||
}
|
||||
.checkbox {
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 45px;
|
||||
position: relative;
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.bubble {
|
||||
background: @input-unchecked;
|
||||
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;
|
||||
&.animate {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
border: 2px solid #5A5F5A;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
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;
|
||||
}
|
||||
input[type=checkbox]:checked ~ .check {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
}
|
||||
1291
index.html
Normal file
1291
index.html
Normal file
File diff suppressed because it is too large
Load Diff
160
inputs.less
Normal file
160
inputs.less
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
// main: material.less
|
||||
|
||||
.form-control-wrapper {
|
||||
position: relative;
|
||||
.form-control, .form-control:focus {
|
||||
float: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #757575;
|
||||
}
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.material-input:after {
|
||||
|
||||
}
|
||||
|
||||
.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:focus ~ .floating-label {
|
||||
top: -10px;
|
||||
font-size: 10px;
|
||||
color: @input-default;
|
||||
}
|
||||
.form-control:not(.empty) ~ .floating-label {
|
||||
top: -10px;
|
||||
font-size: 10px;
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control:focus:invalid ~ .floating-label {
|
||||
color: @input-danger;
|
||||
}
|
||||
.form-control:focus ~ .material-input:after {
|
||||
background-color: @input-default;
|
||||
}
|
||||
.form-control:focus:invalid ~ .material-input {
|
||||
&:before, &:after {
|
||||
background-color: @input-danger;
|
||||
}
|
||||
}
|
||||
.form-control.empty ~ .floating-label {
|
||||
opacity: 1;
|
||||
}
|
||||
.material-input:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background-color: @input-default;
|
||||
bottom: -1px;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0s;
|
||||
}
|
||||
.form-control:focus ~ .material-input:before {
|
||||
transform: scaleX(1);
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
.material-input:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 100px;
|
||||
margin-top: -1px;
|
||||
top: 25%;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.input-lg ~ .material-input:after {
|
||||
height: 26px;
|
||||
}
|
||||
textarea { resize: none; }
|
||||
textarea ~ .form-control-highlight {
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
/* active state */
|
||||
.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, input.form-control:focus ~ .material-input:after {
|
||||
background: @input-warning;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: @input-warning;
|
||||
}
|
||||
}
|
||||
&.has-error {
|
||||
.material-input:before, input.form-control:focus ~ .material-input:after {
|
||||
background: @input-danger;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: @input-danger;
|
||||
}
|
||||
}
|
||||
&.has-success {
|
||||
.material-input:before, input.form-control:focus ~ .material-input:after {
|
||||
background: @input-success;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: @input-success;
|
||||
}
|
||||
}
|
||||
&.has-info {
|
||||
.material-input:before, input.form-control:focus ~ .material-input:after {
|
||||
background: @input-info;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: @input-info;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.form-control-wrapper {
|
||||
.form-control {
|
||||
float: none;
|
||||
}
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
bottom: -10px;
|
||||
}
|
||||
.input-group-addon {
|
||||
border: 0;
|
||||
}
|
||||
.input-group-btn .btn {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid #757575;
|
||||
border-radius: 0;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
}
|
||||
}
|
||||
844
material.css
Normal file
844
material.css
Normal file
|
|
@ -0,0 +1,844 @@
|
|||
/* 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;
|
||||
}
|
||||
.nav-tabs {
|
||||
background: #4285f4;
|
||||
}
|
||||
.nav-tabs > li > a {
|
||||
color: #FFFFFF;
|
||||
border: 0;
|
||||
}
|
||||
.nav-tabs > li > a:hover {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.nav-tabs > li.active > a,
|
||||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.open > a,
|
||||
.nav-tabs > li.open > a:hover {
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
color: #FFFFFF !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-tabs > li.disabled > a,
|
||||
.nav-tabs > li.disabled > a:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
111
material.js
Normal file
111
material.js
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
$(function (){
|
||||
// with ripple elements
|
||||
var withRipple = ".btn:not('.btn-link'), .navbar a, .nav-tabs a";
|
||||
|
||||
// Add ripple elements to material buttons
|
||||
$(withRipple).append("<svg class=ripple-wrapper><defs></defs><g><ellipse rx=20 ry=20 class=ripple></ellipse></g></svg>");
|
||||
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$(".checkbox label input").after("<span class=\"bubble\"></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>");
|
||||
|
||||
// Add elements for material inputs
|
||||
$("input.form-control, textarea.form-control").each( function() {
|
||||
$(this).wrap("<div class=form-control-wrapper></div>");
|
||||
$(this).after("<span class=material-input></span>");
|
||||
if ($(this).hasClass("floating-label")) {
|
||||
var placeholder = $(this).attr("placeholder");
|
||||
$(this).attr("placeholder", null).removeClass("floating-label");
|
||||
$(this).after("<div class=floating-label>" + placeholder + "</div>");
|
||||
}
|
||||
if ($(this).val() === "") {
|
||||
$(this).addClass("empty");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var mouseDown = false;
|
||||
$(document).mousedown(function() {
|
||||
mouseDown = true;
|
||||
}).mouseup(function() {
|
||||
mouseDown = false;
|
||||
});
|
||||
|
||||
// Material buttons engine
|
||||
$(document).on("mousedown", withRipple, function(e){
|
||||
// Cache elements
|
||||
var $self = $(this),
|
||||
$rippleWrapper = $self.find(".ripple-wrapper"),
|
||||
$ripple = $self.find(".ripple");
|
||||
|
||||
// Remove previous animation
|
||||
$ripple.attr("class", "ripple");
|
||||
$rippleWrapper.stop(true, true);
|
||||
|
||||
// Get mouse position
|
||||
var parentOffset = $self.offset();
|
||||
var relX = e.pageX - parentOffset.left;
|
||||
var relY = e.pageY - parentOffset.top;
|
||||
|
||||
// Move ripple to the click position
|
||||
$ripple.attr({"cy":relY, "cx": relX});
|
||||
|
||||
// Start the animation
|
||||
$rippleWrapper.attr("class", "ripple-wrapper").data("animating", true);
|
||||
$ripple.attr("class", "ripple ripple-on").css("transform", "scale(" + $rippleWrapper.width() / 20 + ")");
|
||||
setTimeout(function() {
|
||||
$rippleWrapper.attr("class", "ripple-wrapper").data("animating", false).trigger("rippleEnd");
|
||||
}, 500);
|
||||
})
|
||||
.on("rippleEnd", withRipple, function() {
|
||||
if (!mouseDown) {
|
||||
var $self = $(this),
|
||||
$rippleWrapper = $self.find(".ripple-wrapper"),
|
||||
$ripple = $self.find(".ripple");
|
||||
|
||||
rippleOut($ripple, $rippleWrapper);
|
||||
}
|
||||
})
|
||||
.on("mouseup", withRipple, function() {
|
||||
var $self = $(this),
|
||||
$rippleWrapper = $self.find(".ripple-wrapper"),
|
||||
$ripple = $self.find(".ripple");
|
||||
|
||||
if (!$rippleWrapper.data("animating")) {
|
||||
rippleOut($ripple, $rippleWrapper);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var rippleOut = function($ripple, $rippleWrapper) {
|
||||
$ripple.attr("class", "ripple ripple-on ripple-out");
|
||||
$rippleWrapper.fadeOut(200, function() {
|
||||
$rippleWrapper.attr("class", "ripple-wrapper").attr("style", "");
|
||||
$ripple.attr("class", "ripple").attr("style", "");
|
||||
});
|
||||
};
|
||||
|
||||
// Material inputs engine (bubble effect)
|
||||
$(document).on("click", ".checkbox label, .radio label", function() {
|
||||
var $bubble = $(this).find(".bubble"),
|
||||
timestamp = "t" + new Date().getTime();
|
||||
$bubble.attr("class", "bubble");
|
||||
$bubble.addClass("animate").addClass(timestamp);
|
||||
setTimeout(function() {
|
||||
if ($bubble.hasClass(timestamp)) {
|
||||
$bubble.removeClass("animate").removeClass(timestamp);
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
|
||||
$(document).on("change", ".form-control", function() {
|
||||
if ($(this).val() !== "") {
|
||||
$(this).removeClass("empty");
|
||||
} else {
|
||||
$(this).addClass("empty");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
115
material.less
Normal file
115
material.less
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
// out: material.css
|
||||
// Material Theme 0.0.1
|
||||
// -----------------------------------------------------
|
||||
|
||||
@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 "animations.less";
|
||||
@import "shadows.less";
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
@import "buttons.less";
|
||||
|
||||
// Ripple effect
|
||||
@import "ripple.less";
|
||||
|
||||
// Checkboxes
|
||||
@import "checkboxes.less";
|
||||
|
||||
// Radios
|
||||
@import "radios.less";
|
||||
|
||||
// Text inputs
|
||||
@import "inputs.less";
|
||||
|
||||
|
||||
.container {
|
||||
.well, .jumbotron {
|
||||
background-color: #fff;
|
||||
.shadow-z-2();
|
||||
border-radius: 2px;
|
||||
p {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.shadow-z-2();
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
.modal-header {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: 0;
|
||||
.btn+.btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
.shadow-z-2();
|
||||
border-radius: 2px;
|
||||
.list-group-item:last-child {
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
.list-group-item:first-child {
|
||||
border-top-right-radius: 2px;
|
||||
boborder-top-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar
|
||||
@import "navbar.less";
|
||||
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
.divider {
|
||||
background-color: rgba(229, 229, 229, 0.12);
|
||||
}
|
||||
li {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alerts
|
||||
@import "alerts.less";
|
||||
|
||||
// Progress bar
|
||||
@import "progress.less";
|
||||
|
||||
// Typography
|
||||
.text-warning {
|
||||
color: @btn-warning;
|
||||
}
|
||||
.text-primary {
|
||||
color: @btn-primary;
|
||||
}
|
||||
.text-danger {
|
||||
color: @btn-danger;
|
||||
}
|
||||
.text-success {
|
||||
color: @btn-success;
|
||||
}
|
||||
.text-info {
|
||||
color: @btn-info;
|
||||
}
|
||||
|
||||
@import "tabs.less";
|
||||
180
navbar.less
Normal file
180
navbar.less
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
// main: material.less
|
||||
|
||||
.navbar {
|
||||
background-color: @navbar-default-bg;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
|
||||
.navbar-brand {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
line-height: 30px;
|
||||
color: @navbar-brand-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-brand-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: @navbar-color;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
> li > a {
|
||||
color: @navbar-link-color;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-hover-color;
|
||||
background-color: @navbar-link-hover-bg;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-active-color;
|
||||
background-color: @navbar-link-active-bg;
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-disabled-color;
|
||||
background-color: @navbar-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Darken the responsive nav toggle
|
||||
.navbar-toggle {
|
||||
border-color: @navbar-toggle-border-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-toggle-hover-bg;
|
||||
}
|
||||
.icon-bar {
|
||||
background-color: @navbar-toggle-icon-bar-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: darken(@navbar-default-bg, 7%);
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
.navbar-nav {
|
||||
> .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-link-active-bg;
|
||||
color: @navbar-link-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
// Dropdowns get custom display
|
||||
.open .dropdown-menu {
|
||||
> .dropdown-header {
|
||||
border: 0;
|
||||
color: darken(@navbar-link-color, 17%)
|
||||
}
|
||||
.divider {
|
||||
background-color: @navbar-border;
|
||||
}
|
||||
> li > a {
|
||||
color: @navbar-link-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-hover-color;
|
||||
background-color: @navbar-link-hover-bg;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-active-color;
|
||||
background-color: @navbar-link-active-bg;
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-disabled-color;
|
||||
background-color: @navbar-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
color: @navbar-link-color;
|
||||
&:hover {
|
||||
color: @navbar-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: @navbar-link-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-hover-color;
|
||||
}
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-form {
|
||||
.form-control-wrapper {
|
||||
.form-control {
|
||||
border-color: @navbar-border;
|
||||
color: @navbar-border;
|
||||
}
|
||||
.material-input:before, input:focus ~ .material-input:after {
|
||||
background-color: @navbar-border;
|
||||
}
|
||||
}
|
||||
::-webkit-input-placeholder { color: @navbar-border; }
|
||||
:-moz-placeholder { color: @navbar-border; };
|
||||
::-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%); }
|
||||
}
|
||||
}
|
||||
23
progress.less
Normal file
23
progress.less
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// main: material.less
|
||||
|
||||
.progress {
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
64
radios.less
Normal file
64
radios.less
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// main: material.less
|
||||
|
||||
.form-horizontal .radio {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.radio {
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 45px;
|
||||
position: relative;
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 2px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.bubble {
|
||||
background: @input-unchecked;
|
||||
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;
|
||||
&.animate {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.circle {
|
||||
border: 2px solid #5A5F5A;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.check {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 100%;
|
||||
background-color: @radio-default;
|
||||
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; }
|
||||
}
|
||||
input[type=radio] { display: none; }
|
||||
input[type=radio]:checked ~ .check {
|
||||
transform: scale(1);
|
||||
}
|
||||
input[type=radio]:checked ~ .circle {
|
||||
transform: scale(1);
|
||||
border: 1px;
|
||||
}
|
||||
|
||||
}
|
||||
34
ripple.less
Normal file
34
ripple.less
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
// main: material.less
|
||||
|
||||
.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;
|
||||
}
|
||||
49
shadows.less
Normal file
49
shadows.less
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
// main: material.less
|
||||
|
||||
|
||||
.shadow-z-1() {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0, .12),
|
||||
0 1px 2px rgba(0,0,0, .24) ;
|
||||
}
|
||||
.shadow-z-1 {
|
||||
.shadow-z-1();
|
||||
}
|
||||
|
||||
.shadow-z-2() {
|
||||
box-shadow: 0 3px 6px rgba(0,0,0, .16),
|
||||
0 3px 6px rgba(0,0,0, .23) ;
|
||||
}
|
||||
.shadow-z-2 {
|
||||
.shadow-z-2();
|
||||
}
|
||||
.shadow-z-2-hover() {
|
||||
box-shadow: 0 3px 6px rgba(0,0,0, .20),
|
||||
0 3px 6px rgba(0,0,0, .28) ;
|
||||
}
|
||||
.shadow-z-2-hover {
|
||||
.shadow-z-2-hover();
|
||||
}
|
||||
|
||||
.shadow-z-3() {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0, .19),
|
||||
0 6px 6px rgba(0,0,0, .23) ;
|
||||
}
|
||||
.shadow-z-3 {
|
||||
.shadow-z-3();
|
||||
}
|
||||
|
||||
.shadow-z-4() {
|
||||
box-shadow: 0 14px 28px rgba(0,0,0, .25),
|
||||
0 10px 10px rgba(0,0,0, .22) ;
|
||||
}
|
||||
.shadow-z-4 {
|
||||
.shadow-z-4();
|
||||
}
|
||||
|
||||
.shadow-z-5() {
|
||||
box-shadow: 0 19px 38px rgba(0,0,0, .30),
|
||||
0 15px 12px rgba(0,0,0, .22) ;
|
||||
}
|
||||
.shadow-z-5 {
|
||||
.shadow-z-5();
|
||||
}
|
||||
25
tabs.less
Normal file
25
tabs.less
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// main: material.less
|
||||
|
||||
.nav-tabs {
|
||||
background: @navbar-default-bg;
|
||||
> li {
|
||||
> a {
|
||||
color: #FFFFFF;
|
||||
border: 0;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
&.active > a, &.active > a:hover, &.open > a, &.open > a:hover {
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
color: #FFFFFF !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
&.disabled > a, &.disabled > a:hover {
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
65
variables.less
Normal file
65
variables.less
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
// main: material.less
|
||||
|
||||
@btn-default: transparent;
|
||||
@btn-default-text: #000000;
|
||||
|
||||
@btn-primary: #4285F4;
|
||||
@btn-primary-text: #FFFFFF;
|
||||
|
||||
@btn-success: #0F9D58;
|
||||
@btn-success-text: #FFFFFF;
|
||||
|
||||
@btn-info: #3498DB;
|
||||
@btn-info-text: #FFFFFF;
|
||||
|
||||
@btn-warning: #FF5722;
|
||||
@btn-warning-text: #FFFFFF;
|
||||
|
||||
@btn-danger: #DB4437;
|
||||
@btn-danger-text: #FFFFFF;
|
||||
|
||||
@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;
|
||||
|
||||
@input-danger: @btn-danger;
|
||||
@input-default: #5264AE;
|
||||
@input-warning: @btn-warning;
|
||||
@input-success: @btn-success;
|
||||
@input-info: @btn-info;
|
||||
|
||||
@navbar-danger-bg: @btn-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-link-hover-bg: transparent;
|
||||
@navbar-link-active-color: #FFFFFF;
|
||||
@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-toggle-hover-bg: transparent;
|
||||
@navbar-toggle-icon-bar-bg: #FFFFFF;
|
||||
@navbar-border: #FFFFFF;
|
||||
|
||||
@alert-success: @btn-success;
|
||||
@alert-info: @btn-info;
|
||||
@alert-warning: @btn-warning;
|
||||
@alert-danger: @btn-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