;
81 |
82 | onFocus() {
83 | this.ionFocus.emit();
84 | }
85 |
86 | onKeyUp() {
87 | this.keyFocus = true;
88 | }
89 |
90 | onBlur() {
91 | this.keyFocus = false;
92 | this.ionBlur.emit();
93 | }
94 |
95 | // Default Colors
96 | darkblue: IColor = { start: '#2b4b62', end: '#4b7078'}
97 | green: IColor = { start: '#3dab64', end: '#8ed67d'}
98 | pink: IColor = { start: '#f96b90', end: '#f67cb5'}
99 | blue: IColor = { start: '#43afce', end: '#48c3d3'}
100 |
101 | selectedColor: IColor;
102 |
103 | backgroundColor:any;
104 |
105 | componentWillLoad(){
106 | if(this.color == 'darkblue') {
107 | this.selectedColor = this.darkblue;
108 | } else if(this.color == 'green'){
109 | this.selectedColor = this.green;
110 | } else if(this.color == 'pink'){
111 | this.selectedColor = this.pink;
112 | } else if(this.color == 'blue'){
113 | this.selectedColor = this.blue;
114 | }
115 |
116 | this.backgroundColor = {
117 | background: 'linear-gradient(to right, ' + this.selectedColor.start + ', ' + this.selectedColor.end + ')'
118 |
119 | };
120 | }
121 |
122 |
123 | protected render() {
124 | const {
125 | expand,
126 | round,
127 | size,
128 | strong
129 | } = this;
130 |
131 | const TagType = this.href ? 'a' : 'button';
132 | const buttonClasses = {
133 | ...getButtonTypeClassMap(expand),
134 | ...getButtonTypeClassMap(size),
135 | ...getButtonTypeClassMap(round ? 'round' : null),
136 | ...getButtonTypeClassMap(strong ? 'strong' : null),
137 | 'gradient-button': true,
138 | ...getElementClassMap(this.el.classList),
139 | 'focused': this.keyFocus
140 | };
141 |
142 | const attrs = (TagType === 'button')
143 | ? { type: this.type }
144 | : { href: this.href };
145 |
146 | return (
147 | openURL(this.href, ev)}
154 | onBlur={this.onBlur.bind(this)}
155 | style={this.backgroundColor}>
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 | );
165 |
166 |
167 | }
168 |
169 |
170 | }
171 | /**
172 | * Get the classes based on the type
173 | * e.g. block, full, round, large
174 | */
175 | function getButtonTypeClassMap(type: string|null): any {
176 | if (!type) {
177 | return {};
178 | }
179 | type = type.toLocaleLowerCase();
180 | return {
181 | [`${type}`]: true
182 | };
183 | }
184 |
--------------------------------------------------------------------------------
/src/globals/_colors.scss:
--------------------------------------------------------------------------------
1 | $grey: #333;
--------------------------------------------------------------------------------
/src/globals/_mixins.scss:
--------------------------------------------------------------------------------
1 |
2 | // prefix declarations
3 | @mixin prefixed($property, $value) {
4 | @if $webkit == true {
5 | -webkit-#{$property}: #{$value};
6 | }
7 |
8 | @if $moz == true {
9 | -moz-#{$property}: #{$value};
10 | }
11 |
12 | @if $ms == true {
13 | -ms-#{$property}: #{$value};
14 | }
15 |
16 | @if $o == true {
17 | -o-#{$property}: #{$value};
18 | }
19 |
20 | #{$property}: #{$value};
21 | }
22 |
23 | // prefix keyframes
24 | @mixin keyframes($name) {
25 | @if $webkit == true {
26 | @-webkit-keyframes #{$name} {
27 | @content;
28 | }
29 | }
30 |
31 | @if $moz == true {
32 | @-moz-keyframes #{$name} {
33 | @content;
34 | }
35 | }
36 |
37 | @if $ms == true {
38 | @-ms-keyframes #{$name} {
39 | @content;
40 | }
41 | }
42 |
43 | @if $o == true {
44 | @-o-keyframes #{$name} {
45 | @content;
46 | }
47 | }
48 |
49 | @keyframes #{$name} {
50 | @content;
51 | }
52 | }
53 |
54 | /* Ripple Out */
55 | @include keyframes(#{$nameSpace}-ripple-out) {
56 | 100% {
57 | top: -(6px + 6px);
58 | right: -(6px + 6px);
59 | bottom: -(6px + 6px);
60 | left: -(6px + 6px);
61 | opacity: 0;
62 | }
63 | }
64 |
65 | @mixin ripple-out {
66 | $outerBorderWidth: 6px;
67 | $innerBorderWidth: 6px;
68 |
69 | @include hacks();
70 | position: relative;
71 |
72 | &:before {
73 | content: '';
74 | position: absolute;
75 | border: $primaryColor solid $outerBorderWidth;
76 | top: 0;
77 | right: 0;
78 | bottom: 0;
79 | left: 0;
80 | @include prefixed(animation-duration, 1s);
81 | }
82 |
83 | &:hover:before,
84 | &:focus:before,
85 | &:active:before {
86 | @include prefixed(animation-name, #{$nameSpace}-ripple-out);
87 | }
88 | }
89 |
90 | // As is often the case, some devices/browsers need additional code to get CSS to work
91 | // in the most desired way. These mixins are used to quickly drop in hacks for each element
92 | // Find out more here: https://github.com/IanLunn/Hover/wiki/Hacks-Explained
93 |
94 | @mixin hardwareAccel() {
95 | // Improve performance on mobile/tablet devices
96 | // Perspective reduces blurryness of text in Chrome
97 | @include prefixed(transform, perspective(1px) translateZ(0));
98 | }
99 |
100 | @mixin improveAntiAlias() {
101 | // Improve aliasing on mobile/tablet devices
102 | box-shadow: 0 0 1px rgba(0, 0, 0, 0);
103 | }
104 |
105 | @mixin forceBlockLevel() {
106 | // Transforms need to be block-level to work
107 | display: inline-block;
108 | vertical-align: middle;
109 | }
110 |
111 | @mixin hacks() {
112 | @include forceBlockLevel();
113 | @include hardwareAccel();
114 | @include improveAntiAlias();
115 | }
116 |
117 | // Sets correct text align with support for old browsers
118 | // @param {string} $direction - text direction
119 | // @param {string} $decorator - !important
120 | // ----------------------------------------------------------
121 | @mixin text-align($direction, $decorator: null) {
122 | @if $direction == start {
123 | text-align: left;
124 | text-align: start $decorator;
125 | } @else if $direction == end {
126 | text-align: right;
127 | text-align: end $decorator;
128 | } @else {
129 | text-align: $direction $decorator;
130 | }
131 | }
132 |
133 | // Appearance
134 | // --------------------------------------------------
135 |
136 | @mixin appearance($val) {
137 | -moz-appearance: $val;
138 | -ms-appearance: $val;
139 | -webkit-appearance: $val;
140 | appearance: $val;
141 | }
142 |
143 |
144 | // Add border radius for all directions
145 | // @param {string} $top-start
146 | // @param {string} $top-end
147 | // @param {string} $bottom-end
148 | // @param {string} $bottom-start
149 | // ----------------------------------------------------------
150 | @mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
151 | @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
152 | @include multi-dir() {
153 | border-radius: $top-start;
154 | }
155 | } @else {
156 | @include ltr() {
157 | border-top-left-radius: $top-start;
158 | border-top-right-radius: $top-end;
159 | border-bottom-right-radius: $bottom-end;
160 | border-bottom-left-radius: $bottom-start;
161 | }
162 |
163 | @include rtl() {
164 | border-top-left-radius: $top-end;
165 | border-top-right-radius: $top-start;
166 | border-bottom-right-radius: $bottom-start;
167 | border-bottom-left-radius: $bottom-end;
168 | }
169 | }
170 | }
171 |
172 |
173 | @mixin multi-dir() {
174 | @if $app-direction == multi {
175 | $root: #{&};
176 | @at-root [dir] {
177 | #{$root} {
178 | @content;
179 | }
180 | }
181 | } @else {
182 | @content;
183 | }
184 | }
185 |
186 | @mixin rtl() {
187 | @if $app-direction == multi {
188 | $root: #{&};
189 | @at-root [dir="rtl"] {
190 | #{$root} {
191 | @content;
192 | }
193 | }
194 | } @else if $app-direction == rtl {
195 | @content;
196 | }
197 | }
198 |
199 | @mixin ltr() {
200 | @if $app-direction == multi {
201 | $root: #{&};
202 | @at-root [dir="ltr"] {
203 | #{$root} {
204 | @content;
205 | }
206 | }
207 | } @else if $app-direction == ltr {
208 | @content;
209 | }
210 | }
211 |
212 | // Add margin for all directions
213 | // @param {string} $top
214 | // @param {string} $end
215 | // @param {string} $bottom
216 | // @param {string} $start
217 | // ----------------------------------------------------------
218 | @mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
219 | @include property(margin, $top, $end, $bottom, $start);
220 | }
221 | // Add property for all directions
222 | // @param {string} $prop
223 | // @param {string} $top
224 | // @param {string} $end
225 | // @param {string} $bottom
226 | // @param {string} $start
227 | // @param {boolean} $content include content or use default
228 | // ----------------------------------------------------------
229 | @mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
230 | @if $top == $end and $top == $bottom and $top == $start {
231 | @include multi-dir() {
232 | #{$prop}: $top;
233 | }
234 | } @else if $top == $bottom and $end == $start and $top != null and $end != null {
235 | @include multi-dir() {
236 | #{$prop}: $top $end;
237 | }
238 | } @else if $end == $start and $top != null and $end != null and $bottom != null {
239 | @include multi-dir() {
240 | #{$prop}: $top $end $bottom;
241 | }
242 | } @else if $top != null and $end != null and $bottom != null and $start != null {
243 | @include ltr() {
244 | #{$prop}: $top $end $bottom $start;
245 | }
246 | @include rtl() {
247 | #{$prop}: $top $start $bottom $end;
248 | }
249 | } @else {
250 | @include property-horizontal($prop, $start, $end);
251 | @include multi-dir() {
252 | #{$prop}-top: $top;
253 | #{$prop}-bottom: $bottom;
254 | }
255 | }
256 | }
--------------------------------------------------------------------------------
/src/globals/_variables.scss:
--------------------------------------------------------------------------------
1 |
2 | // Prefix for Hover class names
3 | $nameSpace: 'gradient-button' !default;
4 |
5 |
6 | $nameSpace: 'gradient-button' !default;
7 | $app-direction: 'rtl' !default;
8 |
9 | // Browser Prefixes - Which CSS prefixes should be used?
10 | $webkit: true !default;
11 | $moz: false !default;
12 | $ms: false !default;
13 | $o: false !default;
14 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Stencil Component Starter
8 |
9 |
10 |
11 |
12 |
13 | Gradient Button - Darkblue
14 | Gradient Button - Green
15 | Gradient Button - Pink
16 | Gradient Button - Blue
17 |
18 |
19 |
20 |
21 | Gradient Button - Darkblue - Disabled
22 | Gradient Button - Green - Full
23 | Gradient Button - Pink - Large, Strong, Round
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export type CssClassMap = { [className: string]: boolean };
--------------------------------------------------------------------------------
/src/utils/input-interfaces.ts:
--------------------------------------------------------------------------------
1 | import { EventEmitter } from '@stencil/core';
2 |
3 |
4 | export interface BaseInput {
5 |
6 | /**
7 | * Indicates that the user cannot interact with the control.
8 | */
9 | disabled: boolean;
10 |
11 | /**
12 | * Returns / Sets the element's readonly attribute, indicating that
13 | * the user cannot modify the value of the control. HTML5. This is
14 | * ignored if the value of the type attribute is hidden, range, color,
15 | * checkbox, radio, file, or a button type.
16 | */
17 | readOnly?: boolean;
18 |
19 | /**
20 | * Reflects the value of the form control.
21 | */
22 | value: string;
23 |
24 | }
25 |
26 |
27 | export interface CheckboxInput extends BaseInput {
28 | /**
29 | * Returns / Sets the current state of the element when type is checkbox or radio.
30 | */
31 | checked: boolean;
32 |
33 | name: string;
34 |
35 | /**
36 | * The change event is fired when the value of has changed.
37 | */
38 | ionChange: EventEmitter;
39 |
40 | /**
41 | * Removes focus from input; keystrokes will subsequently go nowhere.
42 | */
43 | ionBlur: EventEmitter;
44 |
45 | /**
46 | * Focus on the input element; keystrokes will subsequently go to this element.
47 | */
48 | ionFocus: EventEmitter;
49 |
50 | /**
51 | * Emitted when the styles change. This is useful for parent
52 | * components to know how to style themselves depending on the
53 | * child input. For example, a disabled ion-toggle may give
54 | * its wrapping ion-item a different style.
55 | */
56 | ionStyle: EventEmitter;
57 | }
58 |
59 |
60 | export interface RadioButtonInput extends BaseInput {
61 | /**
62 | * Returns / Sets the current state of the element when type is checkbox or radio.
63 | */
64 | checked: boolean;
65 |
66 | name: string;
67 |
68 | /**
69 | * A single radio button fires an ionSelect event, whereas
70 | * a radio group fires an ionChange event. It would be more common
71 | * to attach listeners to the radio group, not individual radio buttons.
72 | */
73 | ionSelect: EventEmitter;
74 |
75 | /**
76 | * Removes focus from input; keystrokes will subsequently go nowhere.
77 | */
78 | ionBlur: EventEmitter;
79 |
80 | /**
81 | * Focus on the input element; keystrokes will subsequently go to this element.
82 | */
83 | ionFocus: EventEmitter;
84 | }
85 |
86 |
87 | export interface InputChangeEvent {
88 | value: string;
89 | }
90 |
91 |
92 | export interface CheckedInputChangeEvent extends InputChangeEvent {
93 | checked: boolean;
94 | }
95 |
96 |
97 | export interface SelectInput extends BaseInput {
98 | /**
99 | * Indicates whether the option is currently selected.
100 | */
101 | selected: boolean;
102 |
103 | /**
104 | * A long reflecting the index of the first selected