-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'vNext' into tzhelev/esf-load-on-demand-sample
- Loading branch information
Showing
12 changed files
with
239 additions
and
25 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 92 additions & 0 deletions
92
src/app/interactions/ripple/ripple-stying/ripple-styling-sample.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| <div class="sample-wrapper"> | ||
| <section class="section"> | ||
| <article class="sample-column"> | ||
| <h5 class="sample-title">Buttons</h5> | ||
| <div class="buttons-sample"> | ||
| <div class="button-sample"> | ||
| <button igxButton="flat" igxRipple>Flat</button> | ||
| </div> | ||
| <div class="button-sample"> | ||
| <button igxButton="raised" igxRipple>Raised</button> | ||
| </div> | ||
| <div class="button-sample"> | ||
| <button igxButton="raised" igxButtonColor="yellow" igxButtonBackground="black" igxRipple="#FBB13C">Click | ||
| Me</button> | ||
| </div> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article class="sample-column"> | ||
| <h5 class="sample-title">Floating Buttons</h5> | ||
| <div class="buttons-sample"> | ||
| <div class="button-sample"> | ||
| <button igxButton="fab" igxRipple> | ||
| <igx-icon fontSet="material">favorite</igx-icon> | ||
| </button> | ||
| </div> | ||
| <div class="button-sample"> | ||
| <button igxButton="fab" igxButtonColor="#FBB13C" igxButtonBackground="#340068" igxRipple> | ||
| <igx-icon fontSet="material">edit</igx-icon> | ||
| </button> | ||
| </div> | ||
| <div class="button-sample"> | ||
| <button igxButton="fab" igxButtonColor="yellow" igxButtonBackground="black" igxRipple> | ||
| <igx-icon fontSet="material">add</igx-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| </section> | ||
| <section class="section"> | ||
| <article class="sample-column"> | ||
| <h5 class="sample-title">Icon Buttons (with overridden ripple colors)</h5> | ||
| <div class="buttons-sample"> | ||
| <div class="button-sample"> | ||
| <button igxButton="icon" igxButtonColor="white" igxButtonBackground="#E41D78" igxRipple="white" | ||
| igxRippleCentered="true"> | ||
| <igx-icon fontSet="material">search</igx-icon> | ||
| </button> | ||
| </div> | ||
| <div class="button-sample"> | ||
| <button igxButton="icon" igxButtonColor="#FBB13C" igxButtonBackground="#340068" igxRipple="#FBB13C" | ||
| igxRippleCentered="true"> | ||
| <igx-icon fontSet="material">favorite</igx-icon> | ||
| </button> | ||
| </div> | ||
| <div class="button-sample"> | ||
| <button igxButton="icon" igxButtonColor="yellow" igxButtonBackground="black" igxRipple="yellow" | ||
| igxRippleCentered="true"> | ||
| <igx-icon fontSet="material">more_vert</igx-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article class="sample-column"> | ||
| <h5 class="sample-title">Avatar</h5> | ||
| <div class="button-sample"> | ||
| <div class="button-sample"> | ||
| <igx-avatar igxRipple initials="AZ" [roundShape]="'true'" bgColor="#BDBDBD" color="#e41c77"></igx-avatar> | ||
| </div> | ||
|
|
||
| <div class="button-sample"> | ||
| <igx-avatar igxRipple initials="AZ" bgColor="rgb(52, 0, 104)" color="white" size="medium"></igx-avatar> | ||
| </div> | ||
|
|
||
| <div class="button-sample"> | ||
| <igx-avatar igxRipple src="assets/images/men/3.jpg" roundShape="true" size="large"></igx-avatar> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| </section> | ||
|
|
||
| <section class="custom-height section"> | ||
| <article class="sample-column"> | ||
| <h5 class="sample-title">Solid Background</h5> | ||
| <div class="ripple-sample dark" igxRipple> | ||
| <p style="margin-bottom:0">Click me to see my ripple!</p> | ||
| </div> | ||
| </article> | ||
| </section> | ||
|
|
||
| </div> |
91 changes: 91 additions & 0 deletions
91
src/app/interactions/ripple/ripple-stying/ripple-styling-sample.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| @import '~igniteui-angular/lib/core/styles/themes/index'; | ||
|
|
||
| $custom-theme: igx-ripple-theme( | ||
| $color: #FFCD0F | ||
| ); | ||
|
|
||
| $black-color: #494949; | ||
| $yellow-color: #ffcd0f; | ||
|
|
||
| /* Custom Palette */ | ||
|
|
||
| // $custom-palette: igx-palette( | ||
| // $primary: $black-color, | ||
| // $secondary: $yellow-color | ||
| // ); | ||
|
|
||
| // $custom-theme: igx-ripple-theme( | ||
| // $color: igx-color($custom-palette, "secondary", 500) | ||
| // ); | ||
|
|
||
| /* Custom Schema */ | ||
|
|
||
| // $custom-ripple-schema: extend($_dark-ripple, ( | ||
| // color: (igx-color("secondary", 500)) | ||
| // )); | ||
|
|
||
| // $my-custom-schema: extend($dark-schema, ( | ||
| // igx-ripple: $custom-ripple-schema | ||
| // )); | ||
|
|
||
| // $custom-theme: igx-ripple-theme( | ||
| // $palette: $custom-palette, | ||
| // $schema: $my-custom-schema | ||
| // ); | ||
|
|
||
| :host { | ||
| ::ng-deep { | ||
| @include igx-ripple($custom-theme); | ||
| } | ||
| } | ||
|
|
||
| .buttons-sample { | ||
| display: flex; | ||
| flex-flow: row wrap; | ||
| } | ||
|
|
||
| .button-sample { | ||
| display: flex; | ||
| flex: 1 0 30%; | ||
| } | ||
| .sample-content { | ||
| flex-flow: column nowrap; | ||
| } | ||
|
|
||
| .ripple-sample { | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 100%; | ||
| height: 300px; | ||
| color: rgba(255, 255, 255, 90); | ||
| font-size: 1.5em; | ||
| padding: 16px; | ||
| text-shadow: 0 1px rgba(0, 0, 0, 0.1); | ||
| transition: all .35s cubic-bezier(0.0, 0.0, 0.2, 1); | ||
| cursor: pointer; | ||
| user-select: none; | ||
| box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12); | ||
| background: #0b3c49; | ||
| } | ||
|
|
||
| .sample-column-icon { | ||
| flex: 1 0 25%; | ||
| align-content: flex-start; | ||
| margin: 16px; | ||
| min-width: 280px; | ||
| } | ||
| .icons-wrapper { | ||
| display: flex; | ||
| flex-flow: row wrap; | ||
| } | ||
| .custom-height{ | ||
| height: 200px; | ||
| } | ||
|
|
||
| .section { | ||
| flex-flow: row wrap; | ||
| display: flex; | ||
| justify-content: center; | ||
| } |
15 changes: 15 additions & 0 deletions
15
src/app/interactions/ripple/ripple-stying/ripple-styling-sample.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Component, OnInit } from "@angular/core"; | ||
|
|
||
| @Component({ | ||
| selector: "app-ripple-styling-sample", | ||
| styleUrls: ["./ripple-styling-sample.component.scss"], | ||
| templateUrl: "./ripple-styling-sample.component.html" | ||
| }) | ||
| export class RippleStylingSampleComponent implements OnInit { | ||
|
|
||
| constructor() { } | ||
|
|
||
| public ngOnInit() { | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters