Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

feat(input) add md-dense and match css to spec #8209

Closed
wants to merge 1 commit into from
Closed

feat(input) add md-dense and match css to spec #8209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions src/components/autocomplete/autocomplete.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,16 +71,26 @@ md-autocomplete {
&.md-menu-showing {
z-index: $z-index-backdrop + 1;
}

md-input-container.md-input-has-messages {
md-progress-linear.md-inline {
bottom: 18px;
}

&.md-dense md-progress-linear.md-inline {
bottom: 20px;
}

}

md-progress-linear {
position: absolute;
bottom: -2px;
left: 0;
// When `md-inline` is present, we adjust the offset to go over the `ng-message` space
&.md-inline {
bottom: 40px;
right: 2px;
left: 2px;
width: auto;
bottom: 8px;
width: 100%;
}
.md-mode-indeterminate {
position: absolute;
Expand Down
16 changes: 11 additions & 5 deletions src/components/autocomplete/js/autocompleteDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,10 +180,6 @@ function MdAutocomplete ($$mdSvgRegistry) {
layout="row"\
ng-class="{ \'md-whiteframe-z1\': !floatingLabel, \'md-menu-showing\': !$mdAutocompleteCtrl.hidden }">\
' + getInputElement() + '\
<md-progress-linear\
class="' + (attr.mdFloatingLabel ? 'md-inline' : '') + '"\
ng-if="$mdAutocompleteCtrl.loadingIsVisible()"\
md-mode="indeterminate"></md-progress-linear>\
<md-virtual-repeat-container\
md-auto-shrink\
md-auto-shrink-min="1"\
Expand Down Expand Up @@ -233,7 +229,9 @@ function MdAutocomplete ($$mdSvgRegistry) {
function getInputElement () {
if (attr.mdFloatingLabel) {
return '\
<md-input-container flex ng-if="floatingLabel">\
<md-input-container\
class="' + (element.hasClass('md-dense') ? 'md-dense' : '') + '"\
flex ng-if="floatingLabel">\
<label>{{floatingLabel}}</label>\
<input type="search"\
' + (tabindex != null ? 'tabindex="' + tabindex + '"' : '') + '\
Expand All @@ -259,6 +257,10 @@ function MdAutocomplete ($$mdSvgRegistry) {
aria-haspopup="true"\
aria-activedescendant=""\
aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"/>\
<md-progress-linear\
class="' + (attr.mdFloatingLabel ? 'md-inline' : '') + '"\
ng-if="$mdAutocompleteCtrl.loadingIsVisible()"\
md-mode="indeterminate"></md-progress-linear>\
<div md-autocomplete-parent-scope md-autocomplete-replace>' + leftover + '</div>\
</md-input-container>';
} else {
Expand All @@ -285,6 +287,10 @@ function MdAutocomplete ($$mdSvgRegistry) {
aria-haspopup="true"\
aria-activedescendant=""\
aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"/>\
<md-progress-linear\
class="' + (attr.mdFloatingLabel ? 'md-inline' : '') + '"\
ng-if="$mdAutocompleteCtrl.loadingIsVisible()"\
md-mode="indeterminate"></md-progress-linear>\
<button\
type="button"\
tabindex="-1"\
Expand Down
8 changes: 5 additions & 3 deletions src/components/checkbox/checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,13 @@ angular
* @param {expression=} md-indeterminate This determines when the checkbox should be rendered as 'indeterminate'.
* If a truthy expression or no value is passed in the checkbox renders in the md-indeterminate state.
* If falsy expression is passed in it just looks like a normal unchecked checkbox.
* The indeterminate, checked, and unchecked states are mutually exclusive. A box cannot be in any two states at the same time.
* Adding the 'md-indeterminate' attribute overrides any checked/unchecked rendering logic.
* The indeterminate, checked, and unchecked states are mutually exclusive. A box cannot be in any two states at the same time.
* Adding the 'md-indeterminate' attribute overrides any checked/unchecked rendering logic.
* When using the 'md-indeterminate' attribute use 'ng-checked' to define rendering logic instead of using 'ng-model'.
* @param {expression=} ng-checked If this expression evaluates as truthy, the 'md-checked' css class is added to the checkbox and it
* @param {expression=} ng-checked If this expression evaluates as truthy, the 'md-checked' css class is added to the checkbox and it
* will appear checked.
* @param md-spacing {string=} Override spacing between icon and text. Default is 36px. Use `wide` for 48px.
* Use `extra-wide` for 56px.
*
* @usage
* <hljs lang="html">
Expand Down
97 changes: 73 additions & 24 deletions src/components/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,37 @@
//$checkbox-width: 20px !default;
//$checkbox-width: 18px !default;
//$checkbox-height: $checkbox-width !default;
//$checkbox-border-radius: 2px !default;
//$checkbox-border-width: 2px !default;
//
// ^^ defined in variables.scss
//
$checkbox-margin: 16px !default;
$checkbox-text-margin: 10px !default;
$checkbox-top: 12px !default;
$checkbox-margin-end: 16px !default;
$checkbox-text-margin-top: 8px !default;
$container-checkbox-margin: 3px !default;

.md-inline-form {
md-checkbox {
margin: 19px 0 18px;
}
}
// md-spacing values (horizontal spacing with icons)
// normal = 36px (Angular Material default)
// wide = 48px (Material Design Spec dense)
// extra-wide = 56px (Material Design Spec default)
$checkbox-text-margin: 36px !default;
$checkbox-text-margin-wide: 48px !default;
$checkbox-text-margin-extra-wide: 56px !default;

// from input.scss
$input-label-default-offset: 24px !default;

$md-inline-alignment: $input-label-default-offset;

md-checkbox {
box-sizing: border-box;
display: inline-block;
margin-bottom: $checkbox-margin;
white-space: nowrap;
cursor: pointer;
outline: none;
user-select: none;
position: relative;
min-width: $checkbox-width;
min-height: $checkbox-width;
@include rtl(margin-left, 0, $checkbox-margin);
@include rtl(margin-right, $checkbox-margin, 0);

&:last-of-type {
margin-left: 0;
margin-right: 0;
}
min-height: $checkbox-width * 2;

&.md-focused:not([disabled]) {
.md-container:before {
Expand All @@ -49,22 +48,72 @@ md-checkbox {
}
}

&.md-align-top-left > div.md-container {
top: $checkbox-top;
}

@include checkbox-container;

.md-container {
// Use auto for compatibility with md-checkbox padding
top: auto;
@include rtl(left, initial, auto);
@include rtl(right, auto, initial);
margin: $container-checkbox-margin;
margin-top: $checkbox-height + $container-checkbox-margin;
}

.md-label {
box-sizing: border-box;
position: relative;
display: inline-block;
vertical-align: middle;
white-space: normal;
user-select: text;
margin-top: $checkbox-text-margin-top;
margin-bottom: auto;

@include rtl(margin-left, $checkbox-text-margin + $checkbox-width, 0);
@include rtl(margin-right, 0, $checkbox-text-margin + $checkbox-width);
@include rtl(margin-left, $checkbox-text-margin, 0);
@include rtl(margin-right, 0, $checkbox-text-margin);

&:empty {
// clamp to checkbox-container margins
@include rtl(margin-left, $checkbox-height + ($container-checkbox-margin * 2), 0);
@include rtl(margin-right, 0, $checkbox-height + ($container-checkbox-margin * 2));
}

}

[md-spacing="wide"] &,
&[md-spacing="wide"] {
.md-label {
@include rtl(margin-left, $checkbox-text-margin-wide, 0);
@include rtl(margin-right, 0, $checkbox-text-margin-wide);
}
}

[md-spacing="extra-wide"] &,
&[md-spacing="extra-wide"]{
.md-label {
@include rtl(margin-left, $checkbox-text-margin-extra-wide, 0);
@include rtl(margin-right, 0, $checkbox-text-margin-extra-wide);
}
}
}


.layout-row,
.layout-xs-row, .layout-gt-xs-row,
.layout-sm-row, .layout-gt-sm-row,
.layout-md-row, .layout-gt-md-row,
.layout-lg-row, .layout-gt-lg-row,
.layout-xl-row {
& > md-checkbox:not(:last-child), {
@include rtl(margin-right, $checkbox-margin-end, 0);
@include rtl(margin-left, 0, $checkbox-margin-end);
}

&.md-inline-form,
.md-inline-form & {
> md-checkbox {
margin-top: $md-inline-alignment;
margin-bottom: auto;
}
}
}
12 changes: 9 additions & 3 deletions src/components/datepicker/datePicker-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,20 @@
}

.md-datepicker-input-container {
border-bottom-color: '{{foreground-4}}';
> input {
border-bottom-color: '{{foreground-4}}';
}

&.md-datepicker-focused {
border-bottom-color: '{{primary-color}}'
> input {
border-bottom-color: '{{primary-color}}'
}
}

&.md-datepicker-invalid {
border-bottom-color: '{{warn-A700}}';
> input {
border-bottom-color: '{{warn-A700}}';
}
}
}

Expand Down
Loading