@almoamendev/ngx-md3 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@almoamendev/ngx-md3",
3
- "version": "0.0.11",
3
+ "version": "0.0.13",
4
4
  "description": "MD3-style Angular components & style library",
5
5
  "author": "Murtadha (Hussain) Almoamen",
6
6
  "license": "MIT",
@@ -505,6 +505,12 @@ md3-badge {
505
505
  &::-webkit-scrollbar-track {
506
506
  background: transparent;
507
507
  }
508
+
509
+ &[md3-scaffold-pane=main] {
510
+ height: 100%;
511
+ overflow-x: hidden;
512
+ overflow-y: auto;
513
+ }
508
514
  }
509
515
 
510
516
  .md3-grid {
@@ -517,6 +523,53 @@ md3-badge {
517
523
  padding-inline: var(--md-grid-margin);
518
524
  }
519
525
 
526
+ .md3-avatar {
527
+ --border-radius: var(--md-border-radius-large);
528
+ --border-size: 0em;
529
+
530
+ height: 2em;
531
+ width: 2em;
532
+ display: inline-flex;
533
+ align-items: center;
534
+ justify-content: center;
535
+ border-radius: var(--border-radius);
536
+ background-color: rgb(var(--md-scheme-on-primary-container));
537
+ color: rgb(var(--md-scheme-primary-container));
538
+ border: none;
539
+ padding: 0;
540
+ margin: 0;
541
+ text-decoration: none;
542
+ font-size: 1em;
543
+ position: relative;
544
+ user-select: none;
545
+ cursor: default;
546
+ overflow: hidden;
547
+ text-decoration: none;
548
+
549
+ img {
550
+ display: block;
551
+ height: 100%;
552
+ width: 100%;
553
+ object-fit: cover;
554
+ }
555
+ }
556
+
557
+ button.md3-avatar, a.md3-avatar {
558
+ --state-color: var(--md-scheme-on-primary);
559
+ --outline-color: rgb(var(--md-scheme-secondary));
560
+ --outline-width: .1875em;
561
+ --outline-offset: -.125em;
562
+
563
+ cursor: pointer;
564
+
565
+ &::before {
566
+ content: '';
567
+ position: absolute;
568
+ height: 3em;
569
+ width: 3em;
570
+ }
571
+ }
572
+
520
573
  .md3-grid-item {
521
574
  min-width: 0em;
522
575
  min-height: 0em;
@@ -471,7 +471,7 @@ declare class Button {
471
471
  get element(): HTMLElement;
472
472
  enableSelection(): void;
473
473
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<Button, never>;
474
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "button[md3-button], a[md3-button]", never, { "buttonSize": { "alias": "button-size"; "required": false; "isSignal": true; }; "buttonType": { "alias": "button-type"; "required": false; "isSignal": true; }; "isSquared": { "alias": "button-squared"; "required": false; "isSignal": true; }; "isSelected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "isSelected": "selectedChange"; }, never, ["[md3-icon-element]", "*"], true, [{ directive: typeof StateComponent; inputs: {}; outputs: {}; }]>;
474
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "button[md3-button], a[md3-button]", never, { "buttonSize": { "alias": "button-size"; "required": false; "isSignal": true; }; "buttonType": { "alias": "button-type"; "required": false; "isSignal": true; }; "isSquared": { "alias": "button-squared"; "required": false; "isSignal": true; }; "isSelected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "isSelected": "selectedChange"; }, never, ["[md3-icon-element=leading]", "*", "[md3-icon-element=trailing]"], true, [{ directive: typeof StateComponent; inputs: {}; outputs: {}; }]>;
475
475
  }
476
476
 
477
477
  declare class FloatingActionButton {