🚀 Socket Launch Week Day 4:Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection.Learn more →
@angular2-material/button-toggle
Advanced tools
@angular2-material/button-toggle - npm Package Compare versions
| /** | ||
| * A collection of mixins and CSS classes that can be used to apply elevation to a material | ||
| * element. | ||
| * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html | ||
| * Examples: | ||
| * | ||
| * | ||
| * .md-foo { | ||
| * @include $md-elevation(2); | ||
| * | ||
| * &:active { | ||
| * @include $md-elevation(8); | ||
| * } | ||
| * } | ||
| * | ||
| * <div id="external-card" class="md-elevation-z2"><p>Some content</p></div> | ||
| * | ||
| * For an explanation of the design behind how elevation is implemented, see the design doc at | ||
| * https://goo.gl/Kq0k9Z. | ||
| */ | ||
| /** | ||
| * The css property used for elevation. In most cases this should not be changed. It is exposed | ||
| * as a variable for abstraction / easy use when needing to reference the property directly, for | ||
| * example in a will-change rule. | ||
| */ | ||
| /** The default duration value for elevation transitions. */ | ||
| /** The default easing value for elevation transitions. */ | ||
| /** | ||
| * Applies the correct css rules to an element to give it the elevation specified by $zValue. | ||
| * The $zValue must be between 0 and 24. | ||
| */ | ||
| /** | ||
| * Returns a string that can be used as the value for a transition property for elevation. | ||
| * Calling this function directly is useful in situations where a component needs to transition | ||
| * more than one property. | ||
| * | ||
| * .foo { | ||
| * transition: md-elevation-transition-property-value(), opacity 100ms ease; | ||
| * will-change: $md-elevation-property, opacity; | ||
| * } | ||
| */ | ||
| /** | ||
| * Applies the correct css rules needed to have an element transition between elevations. | ||
| * This mixin should be applied to elements whose elevation values will change depending on their | ||
| * context (e.g. when active or disabled). | ||
| */ | ||
| /** | ||
| * Mixin that creates a new stacking context. | ||
| * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context | ||
| */ | ||
| /** | ||
| * This mixin hides an element visually. | ||
| * That means it's still accessible for screen-readers but not visible in view. | ||
| */ | ||
| /** | ||
| * Forces an element to grow to fit floated contents; used as as an alternative to | ||
| * `overflow: hidden;` because it doesn't cut off contents. | ||
| */ | ||
| /** | ||
| * A mixin, which generates temporary ink ripple on a given component. | ||
| * When $bindToParent is set to true, it will check for the focused class on the same selector as you included | ||
| * that mixin. | ||
| * It is also possible to specify the color palette of the temporary ripple. By default it uses the | ||
| * accent palette for its background. | ||
| */ | ||
| md-button-toggle-group { | ||
| box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); | ||
| position: relative; | ||
| display: inline-flex; | ||
| border-radius: 3px; | ||
| cursor: pointer; | ||
| white-space: nowrap; } | ||
| .md-button-toggle-checked .md-button-toggle-label-content { | ||
| background-color: #e0e0e0; } | ||
| .md-button-toggle-disabled .md-button-toggle-label-content { | ||
| background-color: rgba(0, 0, 0, 0.38); | ||
| cursor: not-allowed; } | ||
| md-button-toggle { | ||
| white-space: nowrap; } | ||
| .md-button-toggle-input { | ||
| border: 0; | ||
| clip: rect(0 0 0 0); | ||
| height: 1px; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| padding: 0; | ||
| position: absolute; | ||
| text-transform: none; | ||
| width: 1px; } | ||
| .md-button-toggle-label-content { | ||
| display: inline-block; | ||
| line-height: 36px; | ||
| padding: 0 16px; | ||
| cursor: pointer; } | ||
| .md-button-toggle-label-content > * { | ||
| vertical-align: middle; } | ||
| /*# sourceMappingURL=button-toggle.css.map */ |
| <label [attr.for]="inputId" class="md-button-toggle-label"> | ||
| <input #input class="md-button-toggle-input" | ||
| [type]="_type" | ||
| [id]="inputId" | ||
| [checked]="checked" | ||
| [disabled]="disabled" | ||
| [name]="name" | ||
| (change)="_onInputChange($event)" | ||
| (click)="_onInputClick($event)"> | ||
| <div class="md-button-toggle-label-content"> | ||
| <ng-content></ng-content> | ||
| </div> | ||
| </label> |
+2
-2
| { | ||
| "name": "@angular2-material/button-toggle", | ||
| "version": "2.0.0-alpha.7-7", | ||
| "version": "2.0.0-alpha.7-8", | ||
| "description": "Angular 2 Material Button Toggle", | ||
@@ -26,5 +26,5 @@ "main": "./button-toggle.js", | ||
| "peerDependencies": { | ||
| "@angular2-material/core": "2.0.0-alpha.7-7", | ||
| "@angular2-material/core": "2.0.0-alpha.7-8", | ||
| "@angular/forms": "^0.3.0" | ||
| } | ||
| } |
No alert changes
Improved metrics
- Total package byte prevSize
93888
4.22%- Number of package files
10
25%- Lines of code
650
17.54%No dependency changes