mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
update(slide-toggle): remove CRLF line endings (#1712)
* Previously the slide-toggle files were commited with CRLF line endings, but to provide consistency those should be only LF.
This commit is contained in:
Paul Gschwendtner
committed by
Jeremy Elbourn
Jeremy Elbourn
parent
b541f0960c
commit
3b80a6c32e
@@ -1,29 +1,29 @@
|
||||
<div>
|
||||
|
||||
<md-slide-toggle color="primary" [(ngModel)]="firstToggle">
|
||||
Default Slide Toggle
|
||||
</md-slide-toggle>
|
||||
|
||||
<md-slide-toggle [(ngModel)]="firstToggle" disabled>
|
||||
Disabled Slide Toggle
|
||||
</md-slide-toggle>
|
||||
|
||||
<md-slide-toggle [disabled]="firstToggle">
|
||||
Disable Bound
|
||||
</md-slide-toggle>
|
||||
|
||||
<p>Example where the slide toggle is required inside of a form.</p>
|
||||
|
||||
<form #form="ngForm" (ngSubmit)="onFormSubmit()">
|
||||
|
||||
<md-slide-toggle name="slideToggle" required ngModel>
|
||||
Slide Toggle
|
||||
</md-slide-toggle>
|
||||
|
||||
<p>
|
||||
<button md-raised-button type="submit">Submit Form</button>
|
||||
</p>
|
||||
|
||||
</form>
|
||||
|
||||
<div>
|
||||
|
||||
<md-slide-toggle color="primary" [(ngModel)]="firstToggle">
|
||||
Default Slide Toggle
|
||||
</md-slide-toggle>
|
||||
|
||||
<md-slide-toggle [(ngModel)]="firstToggle" disabled>
|
||||
Disabled Slide Toggle
|
||||
</md-slide-toggle>
|
||||
|
||||
<md-slide-toggle [disabled]="firstToggle">
|
||||
Disable Bound
|
||||
</md-slide-toggle>
|
||||
|
||||
<p>Example where the slide toggle is required inside of a form.</p>
|
||||
|
||||
<form #form="ngForm" (ngSubmit)="onFormSubmit()">
|
||||
|
||||
<md-slide-toggle name="slideToggle" required ngModel>
|
||||
Slide Toggle
|
||||
</md-slide-toggle>
|
||||
|
||||
<p>
|
||||
<button md-raised-button type="submit">Submit Form</button>
|
||||
</p>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
@@ -1,17 +1,17 @@
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'switch-demo',
|
||||
templateUrl: 'slide-toggle-demo.html',
|
||||
styleUrls: ['slide-toggle-demo.css'],
|
||||
})
|
||||
export class SlideToggleDemo {
|
||||
firstToggle: boolean;
|
||||
|
||||
onFormSubmit() {
|
||||
alert(`You submitted the form.`);
|
||||
}
|
||||
|
||||
}
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'switch-demo',
|
||||
templateUrl: 'slide-toggle-demo.html',
|
||||
styleUrls: ['slide-toggle-demo.css'],
|
||||
})
|
||||
export class SlideToggleDemo {
|
||||
firstToggle: boolean;
|
||||
|
||||
onFormSubmit() {
|
||||
alert(`You submitted the form.`);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
<label class="md-slide-toggle-label">
|
||||
|
||||
<div class="md-slide-toggle-container">
|
||||
<div class="md-slide-toggle-bar"></div>
|
||||
|
||||
<div class="md-slide-toggle-thumb-container"
|
||||
(slidestart)="_onDragStart()"
|
||||
(slide)="_onDrag($event)"
|
||||
(slideend)="_onDragEnd()">
|
||||
|
||||
<div class="md-slide-toggle-thumb">
|
||||
<div class="md-ink-ripple"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input #input class="md-slide-toggle-input md-visually-hidden" type="checkbox"
|
||||
[id]="getInputId()"
|
||||
[required]="required"
|
||||
[tabIndex]="tabIndex"
|
||||
[checked]="checked"
|
||||
[disabled]="disabled"
|
||||
[attr.name]="name"
|
||||
[attr.aria-label]="ariaLabel"
|
||||
[attr.aria-labelledby]="ariaLabelledby"
|
||||
(blur)="_onInputBlur()"
|
||||
(focus)="_onInputFocus()"
|
||||
(change)="_onChangeEvent($event)"
|
||||
(click)="_onInputClick($event)">
|
||||
</div>
|
||||
<span class="md-slide-toggle-content">
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
</label>
|
||||
<label class="md-slide-toggle-label">
|
||||
|
||||
<div class="md-slide-toggle-container">
|
||||
<div class="md-slide-toggle-bar"></div>
|
||||
|
||||
<div class="md-slide-toggle-thumb-container"
|
||||
(slidestart)="_onDragStart()"
|
||||
(slide)="_onDrag($event)"
|
||||
(slideend)="_onDragEnd()">
|
||||
|
||||
<div class="md-slide-toggle-thumb">
|
||||
<div class="md-ink-ripple"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input #input class="md-slide-toggle-input md-visually-hidden" type="checkbox"
|
||||
[id]="getInputId()"
|
||||
[required]="required"
|
||||
[tabIndex]="tabIndex"
|
||||
[checked]="checked"
|
||||
[disabled]="disabled"
|
||||
[attr.name]="name"
|
||||
[attr.aria-label]="ariaLabel"
|
||||
[attr.aria-labelledby]="ariaLabelledby"
|
||||
(blur)="_onInputBlur()"
|
||||
(focus)="_onInputFocus()"
|
||||
(change)="_onChangeEvent($event)"
|
||||
(click)="_onInputClick($event)">
|
||||
</div>
|
||||
<span class="md-slide-toggle-content">
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
@@ -1,148 +1,148 @@
|
||||
@import '../core/style/variables';
|
||||
@import '../core/ripple/ripple';
|
||||
@import '../core/style/elevation';
|
||||
|
||||
|
||||
$md-slide-toggle-width: 36px !default;
|
||||
$md-slide-toggle-height: 24px !default;
|
||||
$md-slide-toggle-bar-height: 14px !default;
|
||||
$md-slide-toggle-thumb-size: 20px !default;
|
||||
$md-slide-toggle-margin: 16px !default;
|
||||
$md-slide-toggle-spacing: 8px !default;
|
||||
|
||||
|
||||
@mixin md-switch-ripple() {
|
||||
// Temporary ripple effect for the thumb of the slide-toggle.
|
||||
// Bind to the parent selector and specify the current palette.
|
||||
@include md-temporary-ink-ripple(slide-toggle, true);
|
||||
}
|
||||
|
||||
md-slide-toggle {
|
||||
display: flex;
|
||||
height: $md-slide-toggle-height;
|
||||
|
||||
margin: $md-slide-toggle-margin 0;
|
||||
line-height: $md-slide-toggle-height;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
// Disable user selection to ensure that dragging is smooth without grabbing
|
||||
// some elements accidentally.
|
||||
user-select: none;
|
||||
|
||||
outline: none;
|
||||
|
||||
&.md-checked {
|
||||
.md-slide-toggle-thumb-container {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@include md-switch-ripple();
|
||||
|
||||
&.md-disabled {
|
||||
|
||||
.md-slide-toggle-label, .md-slide-toggle-container {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The content element is responsible for the users content.
|
||||
// It will apply the given typography styles and align at the end of the slide-toggle.
|
||||
.md-slide-toggle-content {
|
||||
font-size: $md-body-font-size-base;
|
||||
font-family: $md-font-family;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// The label element is our root container for the slide-toggle / switch indicator and label text.
|
||||
// It has to be a label, to support accessibility for the visual hidden input.
|
||||
.md-slide-toggle-label {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Container for the composition of the slide-toggle / switch indicator.
|
||||
.md-slide-toggle-container {
|
||||
cursor: grab;
|
||||
width: $md-slide-toggle-width;
|
||||
height: $md-slide-toggle-height;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-right: $md-slide-toggle-spacing;
|
||||
|
||||
[dir='rtl'] & {
|
||||
margin-left: $md-slide-toggle-spacing;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// The thumb container is responsible for the dragging functionality.
|
||||
// It moves around and holds the actual circle as a thumb.
|
||||
.md-slide-toggle-thumb-container {
|
||||
position: absolute;
|
||||
top: $md-slide-toggle-height / 2 - $md-slide-toggle-thumb-size / 2;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
width: $md-slide-toggle-width - $md-slide-toggle-thumb-size;
|
||||
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
transition: $swift-linear;
|
||||
transition-property: transform;
|
||||
|
||||
// Once the thumb container is being dragged around, we remove the transition duration to
|
||||
// make the drag feeling fast and not delayed.
|
||||
&.md-dragging {
|
||||
transition-duration: 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
// The thumb will be elevated from the slide-toggle bar.
|
||||
// Also the thumb is bound to its parent thumb-container, which manages the movement of the thumb.
|
||||
.md-slide-toggle-thumb {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
height: $md-slide-toggle-thumb-size;
|
||||
width: $md-slide-toggle-thumb-size;
|
||||
border-radius: 50%;
|
||||
|
||||
@include md-elevation(1);
|
||||
}
|
||||
|
||||
// Horizontal bar for the slide-toggle.
|
||||
// The slide-toggle bar is shown behind the thumb container.
|
||||
.md-slide-toggle-bar {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: $md-slide-toggle-height / 2 - $md-slide-toggle-bar-height / 2;
|
||||
|
||||
width: $md-slide-toggle-width - 2px;
|
||||
height: $md-slide-toggle-bar-height;
|
||||
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// The slide toggle shows a visually hidden input inside of the component, which is used
|
||||
// to take advantage of the native browser functionality.
|
||||
.md-slide-toggle-input {
|
||||
// Move the input to the bottom and in the middle of the thumb.
|
||||
// Visual improvement to properly show browser popups when being required.
|
||||
bottom: 0;
|
||||
left: $md-slide-toggle-thumb-size / 2;
|
||||
}
|
||||
|
||||
.md-slide-toggle-bar,
|
||||
.md-slide-toggle-thumb {
|
||||
transition: $swift-linear;
|
||||
transition-property: background-color;
|
||||
transition-delay: 50ms;
|
||||
}
|
||||
@import '../core/style/variables';
|
||||
@import '../core/ripple/ripple';
|
||||
@import '../core/style/elevation';
|
||||
|
||||
|
||||
$md-slide-toggle-width: 36px !default;
|
||||
$md-slide-toggle-height: 24px !default;
|
||||
$md-slide-toggle-bar-height: 14px !default;
|
||||
$md-slide-toggle-thumb-size: 20px !default;
|
||||
$md-slide-toggle-margin: 16px !default;
|
||||
$md-slide-toggle-spacing: 8px !default;
|
||||
|
||||
|
||||
@mixin md-switch-ripple() {
|
||||
// Temporary ripple effect for the thumb of the slide-toggle.
|
||||
// Bind to the parent selector and specify the current palette.
|
||||
@include md-temporary-ink-ripple(slide-toggle, true);
|
||||
}
|
||||
|
||||
md-slide-toggle {
|
||||
display: flex;
|
||||
height: $md-slide-toggle-height;
|
||||
|
||||
margin: $md-slide-toggle-margin 0;
|
||||
line-height: $md-slide-toggle-height;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
// Disable user selection to ensure that dragging is smooth without grabbing
|
||||
// some elements accidentally.
|
||||
user-select: none;
|
||||
|
||||
outline: none;
|
||||
|
||||
&.md-checked {
|
||||
.md-slide-toggle-thumb-container {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@include md-switch-ripple();
|
||||
|
||||
&.md-disabled {
|
||||
|
||||
.md-slide-toggle-label, .md-slide-toggle-container {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The content element is responsible for the users content.
|
||||
// It will apply the given typography styles and align at the end of the slide-toggle.
|
||||
.md-slide-toggle-content {
|
||||
font-size: $md-body-font-size-base;
|
||||
font-family: $md-font-family;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// The label element is our root container for the slide-toggle / switch indicator and label text.
|
||||
// It has to be a label, to support accessibility for the visual hidden input.
|
||||
.md-slide-toggle-label {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Container for the composition of the slide-toggle / switch indicator.
|
||||
.md-slide-toggle-container {
|
||||
cursor: grab;
|
||||
width: $md-slide-toggle-width;
|
||||
height: $md-slide-toggle-height;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-right: $md-slide-toggle-spacing;
|
||||
|
||||
[dir='rtl'] & {
|
||||
margin-left: $md-slide-toggle-spacing;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// The thumb container is responsible for the dragging functionality.
|
||||
// It moves around and holds the actual circle as a thumb.
|
||||
.md-slide-toggle-thumb-container {
|
||||
position: absolute;
|
||||
top: $md-slide-toggle-height / 2 - $md-slide-toggle-thumb-size / 2;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
width: $md-slide-toggle-width - $md-slide-toggle-thumb-size;
|
||||
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
transition: $swift-linear;
|
||||
transition-property: transform;
|
||||
|
||||
// Once the thumb container is being dragged around, we remove the transition duration to
|
||||
// make the drag feeling fast and not delayed.
|
||||
&.md-dragging {
|
||||
transition-duration: 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
// The thumb will be elevated from the slide-toggle bar.
|
||||
// Also the thumb is bound to its parent thumb-container, which manages the movement of the thumb.
|
||||
.md-slide-toggle-thumb {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
height: $md-slide-toggle-thumb-size;
|
||||
width: $md-slide-toggle-thumb-size;
|
||||
border-radius: 50%;
|
||||
|
||||
@include md-elevation(1);
|
||||
}
|
||||
|
||||
// Horizontal bar for the slide-toggle.
|
||||
// The slide-toggle bar is shown behind the thumb container.
|
||||
.md-slide-toggle-bar {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: $md-slide-toggle-height / 2 - $md-slide-toggle-bar-height / 2;
|
||||
|
||||
width: $md-slide-toggle-width - 2px;
|
||||
height: $md-slide-toggle-bar-height;
|
||||
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// The slide toggle shows a visually hidden input inside of the component, which is used
|
||||
// to take advantage of the native browser functionality.
|
||||
.md-slide-toggle-input {
|
||||
// Move the input to the bottom and in the middle of the thumb.
|
||||
// Visual improvement to properly show browser popups when being required.
|
||||
bottom: 0;
|
||||
left: $md-slide-toggle-thumb-size / 2;
|
||||
}
|
||||
|
||||
.md-slide-toggle-bar,
|
||||
.md-slide-toggle-thumb {
|
||||
transition: $swift-linear;
|
||||
transition-property: background-color;
|
||||
transition-delay: 50ms;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user