Preparation for build of a unique CSS
Francis Lachapelle
parent
6040838396
commit
36c931b596
|
|
@ -1,3 +1,5 @@
|
|||
@import 'extends';
|
||||
|
||||
md-backdrop {
|
||||
z-index: $z-index-backdrop;
|
||||
&.md-dialog-backdrop {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
/*! card/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/card/card.scss';
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import 'extends';
|
||||
|
||||
$card-margin: 8px !default;
|
||||
$card-box-shadow: $whiteframe-shadow-z1 !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
/*! checkbox/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/checkbox/checkbox.scss';
|
||||
|
|
@ -1,91 +1 @@
|
|||
$checkbox-width: 18px !default;
|
||||
$checkbox-height: $checkbox-width !default;
|
||||
|
||||
md-checkbox {
|
||||
display: block;
|
||||
margin: 15px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
|
||||
.md-container {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
display: inline-block;
|
||||
width: $checkbox-width;
|
||||
height: $checkbox-height;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.md-ripple-container {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
left: -15px;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
bottom: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
// unchecked
|
||||
.md-icon {
|
||||
transition: 240ms;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $checkbox-width;
|
||||
height: $checkbox-height;
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&.md-checked .md-icon {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// disabled
|
||||
&[disabled] {
|
||||
cursor: no-drop;
|
||||
}
|
||||
|
||||
// focus
|
||||
&:focus .md-label:not(:empty) {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
|
||||
&.md-checked .md-icon:after {
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
display: table;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
border: 2px solid;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.md-label {
|
||||
border: 1px dotted transparent;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
pointer-events: none;
|
||||
user-select: text;
|
||||
}
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! content/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/content/content.scss';
|
||||
|
|
@ -1,28 +1 @@
|
|||
md-content {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&[md-scroll-y] {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
&[md-scroll-x] {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
&[md-scroll-xy] {
|
||||
}
|
||||
|
||||
&.md-padding {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $layout-breakpoint-sm) {
|
||||
md-content.md-padding {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! dialog/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/dialog/dialog.scss';
|
||||
|
|
@ -1,65 +1 @@
|
|||
.md-dialog-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $z-index-dialog;
|
||||
}
|
||||
|
||||
md-dialog {
|
||||
&.transition-in {
|
||||
opacity: 1;
|
||||
transition: $swift-ease-out;
|
||||
transform: translate3d(0,0,0) scale(1.0);
|
||||
}
|
||||
&.transition-out {
|
||||
transition: $swift-ease-out;
|
||||
transform: translate3d(0,100%,0) scale(0.2);
|
||||
}
|
||||
|
||||
opacity: 0;
|
||||
min-width: 240px;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
overflow: hidden; // stop content from leaking out of dialog parent
|
||||
|
||||
box-shadow: $whiteframe-shadow-z5;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
md-content {
|
||||
order: 1;
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
*:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-actions {
|
||||
display: flex;
|
||||
order: 2;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 16px;
|
||||
min-height: $baseline-grid * 5;
|
||||
|
||||
> * {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
&.md-content-overflow .md-actions {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! divider/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/divider/divider.scss';
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import 'extends';
|
||||
|
||||
md-divider {
|
||||
display: block;
|
||||
border-top: 1px solid;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
/// if not compiled in a specific order
|
||||
/// todo : build with grunt
|
||||
///
|
||||
@import "../../../angular-material/src/components/icon/icon.scss";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_variables";
|
||||
// variables in source are not defaulted, we MUST override here
|
||||
// relative (to css) path for src fonts
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
/*! progressCircular/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/progressCircular/progressCircular.scss';
|
||||
|
|
@ -1,159 +1 @@
|
|||
$progress-circular-ease-in-out : cubic-bezier(0.35, 0, 0.25, 1) !default;
|
||||
$progress-circular-duration : 5.25s !default;
|
||||
$progress-circular-circle-duration : $progress-circular-duration * 0.25 !default;
|
||||
$progress-circular-outer-duration : $progress-circular-duration * (5 / 9) !default;
|
||||
$progress-circular-sporadic-duration : $progress-circular-duration !default;
|
||||
$progress-circular-size : 50px !default;
|
||||
|
||||
@keyframes outer-rotate {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes left-wobble {
|
||||
0%, 100% { transform: rotate(130deg); }
|
||||
50% { transform: rotate( -5deg); }
|
||||
}
|
||||
@keyframes right-wobble {
|
||||
0%, 100% { transform: rotate(-130deg); }
|
||||
50% { transform: rotate( 5deg); }
|
||||
}
|
||||
@keyframes sporadic-rotate {
|
||||
12.5% { transform: rotate( 135deg); }
|
||||
25% { transform: rotate( 270deg); }
|
||||
37.5% { transform: rotate( 405deg); }
|
||||
50% { transform: rotate( 540deg); }
|
||||
62.5% { transform: rotate( 675deg); }
|
||||
75% { transform: rotate( 810deg); }
|
||||
87.5% { transform: rotate( 945deg); }
|
||||
100% { transform: rotate(1080deg); }
|
||||
}
|
||||
|
||||
md-progress-circular {
|
||||
width: $progress-circular-size;
|
||||
height: $progress-circular-size;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
overflow: hidden;
|
||||
.md-inner {
|
||||
width: $progress-circular-size;
|
||||
height: $progress-circular-size;
|
||||
position: relative;
|
||||
.md-gap {
|
||||
position: absolute;
|
||||
left: $progress-circular-size * 0.5 - 1;
|
||||
right: $progress-circular-size * 0.5 - 1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-top: 5px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.md-left, .md-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: $progress-circular-size;
|
||||
width: $progress-circular-size * 0.5;
|
||||
overflow: hidden;
|
||||
.md-half-circle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: $progress-circular-size;
|
||||
height: $progress-circular-size;
|
||||
box-sizing: border-box;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: black black transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.md-left {
|
||||
left: 0;
|
||||
.md-half-circle {
|
||||
left: 0;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
.md-right {
|
||||
right: 0;
|
||||
.md-half-circle {
|
||||
right: 0;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$i: 0;
|
||||
@while $i <= 100 {
|
||||
&[value="#{$i}"] {
|
||||
.md-inner {
|
||||
.md-left {
|
||||
.md-half-circle {
|
||||
@if $i <= 50 {
|
||||
transform: rotate(135deg);
|
||||
} @else {
|
||||
transition: transform 0.1s linear;
|
||||
$deg: ($i - 50) / 50 * 180 + 135;
|
||||
transform: rotate(#{$deg}deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.md-right {
|
||||
.md-half-circle {
|
||||
@if $i <= 50 {
|
||||
transition: transform 0.1s linear;
|
||||
$deg: $i / 50 * 180 - 135;
|
||||
transform: rotate(#{$deg}deg);
|
||||
} @else {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.md-gap {
|
||||
border-bottom-width: 5px;
|
||||
border-bottom-style: solid;
|
||||
@if $i <= 50 {
|
||||
border-bottom-color: transparent !important;
|
||||
} @else {
|
||||
transition: border-bottom-color 0.1s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
&:not([md-mode=indeterminate]) {
|
||||
.md-inner {
|
||||
.md-left, .md-right {
|
||||
.md-half-circle {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[md-mode=indeterminate] {
|
||||
.md-spinner-wrapper {
|
||||
animation: outer-rotate $progress-circular-outer-duration linear infinite;
|
||||
.md-inner {
|
||||
animation: sporadic-rotate $progress-circular-sporadic-duration $progress-circular-ease-in-out infinite;
|
||||
.md-left, .md-right {
|
||||
.md-half-circle {
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: ($progress-circular-duration * 0.25);
|
||||
animation-timing-function: $progress-circular-ease-in-out;
|
||||
}
|
||||
}
|
||||
.md-left {
|
||||
.md-half-circle {
|
||||
animation-name: left-wobble;
|
||||
}
|
||||
}
|
||||
.md-right {
|
||||
.md-half-circle {
|
||||
animation-name: right-wobble;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! progressLinear/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/progressLinear/progressLinear.scss';
|
||||
|
|
@ -1,201 +1 @@
|
|||
$progress-linear-bar-height:5px !default;
|
||||
|
||||
md-progress-linear {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $progress-linear-bar-height;
|
||||
|
||||
.md-container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: $progress-linear-bar-height;
|
||||
top: $progress-linear-bar-height;
|
||||
transform: translate(0, 5px) scale(1, 0);
|
||||
transition: all .3s linear;
|
||||
}
|
||||
|
||||
.md-container.md-ready {
|
||||
transform: translate(0, 0) scale(1, 1);
|
||||
}
|
||||
|
||||
.md-bar {
|
||||
height: $progress-linear-bar-height;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.md-bar1, .md-bar2 {
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
&[md-mode=determinate] {
|
||||
.md-bar1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[md-mode=indeterminate] {
|
||||
.md-bar1 {
|
||||
animation: indeterminate1 4s infinite linear;
|
||||
}
|
||||
|
||||
.md-bar2 {
|
||||
animation: indeterminate2 4s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
&[md-mode=buffer] {
|
||||
.md-container {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.md-dashed:before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: $progress-linear-bar-height;
|
||||
width: 100%;
|
||||
margin-top: 0px;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
background-size: 10px 10px !important;
|
||||
background-position: 0px -23px;
|
||||
animation: buffer 3s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
&[md-mode=query] {
|
||||
.md-bar2 {
|
||||
animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes indeterminate1 {
|
||||
0% {
|
||||
transform: translateX(-25%) scale(.5, 1);
|
||||
}
|
||||
10% {
|
||||
transform: translateX(25%) scale(.5, 1);
|
||||
}
|
||||
19.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(-37.5%) scale(.25, 1);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(37.5%) scale(.25, 1);
|
||||
}
|
||||
34.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
36.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
37% {
|
||||
transform: translateX(-37.5%) scale(.25, 1);
|
||||
}
|
||||
47% {
|
||||
transform: translateX(20%) scale(.25, 1);
|
||||
}
|
||||
52% {
|
||||
transform: translateX(35%) scale(.05, 1);
|
||||
}
|
||||
55% {
|
||||
transform: translateX(35%) scale(.1, 1);
|
||||
}
|
||||
58% {
|
||||
transform: translateX(50%) scale(.1, 1);
|
||||
}
|
||||
61.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
69.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
70% {
|
||||
transform: translateX(-37.5%) scale(.25, 1);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(20%) scale(.25, 1);
|
||||
}
|
||||
85% {
|
||||
transform: translateX(35%) scale(.05, 1);
|
||||
}
|
||||
88% {
|
||||
transform: translateX(35%) scale(.1, 1);
|
||||
}
|
||||
91% {
|
||||
transform: translateX(50%) scale(.1, 1);
|
||||
}
|
||||
92.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
93% {
|
||||
transform: translateX(-50%) scale(0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-25%) scale(.5, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes indeterminate2 {
|
||||
0% {
|
||||
transform: translateX(-50%) scale(0, 1);
|
||||
}
|
||||
25.99%{
|
||||
transform: translateX(-50%) scale(0, 1);
|
||||
}
|
||||
28% {
|
||||
transform: translateX(-37.5%) scale(.25, 1);
|
||||
}
|
||||
38% {
|
||||
transform: translateX(37.5%) scale(.25, 1);
|
||||
}
|
||||
42.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
46.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
49.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%) scale(0, 1);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(-25%) scale(.5, 1);
|
||||
}
|
||||
70% {
|
||||
transform: translateX(25%) scale(.5, 1);
|
||||
}
|
||||
79.99% {
|
||||
transform: translateX(50%) scale(0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes query {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(35%) scale(.3, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) scale(0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes buffer {
|
||||
0% {
|
||||
opacity: 1;
|
||||
background-position: 0px -23px;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
background-position: -200px -23px;
|
||||
}
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! radioButton/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/radioButton/radio-button.scss';
|
||||
|
|
@ -1,80 +1 @@
|
|||
$radio-width: 16px !default;
|
||||
$radio-height: $radio-width !default;
|
||||
|
||||
md-radio-button,
|
||||
.md-switch-thumb { // Used in switch
|
||||
display: block;
|
||||
margin: 15px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md-container {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
display: inline-block;
|
||||
width: $radio-width;
|
||||
height: $radio-width;
|
||||
cursor: pointer;
|
||||
|
||||
.md-ripple-container {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: $radio-width * 3;
|
||||
height: $radio-width * 3;
|
||||
left: -$radio-width;
|
||||
top: -$radio-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.md-off {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: $radio-width;
|
||||
height: $radio-width;
|
||||
border: solid 2px;
|
||||
border-radius: 50%;
|
||||
transition: border-color ease 0.28s;
|
||||
}
|
||||
|
||||
.md-on {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $radio-width;
|
||||
height: $radio-width;
|
||||
border-radius: 50%;
|
||||
transition: transform ease 0.28s;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&.md-checked .md-on {
|
||||
transform: scale(0.55);
|
||||
}
|
||||
|
||||
.md-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
pointer-events: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
md-radio-group {
|
||||
border: 1px dotted transparent;
|
||||
display: block;
|
||||
outline: none;
|
||||
}
|
||||
@import "extends";
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! sidenav/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/sidenav/sidenav.scss';
|
||||
|
|
@ -1,93 +1 @@
|
|||
$sidenav-default-width: 304px !default;
|
||||
|
||||
md-sidenav {
|
||||
position: absolute;
|
||||
|
||||
width: $sidenav-default-width;
|
||||
min-width: $sidenav-default-width;
|
||||
bottom: 0;
|
||||
z-index: $z-index-sidenav;
|
||||
background-color: white;
|
||||
overflow: auto;
|
||||
flex-direction: column;
|
||||
|
||||
&.md-closed {
|
||||
display: none;
|
||||
}
|
||||
&.md-closed-add,
|
||||
&.md-closed-remove {
|
||||
display: flex;
|
||||
/* this is required as of 1.3x to properly
|
||||
apply all styling in a show/hide animation */
|
||||
transition: 0s all;
|
||||
}
|
||||
|
||||
&.md-closed-add.md-closed-add-active,
|
||||
&.md-closed-remove.md-closed-remove-active {
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
|
||||
&.md-locked-open-add,
|
||||
&.md-locked-open-remove {
|
||||
position: static;
|
||||
display: flex;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
&.md-locked-open {
|
||||
width: $sidenav-default-width;
|
||||
min-width: $sidenav-default-width;
|
||||
}
|
||||
|
||||
&.md-locked-open,
|
||||
&.md-locked-open.md-closed,
|
||||
&.md-locked-open.md-closed.md-sidenav-left,
|
||||
&.md-locked-open.md-closed.md-sidenav-right,
|
||||
&.md-locked-open-remove.md-closed {
|
||||
position: static;
|
||||
display: flex;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
&.md-locked-open-remove-active {
|
||||
transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
|
||||
min-width $swift-ease-in-duration $swift-ease-in-timing-function;
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&.md-closed.md-locked-open-add {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
transform: translate3d(0%, 0, 0);
|
||||
}
|
||||
|
||||
&.md-closed.md-locked-open-add-active {
|
||||
transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
|
||||
min-width $swift-ease-in-duration $swift-ease-in-timing-function;
|
||||
width: $sidenav-default-width;
|
||||
min-width: $sidenav-default-width;
|
||||
transform: translate3d(0%, 0, 0);
|
||||
}
|
||||
|
||||
@extend .md-sidenav-left;
|
||||
}
|
||||
.md-sidenav-backdrop.md-locked-open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md-sidenav-left {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate3d(0%, 0, 0);
|
||||
&.md-closed {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.md-sidenav-right {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
&.md-closed {
|
||||
transform: translate3d(0%, 0, 0);
|
||||
}
|
||||
}
|
||||
@import "extends";
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! slider/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/slider/slider.scss';
|
||||
|
|
@ -1,269 +1 @@
|
|||
$slider-background-color: rgb(200, 200, 200) !default;
|
||||
$slider-height: 48px !default;
|
||||
|
||||
$slider-track-height: 2px !default;
|
||||
$slider-thumb-width: 32px !default;
|
||||
$slider-thumb-height: $slider-thumb-width !default;
|
||||
|
||||
$slider-thumb-default-scale: 0.5 !default;
|
||||
$slider-thumb-hover-scale: 0.6 !default;
|
||||
$slider-thumb-focus-scale: 0.85 !default;
|
||||
$slider-thumb-disabled-scale: 0.35 !default;
|
||||
$slider-thumb-disabled-border: 6px !default;
|
||||
|
||||
$slider-focus-thumb-width: 48px !default;
|
||||
$slider-focus-thumb-height: $slider-focus-thumb-width !default;
|
||||
$slider-focus-ring-border-width: 3px !default;
|
||||
|
||||
$slider-arrow-height: 16px !default;
|
||||
$slider-arrow-width: 28px !default;
|
||||
|
||||
$slider-sign-height: 28px !default;
|
||||
$slider-sign-width: 28px !default;
|
||||
$slider-sign-top: ($slider-height / 2) - ($slider-thumb-default-scale * $slider-thumb-height / 2) - ($slider-sign-height) - ($slider-arrow-height) + 8px !default;
|
||||
|
||||
@keyframes sliderFocusThumb {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.0);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin slider-thumb-position($width: $slider-thumb-width, $height: $slider-thumb-height) {
|
||||
position: absolute;
|
||||
left: -$width / 2;
|
||||
top: ($slider-height / 2) - ($height / 2);
|
||||
width: $width;
|
||||
height: $height;
|
||||
border-radius: max($width, $height);
|
||||
}
|
||||
|
||||
md-slider {
|
||||
|
||||
height: $slider-height;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
|
||||
/**
|
||||
* Track
|
||||
*/
|
||||
.md-track-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: ($slider-height / 2) - ($slider-track-height) / 2;
|
||||
height: $slider-track-height;
|
||||
}
|
||||
.md-track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.md-track-fill {
|
||||
transition: width 0.05s linear;
|
||||
}
|
||||
.md-track-ticks {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Slider thumb
|
||||
*/
|
||||
.md-thumb-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate3d(0,0,0);
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
.md-thumb {
|
||||
z-index: 1;
|
||||
|
||||
// Positioning the outer area of the thumb 6px bigger than it needs to be keeps
|
||||
// the :after area being clipped by the background of the focus-thumb animation.
|
||||
@include slider-thumb-position($slider-thumb-width + 6, $slider-thumb-height + 6);
|
||||
|
||||
// We render thumb in an :after selector to fix an obscure problem with the
|
||||
// thumb being clipped by the focus-ring and focus-thumb while running the focus
|
||||
// animation.
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
width: $slider-thumb-width;
|
||||
height: $slider-thumb-height;
|
||||
border-radius: max($slider-thumb-width, $slider-thumb-height);
|
||||
border: 3px solid;
|
||||
}
|
||||
|
||||
transform: scale($slider-thumb-default-scale);
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
|
||||
/* The sign that's focused in discrete mode */
|
||||
.md-sign {
|
||||
|
||||
/* Center the children (slider-thumb-text) */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: absolute;
|
||||
left: -($slider-sign-height / 2);
|
||||
top: $slider-sign-top;
|
||||
width: $slider-sign-width;
|
||||
height: $slider-sign-height;
|
||||
border-radius: max($slider-sign-height, $slider-sign-width);
|
||||
|
||||
transform: scale(0.4) translate3d(0,(-$slider-sign-top + 8) / 0.4,0);
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
/* The arrow pointing down under the sign */
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -($slider-sign-width / 2 - $slider-arrow-width / 2);
|
||||
border-radius: $slider-arrow-height;
|
||||
top: 19px;
|
||||
border-left: $slider-arrow-width / 2 solid transparent;
|
||||
border-right: $slider-arrow-width / 2 solid transparent;
|
||||
border-top: $slider-arrow-height solid;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0,-8px,0);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.md-thumb-text {
|
||||
z-index: 1;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The border/background that comes in when focused in non-discrete mode
|
||||
*/
|
||||
.md-focus-thumb {
|
||||
@include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
|
||||
display: none;
|
||||
opacity: 0;
|
||||
background-color: #C0C0C0;
|
||||
animation: sliderFocusThumb 0.4s linear;
|
||||
}
|
||||
.md-focus-ring {
|
||||
@include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
|
||||
border: 2px solid #D6D6D6;
|
||||
background-color: transparent;
|
||||
transform: scale(0);
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
.md-disabled-thumb {
|
||||
@include slider-thumb-position(
|
||||
$slider-thumb-width + $slider-thumb-disabled-border * 2,
|
||||
$slider-thumb-height + $slider-thumb-disabled-border * 2
|
||||
);
|
||||
transform: scale($slider-thumb-disabled-scale);
|
||||
border: $slider-thumb-disabled-border solid;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.md-min {
|
||||
.md-thumb {
|
||||
&:after {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
.md-sign {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Don't animate left/right while panning */
|
||||
&.panning {
|
||||
.md-thumb-container,
|
||||
.md-track-fill {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([md-discrete]) {
|
||||
/* Hide the sign and ticks in non-discrete mode */
|
||||
.md-track-ticks,
|
||||
.md-sign {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not([disabled]) {
|
||||
&:hover {
|
||||
.md-thumb {
|
||||
transform: scale($slider-thumb-hover-scale);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.active {
|
||||
.md-focus-thumb {
|
||||
display: block;
|
||||
}
|
||||
.md-focus-ring {
|
||||
transform: scale(1);
|
||||
}
|
||||
.md-thumb {
|
||||
transform: scale($slider-thumb-focus-scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[md-discrete] {
|
||||
/* Hide the focus thumb in discrete mode */
|
||||
.md-focus-thumb,
|
||||
.md-focus-ring {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not([disabled]) {
|
||||
&:focus,
|
||||
&.active {
|
||||
.md-sign,
|
||||
.md-sign:after {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0) scale(1.0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
.md-track-fill {
|
||||
display: none;
|
||||
}
|
||||
.md-sign {
|
||||
display: none;
|
||||
}
|
||||
.md-thumb {
|
||||
transform: scale($slider-thumb-disabled-scale);
|
||||
}
|
||||
.md-disabled-thumb {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "extends";
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! sticky/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/sticky/sticky.scss';
|
||||
|
|
@ -1,18 +1 @@
|
|||
.md-sticky-clone {
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute !important;
|
||||
|
||||
transform: translate3d(-9999px,-9999px,0);
|
||||
|
||||
&[sticky-state="active"] {
|
||||
transform: translate3d(0, 0, 0);
|
||||
&:not(.md-sticky-no-effect) {
|
||||
&:after {
|
||||
animation: subheaderStickyHoverIn 0.3s ease-out both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "extends";
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! subheader/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/subheader/subheader.scss';
|
||||
|
|
@ -1,54 +1 @@
|
|||
$subheader-line-height: 1em !default;
|
||||
$subheader-font-size: 0.9em !default;
|
||||
$subheader-padding: ($baseline-grid * 2) 0px ($baseline-grid * 2) ($baseline-grid * 2) !default;
|
||||
$subheader-font-weight: 400 !default;
|
||||
$subheader-margin: 0 0 0 0 !default;
|
||||
$subheader-margin-right: 16px !default;
|
||||
$subheader-sticky-shadow: 0px 2px 4px 0 rgba(0,0,0,0.16) !default;
|
||||
|
||||
@keyframes subheaderStickyHoverIn {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
100% {
|
||||
box-shadow: $subheader-sticky-shadow;
|
||||
}
|
||||
}
|
||||
@keyframes subheaderStickyHoverOut {
|
||||
0% {
|
||||
box-shadow: $subheader-sticky-shadow;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.md-subheader {
|
||||
display: block;
|
||||
font-size: $subheader-font-size;
|
||||
font-weight: $subheader-font-weight;
|
||||
line-height: $subheader-line-height;
|
||||
padding: $subheader-padding;
|
||||
margin: $subheader-margin;
|
||||
margin-right: $subheader-margin-right;
|
||||
position: relative;
|
||||
|
||||
&:not(.md-sticky-no-effect) {
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: -$subheader-margin-right;
|
||||
content: '';
|
||||
}
|
||||
|
||||
transition: 0.2s ease-out margin;
|
||||
&[sticky-state="active"] {
|
||||
margin-top: -2px;
|
||||
}
|
||||
&:not(.md-sticky-clone)[sticky-prev-state="active"]:after {
|
||||
animation: subheaderStickyHoverOut 0.3s ease-out both;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! switch/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/switch/switch.scss';
|
||||
|
|
@ -1,90 +1 @@
|
|||
$switch-width: 36px !default;
|
||||
$switch-height: $baseline-grid * 3 !default;
|
||||
$switch-bar-height: 14px !default;
|
||||
$switch-thumb-size: 20px !default;
|
||||
|
||||
md-switch {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.md-container {
|
||||
cursor: grab;
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
// If the user moves his mouse off the switch, stil display grabbing cursor
|
||||
&:not([disabled]) {
|
||||
.md-dragging,
|
||||
&.md-dragging .md-container {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.md-label {
|
||||
border-color: transparent;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.md-bar {
|
||||
left: 1px;
|
||||
width: $switch-width - 2px;
|
||||
top: $switch-height / 2 - $switch-bar-height / 2;
|
||||
height: $switch-bar-height;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.md-thumb-container {
|
||||
top: $switch-height / 2 - $switch-thumb-size / 2;
|
||||
left: 0;
|
||||
width: $switch-width - $switch-thumb-size;
|
||||
position: absolute;
|
||||
transform: translate3d(0,0,0);
|
||||
z-index: 1;
|
||||
}
|
||||
&.md-checked .md-thumb-container {
|
||||
transform: translate3d(100%,0,0);
|
||||
}
|
||||
|
||||
.md-thumb {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
outline: none;
|
||||
height: $switch-thumb-size;
|
||||
width: $switch-thumb-size;
|
||||
border-radius: 50%;
|
||||
box-shadow: $whiteframe-shadow-z1;
|
||||
|
||||
.md-ripple-container {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
left: -$switch-thumb-size;
|
||||
top: -$switch-thumb-size;
|
||||
right: -$switch-thumb-size;
|
||||
bottom: -$switch-thumb-size;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.md-dragging) {
|
||||
.md-bar,
|
||||
.md-thumb-container,
|
||||
.md-thumb {
|
||||
transition: $swift-ease-in-out;
|
||||
transition-property: transform, background-color;
|
||||
}
|
||||
.md-bar,
|
||||
.md-thumb {
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! tabs/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/tabs/tabs.scss';
|
||||
|
|
@ -1,175 +1 @@
|
|||
// Tabs
|
||||
$tabs-paginator-width: $baseline-grid * 4 !default;
|
||||
$tabs-tab-width: $baseline-grid * 12 !default;
|
||||
$tabs-header-height: 48px !default;
|
||||
|
||||
md-tabs {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.md-header {
|
||||
width: 100%;
|
||||
height: $tabs-header-height;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.md-paginator {
|
||||
z-index: 1;
|
||||
margin-right: -2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: $tabs-paginator-width;
|
||||
min-height: 100%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
|
||||
position: absolute;
|
||||
&.md-prev {
|
||||
left: 0;
|
||||
}
|
||||
&.md-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* TODO Once we have a better way to inline svg images, change this
|
||||
to use svgs correctly */
|
||||
&.md-prev {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMjA4IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyIAkJIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4gPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+IDwvZz4gPC9nPiA8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+IDxnIGRpc3BsYXk9ImlubGluZSI+IDwvZz4gPC9nPiA8L3N2Zz4NCg==');
|
||||
}
|
||||
&.md-next {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMzM2IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTAsNiA4LjYsNy40IDEzLjIsMTIgOC42LDE2LjYgMTAsMTggMTYsMTIgCQkiIHN0eWxlPSJmaWxsOndoaXRlOyIvPiA8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4gPC9nPiA8L2c+IDxnIGlkPSJHcmlkIiBkaXNwbGF5PSJub25lIj4gPGcgZGlzcGxheT0iaW5saW5lIj4gPC9nPiA8L2c+IDwvc3ZnPg0K');
|
||||
}
|
||||
}
|
||||
|
||||
/* If `center` justified, change to left-justify if paginating */
|
||||
md-tabs[center] .md-header:not(.md-paginating) .md-header-items {
|
||||
justify-content: center;
|
||||
}
|
||||
.md-paginating .md-header-items-container {
|
||||
left: $tabs-paginator-width;
|
||||
right: $tabs-paginator-width;
|
||||
}
|
||||
.md-header-items-container {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin: auto;
|
||||
|
||||
.md-header-items {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
|
||||
transform: translate3d(0, 0, 0);
|
||||
height: 100%;
|
||||
width: 99999px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-tabs-content {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.md-tab-content {
|
||||
height: 100%;
|
||||
&.ng-hide {
|
||||
&.ng-animate {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
&.ng-animate {
|
||||
transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
|
||||
transform: translateX(0);
|
||||
&.ng-hide-add {
|
||||
transform: translateX(-100%);
|
||||
&.md-transition-rtl {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
&.ng-hide-remove {
|
||||
position: absolute;
|
||||
transform: translateX(100%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
&.md-transition-rtl {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
&.ng-hide-remove-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
md-tabs-ink-bar {
|
||||
$time: 0.25s;
|
||||
$delay: $time * 0.3;
|
||||
$shortTime: $time;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
height: 2px;
|
||||
margin-top: -2px;
|
||||
transform: scaleX(1);
|
||||
transform-origin: 0 0;
|
||||
&.md-transition-right {
|
||||
transition: right $time $swift-ease-in-out-timing-function,
|
||||
left $shortTime $swift-ease-in-out-timing-function $delay;
|
||||
}
|
||||
&.md-transition-left {
|
||||
transition: right $shortTime $swift-ease-in-out-timing-function $delay,
|
||||
left $time $swift-ease-in-out-timing-function;
|
||||
}
|
||||
}
|
||||
|
||||
md-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 20px 24px;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.35s $swift-ease-in-out-timing-function,
|
||||
color 0.35s $swift-ease-in-out-timing-function;
|
||||
|
||||
&[disabled] {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@include not-selectable();
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
md-tab-label {
|
||||
flex: 1 1 auto;
|
||||
z-index: 100;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! textField/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/textField/textField.scss';
|
||||
|
|
@ -1,148 +1 @@
|
|||
$tff-font-size: 0.75em !default;
|
||||
$tff-line-height:26px !default;
|
||||
$tff-transition: all 0.15s $swift-ease-in-out-timing-function !default;
|
||||
// - `label` element (aka hint)
|
||||
$tff-hint-offset-large : 22px !default;
|
||||
$tff-hint-offset-small : 4px !default;
|
||||
$ttf-hint-offset-scale : 0.75 !default;
|
||||
// - `line` element
|
||||
$tff-line-focused-width: 2px !default;
|
||||
$tff-line-disabled-width: 0px !default;
|
||||
$tff-line-dot-width: 1px !default;
|
||||
$tff-line-dot-size: 3px !default;
|
||||
$tff-line-dashed: #cfcfcf !default;
|
||||
|
||||
$tff-margin: 10px 0 (10px - $tff-line-focused-width) 0 !default;
|
||||
|
||||
// ******************************
|
||||
// Mixins: Text Fields
|
||||
// ******************************
|
||||
|
||||
@mixin text-field($transition:false, $borderWidth:1px ) {
|
||||
input, textarea {
|
||||
border-bottom-width: $borderWidth;
|
||||
|
||||
@if( $transition != false ) {
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-hint($size:large, $transition:false ) {
|
||||
label {
|
||||
@if $size == "small" {
|
||||
transform: translate3d(0, $tff-hint-offset-small, 0) scale($ttf-hint-offset-scale);
|
||||
} @else {
|
||||
transform: translate3d(0, $tff-hint-offset-large, 0);
|
||||
transform-origin: left center;
|
||||
transition: $tff-transition;
|
||||
}
|
||||
|
||||
@if( $transition != false ) {
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-dashed-line( $dotGap, $dotSize) {
|
||||
background-size: $dotSize $dotGap;
|
||||
background-position: 0 bottom;
|
||||
background-size: (1px + 1px) $dotGap;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
md-input-group,
|
||||
.md-input-group {
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: $tff-font-size;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"] {
|
||||
display: block;
|
||||
border-width: 0 0 1px 0;
|
||||
padding-top: 2px;
|
||||
line-height: $tff-line-height;
|
||||
padding-bottom: 1px;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Light-Theme
|
||||
md-input-group,
|
||||
.md-input-group {
|
||||
padding-bottom: $tff-line-focused-width;
|
||||
margin: $tff-margin;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
label {
|
||||
font-size: 1em;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&:hover {
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
||||
@include text-hint( large, $tff-transition );
|
||||
@include text-field( $tff-transition );
|
||||
|
||||
|
||||
&.md-input-focused {
|
||||
@include text-hint( small );
|
||||
@include text-field( false, $tff-line-focused-width );
|
||||
input {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-input-has-value {
|
||||
@include text-hint( small );
|
||||
|
||||
&:not(.md-input-focused) {
|
||||
@include text-hint( small );
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
|
||||
@include text-field( false, $tff-line-disabled-width );
|
||||
input, textarea {
|
||||
@include text-dashed-line( $tff-line-dot-width, $tff-line-dot-size);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@include text-hint( small );
|
||||
|
||||
*:not(.md-input-has-value) {
|
||||
@include text-hint( large );
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! toast/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/toast/toast.scss';
|
||||
|
|
@ -1,130 +1 @@
|
|||
// See height set globally, depended on by buttons
|
||||
md-toast {
|
||||
display: flex;
|
||||
position:absolute;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
min-height: 48px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
cursor: default;
|
||||
|
||||
max-width: 879px;
|
||||
max-height: 40px;
|
||||
|
||||
height: $toast-height;
|
||||
z-index: $z-index-toast;
|
||||
|
||||
&.md-capsule {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0) rotateZ(0deg);
|
||||
transition: $swift-ease-out;
|
||||
|
||||
&.ng-leave-active {
|
||||
transition: $swift-ease-in;
|
||||
}
|
||||
|
||||
/* Transition differently when swiping */
|
||||
&.md-swipeleft,
|
||||
&.md-swiperight,
|
||||
&.md-swipeup,
|
||||
&.md-swipedown {
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
|
||||
&.ng-enter {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
&.md-top {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
opacity: 0;
|
||||
&.ng-enter-active {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
&.md-top {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
&.md-swipeleft {
|
||||
transform: translate3d(-100%, 0%, 0);
|
||||
}
|
||||
&.md-swiperight {
|
||||
transform: translate3d(100%, 0%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.md-action {
|
||||
line-height: 19px;
|
||||
padding-left: 24px;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $layout-breakpoint-sm) {
|
||||
md-toast {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
border-radius: 0;
|
||||
bottom: 0;
|
||||
&.md-top {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $layout-breakpoint-sm) {
|
||||
md-toast {
|
||||
min-width: 288px;
|
||||
&.md-bottom {
|
||||
bottom: $toast-margin;
|
||||
}
|
||||
&.md-left {
|
||||
left: $toast-margin;
|
||||
}
|
||||
&.md-right {
|
||||
right: $toast-margin;
|
||||
}
|
||||
&.md-top {
|
||||
top: $toast-margin;
|
||||
}
|
||||
|
||||
/*
|
||||
* When the toast doesn't take up the whole screen,
|
||||
* make it rotate when the user swipes it away
|
||||
*/
|
||||
&.ng-leave.ng-leave-active {
|
||||
&.md-swipeleft {
|
||||
transform: translate3d(-100%, 25%, 0) rotateZ(-15deg);
|
||||
}
|
||||
&.md-swiperight {
|
||||
transform: translate3d(100%, 25%, 0) rotateZ(15deg);
|
||||
}
|
||||
&.md-top {
|
||||
&.md-swipeleft {
|
||||
transform: translate3d(-100%, 0, 0) rotateZ(-15deg);
|
||||
}
|
||||
&.md-swiperight {
|
||||
transform: translate3d(100%, 0, 0) rotateZ(15deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! toolbar/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/toolbar/toolbar.scss';
|
||||
|
|
@ -1,81 +1 @@
|
|||
// fixme : place all variables in settings
|
||||
$toolbar-tools-height: 64px !default;
|
||||
$toolbar-height: 64px !default;
|
||||
$toolbar-medium-tall-height: 88px !default;
|
||||
$toolbar-tall-height: 128px !default;
|
||||
$toolbar-indent-margin: 64px !default;
|
||||
$toolbar-padding: 16px !default;
|
||||
|
||||
md-toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
font-size: 1.3em;
|
||||
min-height: $baseline-grid * 8;
|
||||
width: 100%;
|
||||
|
||||
&.md-tall {
|
||||
height: $toolbar-tall-height;
|
||||
min-height: $toolbar-tall-height;
|
||||
max-height: $toolbar-tall-height;
|
||||
}
|
||||
|
||||
&.md-medium-tall {
|
||||
height: $toolbar-medium-tall-height;
|
||||
min-height: $toolbar-medium-tall-height;
|
||||
max-height: $toolbar-medium-tall-height;
|
||||
|
||||
.md-toolbar-tools {
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-toolbar-small {
|
||||
min-height: $baseline-grid * 6;
|
||||
}
|
||||
|
||||
.md-indent {
|
||||
margin-left: $toolbar-indent-margin;
|
||||
}
|
||||
}
|
||||
|
||||
.md-toolbar-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
width: 100%;
|
||||
height: $toolbar-tools-height;
|
||||
min-height: 100%;
|
||||
max-height: $toolbar-tools-height;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
padding: 0 $toolbar-padding;
|
||||
margin: 0;
|
||||
|
||||
> * {
|
||||
font-size: inherit;
|
||||
}
|
||||
h2, h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.fill-height {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.md-tools {
|
||||
margin-left: auto;
|
||||
}
|
||||
.md-button {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! tooltip/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/tooltip/tooltip.scss';
|
||||
|
|
@ -1,96 +1 @@
|
|||
@keyframes tooltipBackgroundShow {
|
||||
0% {
|
||||
transform: scale(0.2);
|
||||
opacity: 0.25;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes tooltipBackgroundHide {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
md-tooltip {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
z-index: $z-index-tooltip;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
border-radius: 4px;
|
||||
|
||||
&[md-direction="bottom"] {
|
||||
transform: translate3d(0, -30%, 0);
|
||||
margin-top: 8px;
|
||||
}
|
||||
&[md-direction="top"] {
|
||||
transform: translate3d(0, 30%, 0);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.md-background {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
margin-left: -128px;
|
||||
margin-top: -128px;
|
||||
border-radius: 256px;
|
||||
|
||||
opacity: 0.25;
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
.md-content {
|
||||
max-width: 240px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
padding: 8px;
|
||||
background: transparent;
|
||||
opacity: 0.3;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&.md-hide {
|
||||
transition: $swift-ease-in;
|
||||
}
|
||||
|
||||
&.md-show {
|
||||
transition: $swift-ease-out;
|
||||
pointer-events: auto;
|
||||
transform: translate3d(0,0,0);
|
||||
|
||||
.md-background {
|
||||
transform: scale(1.0);
|
||||
opacity: 1.0;
|
||||
animation: tooltipBackgroundShow linear;
|
||||
}
|
||||
.md-content {
|
||||
opacity: 0.99;
|
||||
}
|
||||
}
|
||||
&.md-hide .md-background {
|
||||
transform: scale(1.0);
|
||||
opacity: 0;
|
||||
animation: tooltipBackgroundHide 0.2s linear;
|
||||
}
|
||||
|
||||
/**
|
||||
* Depending on the tooltip's size as a multiple of 32 (set by JS),
|
||||
* change the background's animation duration.
|
||||
* The larger the tooltip, the less time the background should take to ripple outwards.
|
||||
*/
|
||||
@for $i from 1 through 8 {
|
||||
&[width-32="#{$i}"].md-show .md-background {
|
||||
$duration: 1000 - $i * 100;
|
||||
animation-duration: #{$duration}ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! whiteframe/_extends.scss - */
|
||||
@import '../../../angular-material/src/components/whiteframe/whiteframe.scss';
|
||||
|
|
@ -1,15 +1 @@
|
|||
.md-whiteframe-z1 {
|
||||
box-shadow: $whiteframe-shadow-z1;
|
||||
}
|
||||
.md-whiteframe-z2 {
|
||||
box-shadow: $whiteframe-shadow-z2;
|
||||
}
|
||||
.md-whiteframe-z3 {
|
||||
box-shadow: $whiteframe-shadow-z3;
|
||||
}
|
||||
.md-whiteframe-z4 {
|
||||
box-shadow: $whiteframe-shadow-z4;
|
||||
}
|
||||
.md-whiteframe-z5 {
|
||||
box-shadow: $whiteframe-shadow-z5;
|
||||
}
|
||||
@import 'extends';
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// Import from sources for extends
|
||||
// ------------------------------
|
||||
// -------------------------------
|
||||
@import "../../angular-material/src/core/style/layout";
|
||||
|
||||
// Utility classes to compensate for the the xml mandatory attribute values
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../angular-material/src/core/style/mixins.scss';
|
||||
|
||||
@mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
|
||||
-webkit-margin-before: $before;
|
||||
-webkit-margin-after: $after;
|
||||
|
|
|
|||
Loading…
Reference in New Issue