Permalink
Browse files

feature: MaterialTextfield can determine if it has the focus

  • Loading branch information...
MikeMitterer committed May 18, 2017
1 parent 87b8248 commit 5c0f79e01c6de5c6a7f4f54783884223f95ac27c
@@ -22,209 +22,215 @@
//@import "../variables";
.mdl-grid {
display: flex;
flex-flow: row wrap;
margin: 0 auto 0 auto;
align-items: stretch;
&.mdl-grid--no-spacing {
padding: 0;
}
//display: flex;
//flex-flow: row wrap;
//align-items: stretch;
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : flex-start; // ⇾
align-content : space-between; // ||
align-items : flex-start; // ↓
margin : 0 auto 0 auto;
&.mdl-grid--no-spacing {
padding : 0;
}
}
.mdl-cell {
box-sizing: border-box;
box-sizing : border-box;
}
.mdl-cell--top {
align-self: flex-start;
align-self : flex-start;
}
.mdl-cell--middle {
align-self: center;
align-self : center;
}
.mdl-cell--bottom {
align-self: flex-end;
align-self : flex-end;
}
.mdl-cell--stretch {
align-self: stretch;
align-self : stretch;
}
//.mdl-cell--center {
// text-align : center;
//}
.mdl-grid.mdl-grid--no-spacing > .mdl-cell {
margin: 0;
margin : 0;
}
// Define order override classes.
@for $i from 1 through $grid-max-columns {
.mdl-cell--order-#{$i} {
order: $i;
}
.mdl-cell--order-#{$i} {
order : $i;
}
}
// Mixins for width calculation.
@mixin partial-size($size, $columns, $gutter) {
width: calc(#{(($size / $columns) * 100)+"%"} - #{$gutter});
width : calc(#{(($size / $columns) * 100)+"%"} - #{$gutter});
.mdl-grid--no-spacing > & {
width: #{(($size / $columns) * 100)+"%"};
}
.mdl-grid--no-spacing > & {
width : #{(($size / $columns) * 100)+"%"};
}
}
@mixin full-size($gutter) {
@include partial-size(1, 1, $gutter);
@include partial-size(1, 1, $gutter);
}
@mixin offset-size($size, $columns, $gutter) {
margin-left: calc(#{(($size / $columns) * 100)+"%"} + #{$gutter / 2});
margin-left : calc(#{(($size / $columns) * 100)+"%"} + #{$gutter / 2});
.mdl-grid.mdl-grid--no-spacing > & {
margin-left: #{(($size / $columns) * 100)+"%"};
}
.mdl-grid.mdl-grid--no-spacing > & {
margin-left : #{(($size / $columns) * 100)+"%"};
}
}
////////// Phone //////////
@media (max-width: $grid-tablet-breakpoint - 1) {
.mdl-grid {
padding: $grid-phone-margin - ($grid-phone-gutter / 2);
}
@media (max-width : $grid-tablet-breakpoint - 1) {
.mdl-grid {
padding : $grid-phone-margin - ($grid-phone-gutter / 2);
}
.mdl-cell {
margin: $grid-phone-gutter / 2;
@include partial-size($grid-cell-default-columns, $grid-phone-columns,
$grid-phone-gutter);
}
.mdl-cell {
margin : $grid-phone-gutter / 2;
@include partial-size($grid-cell-default-columns, $grid-phone-columns,
$grid-phone-gutter);
}
.mdl-cell--hide-phone {
display: none !important;
}
.mdl-cell--hide-phone {
display : none !important;
}
// Define order override classes.
@for $i from 1 through $grid-max-columns {
.mdl-cell--order-#{$i}-phone.mdl-cell--order-#{$i}-phone {
order: $i;
// Define order override classes.
@for $i from 1 through $grid-max-columns {
.mdl-cell--order-#{$i}-phone.mdl-cell--order-#{$i}-phone {
order : $i;
}
}
}
// Define partial sizes for columnNumber < totalColumns.
@for $i from 1 through ($grid-phone-columns - 1) {
.mdl-cell--#{$i}-col,
.mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
@include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
// Define partial sizes for columnNumber < totalColumns.
@for $i from 1 through ($grid-phone-columns - 1) {
.mdl-cell--#{$i}-col,
.mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
@include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
}
}
}
// Define 100% for everything else.
@for $i from $grid-phone-columns through $grid-desktop-columns {
.mdl-cell--#{$i}-col,
.mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
@include full-size($grid-phone-gutter);
// Define 100% for everything else.
@for $i from $grid-phone-columns through $grid-desktop-columns {
.mdl-cell--#{$i}-col,
.mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
@include full-size($grid-phone-gutter);
}
}
}
// Define valid phone offsets.
@for $i from 1 through ($grid-phone-columns - 1) {
.mdl-cell--#{$i}-offset,
.mdl-cell--#{$i}-offset-phone.mdl-cell--#{$i}-offset-phone {
@include offset-size($i, $grid-phone-columns, $grid-phone-gutter);
// Define valid phone offsets.
@for $i from 1 through ($grid-phone-columns - 1) {
.mdl-cell--#{$i}-offset,
.mdl-cell--#{$i}-offset-phone.mdl-cell--#{$i}-offset-phone {
@include offset-size($i, $grid-phone-columns, $grid-phone-gutter);
}
}
}
}
////////// Tablet //////////
@media (min-width: $grid-tablet-breakpoint) and (max-width: $grid-desktop-breakpoint - 1) {
.mdl-grid {
padding: $grid-tablet-margin - ($grid-tablet-gutter / 2);
}
@media (min-width : $grid-tablet-breakpoint) and (max-width : $grid-desktop-breakpoint - 1) {
.mdl-grid {
padding : $grid-tablet-margin - ($grid-tablet-gutter / 2);
}
.mdl-cell {
margin: $grid-tablet-gutter / 2;
@include partial-size($grid-cell-default-columns, $grid-tablet-columns,
$grid-tablet-gutter);
}
.mdl-cell {
margin : $grid-tablet-gutter / 2;
@include partial-size($grid-cell-default-columns, $grid-tablet-columns,
$grid-tablet-gutter);
}
.mdl-cell--hide-tablet {
display: none !important;
}
.mdl-cell--hide-tablet {
display : none !important;
}
// Define order override classes.
@for $i from 1 through $grid-max-columns {
.mdl-cell--order-#{$i}-tablet.mdl-cell--order-#{$i}-tablet {
order: $i;
// Define order override classes.
@for $i from 1 through $grid-max-columns {
.mdl-cell--order-#{$i}-tablet.mdl-cell--order-#{$i}-tablet {
order : $i;
}
}
}
// Define partial sizes for columnNumber < totalColumns.
@for $i from 1 through ($grid-tablet-columns - 1) {
.mdl-cell--#{$i}-col,
.mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
@include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
// Define partial sizes for columnNumber < totalColumns.
@for $i from 1 through ($grid-tablet-columns - 1) {
.mdl-cell--#{$i}-col,
.mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
@include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
}
}
}
// Define 100% for everything else.
@for $i from $grid-tablet-columns through $grid-desktop-columns {
.mdl-cell--#{$i}-col,
.mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
@include full-size($grid-tablet-gutter);
// Define 100% for everything else.
@for $i from $grid-tablet-columns through $grid-desktop-columns {
.mdl-cell--#{$i}-col,
.mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
@include full-size($grid-tablet-gutter);
}
}
}
// Define valid tablet offsets.
@for $i from 1 through ($grid-tablet-columns - 1) {
.mdl-cell--#{$i}-offset,
.mdl-cell--#{$i}-offset-tablet.mdl-cell--#{$i}-offset-tablet {
@include offset-size($i, $grid-tablet-columns, $grid-tablet-gutter);
// Define valid tablet offsets.
@for $i from 1 through ($grid-tablet-columns - 1) {
.mdl-cell--#{$i}-offset,
.mdl-cell--#{$i}-offset-tablet.mdl-cell--#{$i}-offset-tablet {
@include offset-size($i, $grid-tablet-columns, $grid-tablet-gutter);
}
}
}
}
////////// Desktop //////////
@media (min-width: $grid-desktop-breakpoint) {
.mdl-grid {
padding: $grid-desktop-margin - ($grid-desktop-gutter / 2);
}
@media (min-width : $grid-desktop-breakpoint) {
.mdl-grid {
padding : $grid-desktop-margin - ($grid-desktop-gutter / 2);
}
.mdl-cell {
margin: $grid-desktop-gutter / 2;
@include partial-size($grid-cell-default-columns, $grid-desktop-columns,
$grid-desktop-gutter);
}
.mdl-cell {
margin : $grid-desktop-gutter / 2;
@include partial-size($grid-cell-default-columns, $grid-desktop-columns,
$grid-desktop-gutter);
}
.mdl-cell--hide-desktop {
display: none !important;
}
.mdl-cell--hide-desktop {
display : none !important;
}
// Define order override classes.
@for $i from 1 through $grid-max-columns {
.mdl-cell--order-#{$i}-desktop.mdl-cell--order-#{$i}-desktop {
order: $i;
// Define order override classes.
@for $i from 1 through $grid-max-columns {
.mdl-cell--order-#{$i}-desktop.mdl-cell--order-#{$i}-desktop {
order : $i;
}
}
}
// Define partial sizes for all numbers of columns.
@for $i from 1 through $grid-desktop-columns {
.mdl-cell--#{$i}-col,
.mdl-cell--#{$i}-col-desktop.mdl-cell--#{$i}-col-desktop {
@include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
// Define partial sizes for all numbers of columns.
@for $i from 1 through $grid-desktop-columns {
.mdl-cell--#{$i}-col,
.mdl-cell--#{$i}-col-desktop.mdl-cell--#{$i}-col-desktop {
@include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
}
}
}
// Define valid desktop offsets.
@for $i from 1 through ($grid-desktop-columns - 1) {
.mdl-cell--#{$i}-offset,
.mdl-cell--#{$i}-offset-desktop.mdl-cell--#{$i}-offset-desktop {
@include offset-size($i, $grid-desktop-columns, $grid-desktop-gutter);
// Define valid desktop offsets.
@for $i from 1 through ($grid-desktop-columns - 1) {
.mdl-cell--#{$i}-offset,
.mdl-cell--#{$i}-offset-desktop.mdl-cell--#{$i}-offset-desktop {
@include offset-size($i, $grid-desktop-columns, $grid-desktop-gutter);
}
}
}
}
@@ -4132,12 +4132,21 @@ input.mdl-button[type="submit"] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 0 auto 0 auto;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch; }
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: justify;
align-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin: 0 auto 0 auto; }
.mdl-grid.mdl-grid--no-spacing {
padding: 0; }

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -30,7 +30,7 @@
@mixin hide_scrollbar($show_on_hover: true, $bg_color: transparent) {
// 1. hides the scrollbar on webkit browsers
&::-webkit-scrollbar {
display : none;
visibility : hidden;
-webkit-appearance: none;
@if $show_on_hover {
@@ -74,7 +74,7 @@
@if $show_on_hover {
&:hover::-webkit-scrollbar {
display : inherit;
visibility : visible;
}
}
Oops, something went wrong.

0 comments on commit 5c0f79e

Please sign in to comment.