added fn-button sizes and toggle (cb0b5b29) · Commits · github_fork / Clip

fnord-webcomponents/components/fn-button-demo.html

+22 −3

Original line number	Diff line number	Diff line
		@@ -40,8 +40,8 @@
		<fn-button data-state='disabled'>Next</fn-button>
		<h3><i>Example 2 »</i> Active</h3>
		<fn-button data-state='active'>Auto Refresh</fn-button>


		<h3><i>Example 3 »</i> Toggle</h3>
		<fn-button data-toggle id="toggle">Off</fn-button>
		</section>


		@@ -90,4 +90,23 @@
		</fn-button-group>
		</div>
		</section>
		<section>
		<h1>Sizes</h1>
		<fn-button data-size='mini'>Mini</fn-button>
		<fn-button data-size='tiny'>Tiny</fn-button>
		<fn-button data-size='small'>Small</fn-button>
		<fn-button data-size='medium'>Medium</fn-button>
		<fn-button data-size='large'>Large</fn-button>
		<fn-button data-size='big'>Big</fn-button>
		</section>
		<script type='text/javascript'>
		document.querySelector("#toggle").addEventListener("fn-button-click", function() {
		if (this.hasAttribute('data-state')) {
		this.removeAttribute('data-state');
		} else {
		this.setAttribute('data-state', 'active');
		}
		}, false);
		</script>
		</template>

fnord-webcomponents/components/fn-button.css

+58 −0

Original line number	Diff line number	Diff line
		@@ -119,8 +119,26 @@ fn-button[data-state='active'],
		box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px rgba(39, 41, 43, 0.15) inset;
		}

		/*--------------
		Toggle
		---------------*/


		/* Toggle (Modifies active state to give affordances) */
		fn-button[data-toggle][data-state='active'],
		.fn-button[data-toggle][data-state='active'] {
		background-color: #3b83c0 !important;
		box-shadow: none !important;
		text-shadow: none;
		color: #ffffff !important;
		}
		fn-button[data-toggle][data-state='active']:hover,
		.fn-button[data-toggle][data-state='active']:hover {
		background-color: #458ac6 !important;
		text-shadow: none;
		color: #ffffff !important;
		}

		/*******************************
		Button Groups
		*******************************/
		@@ -158,8 +176,48 @@ fn-button-group[data-split-evenly] {
		width: 100%;
		}

		/*-------------------
		Sizes
		--------------------*/

		.fn-button-group .fn-button[data-size='mini'],
		.fn-button[data-size='mini'],
		fn-button-group fn-button[data-size='mini'],
		fn-button[data-size='mini'] {
		font-size: 0.71428571rem;
		}

		.fn-button-group .fn-button[data-size='tiny'],
		.fn-button[data-size='tiny'],
		fn-button-group fn-button[data-size='tiny'],
		fn-button[data-size='tiny'] {
		font-size: 0.85714286rem;
		}

		.fn-button-group .fn-button[data-size='small'],
		.fn-button[data-size='small'],
		fn-button-group fn-button[data-size='small'],
		fn-button[data-size='small'] {
		font-size: 0.92857143rem;
		}

		.fn-button-group .fn-button,
		.fn-button,
		fn-button-group fn-button,
		fn-button {
		font-size: 1rem;
		}

		.fn-button-group .fn-button[data-size='large'],
		.fn-button[data-size='large'],
		fn-button-group fn-button[data-size='large'],
		fn-button[data-size='large'] {
		font-size: 1.14285714rem;
		}
		.fn-button-group .fn-button[data-size='big'],
		.fn-button[data-size='big'],
		fn-button-group fn-button[data-size='big'],
		fn-button[data-size='big'] {
		font-size: 1.28571429rem;
		}

fnord-webcomponents/components/fn-controls.html

+0 −5

Original line number	Diff line number	Diff line
		@@ -123,11 +123,6 @@
		}


		fn-controls[type='secondary'] /deep/ fn-button[auto-refresh-on='on'] {
		color : #009fe9;
		}



		</style>
		<template id="fn-controls-base-tpl">

Admin message