@ptcwebops/ptcw-design 0.8.3 → 0.8.6

package/dist/collection/components/ptc-spacer/ptc-spacer.css

@@ -1,323 +1,333 @@
-:host {
-	box-sizing: border-box;
-	padding: 0;
-	margin: 0;
-	background: transparent;
-	border: 0;
-	-moz-appearance: none;
-	-webkit-appearance: none;
-	appearance: none;
-	position: relative;
-	display: block;
-	width: 12px;
-	min-width: 12px;
-	height: 12px
-}
-
-@media (min-width: 36em) {
-	:host {
-		width: 16px;
-		min-width: 16px;
-		height: 16px
-	}
-}
-
-:host(.ptc-spacer-horizontal) {
-	display: inline-block;
-	height: 100% !important
-}
-
-:host(.ptc-spacer-horizontal.xx-small) {
-	width: 4px;
-	min-width: 4px;
-	height: 100%
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-horizontal.xx-small) {
-		width: 4px;
-		min-width: 4px
-	}
-}
-
-:host(.ptc-spacer-horizontal.x-small) {
-	width: 4px;
-	min-width: 4px;
-	height: 100%
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-horizontal.x-small) {
-		width: 8px;
-		min-width: 8px
-	}
-}
-
-:host(.ptc-spacer-horizontal.small) {
-	width: 8px;
-	min-width: 8px;
-	height: 100%
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-horizontal.small) {
-		width: 12px;
-		min-width: 12px
-	}
-}
-
-:host(.ptc-spacer-horizontal.medium) {
-	height: 100%
-}
-
-:host(.ptc-spacer-horizontal.large) {
-	width: 16px;
-	min-width: 16px;
-	height: 100%
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-horizontal.large) {
-		width: 20px;
-		min-width: 20px
-	}
-}
-
-:host(.ptc-spacer-horizontal.x-large) {
-	width: 20px;
-	min-width: 20px;
-	height: 100%
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-horizontal.x-large) {
-		width: 28px;
-		min-width: 28px
-	}
-}
-
-:host(.ptc-spacer-horizontal.xx-large) {
-	width: 28px;
-	min-width: 28px;
-	height: 100%
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-horizontal.xx-large) {
-		width: 36px;
-		min-width: 36px
-	}
-}
-
-:host(.ptc-spacer-horizontal.xxx-large) {
-	width: 36px;
-	min-width: 36px;
-	height: 100%
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-horizontal.xxx-large) {
-		width: 48px;
-		min-width: 48px
-	}
-}
-
-:host(.ptc-spacer-horizontal.xxxx-large) {
-	width: 48px;
-	min-width: 48px;
-	height: 100%
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-horizontal.xxxx-large) {
-		width: 72px;
-		min-width: 72px
-	}
-}
-
-:host(.ptc-spacer-vertical.xx-small) {
-	width: 100%;
-	height: 4px;
-	min-height: 4px
-}
-
-:host(.ptc-spacer-vertical.x-small) {
-	width: 100%;
-	height: 4px;
-	min-height: 4px
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-vertical.x-small) {
-		height: 8px;
-		min-height: 8px
-	}
-}
-
-:host(.ptc-spacer-vertical.small) {
-	width: 100%;
-	height: 8px;
-	min-height: 8px
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-vertical.small) {
-		height: 12px;
-		min-height: 12px
-	}
-}
-
-:host(.ptc-spacer-vertical.medium) {
-	width: 100%
-}
-
-:host(.ptc-spacer-vertical.large) {
-	width: 100%;
-	height: 16px;
-	min-height: 16px
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-vertical.large) {
-		height: 20px;
-		min-height: 20px
-	}
-}
-
-:host(.ptc-spacer-vertical.x-large) {
-	width: 100%;
-	height: 20px;
-	min-height: 20px
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-vertical.x-large) {
-		height: 28px;
-		min-height: 28px
-	}
-}
-
-:host(.ptc-spacer-vertical.xx-large) {
-	width: 100%;
-	height: 28px;
-	min-height: 28px
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-vertical.xx-large) {
-		height: 36px;
-		min-height: 36px
-	}
-}
-
-:host(.ptc-spacer-vertical.xxx-large) {
-	width: 100%;
-	height: 36px;
-	min-height: 36px
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-vertical.xxx-large) {
-		height: 48px;
-		min-height: 48px
-	}
-}
-
-:host(.ptc-spacer-vertical.xxxx-large) {
-	width: 100%;
-	height: 48px;
-	min-height: 48px
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-vertical.xxxx-large) {
-		height: 72px;
-		min-height: 72px
-	}
-}
-
-:host(.ptc-spacer-vertical.space-144){
-	width: 100%;
-	height: 144px;
-	min-height: 144px;
-}
-:host(.ptc-spacer-vertical.space-120){
-	width: 100%;
-	height: 120px;
-	min-height: 120px;
-}
-:host(.ptc-spacer-vertical.space-128){
-	width: 100%;
-	height: 128px;
-	min-height: 128px;
-}
-
-:host(.ptc-spacer-xx-small) {
-	display: none
-}
-
-@media (max-width: 22.5em) {
-	:host(.ptc-spacer-xx-small) {
-		display: block
-	}
-}
-
-:host(.ptc-spacer-x-small) {
-	display: none
-}
-
-@media (max-width: 35.9375em) {
-	:host(.ptc-spacer-x-small) {
-		display: block
-	}
-}
-
-:host(.ptc-spacer-small) {
-	display: none
-}
-
-@media (min-width: 36em) {
-	:host(.ptc-spacer-small) {
-		display: block
-	}
-}
-
-:host(.ptc-spacer-medium) {
-	display: none
-}
-
-@media (min-width: 48em) {
-	:host(.ptc-spacer-medium) {
-		display: block
-	}
-}
-
-:host(.ptc-spacer-large) {
-	display: none
-}
-
-@media (min-width: 62em) {
-	:host(.ptc-spacer-large) {
-		display: block
-	}
-}
-
-:host(.ptc-spacer-x-large) {
-	display: none
-}
-
-@media (min-width: 64.0625em) {
-	:host(.ptc-spacer-x-large) {
-		display: block
-	}
-}
-
-:host(.ptc-spacer-xx-large) {
-	display: none
-}
-
-@media (min-width: 76.25em) {
-	:host(.ptc-spacer-xx-large) {
-		display: block
-	}
+:host {
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+	background: transparent;
+	border: 0;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+	position: relative;
+	display: block;
+	width: 12px;
+	min-width: 12px;
+	height: 12px
+}
+
+@media (min-width: 36em) {
+	:host {
+		width: 16px;
+		min-width: 16px;
+		height: 16px
+	}
+}
+
+:host(.ptc-spacer-horizontal) {
+	display: inline-block;
+	height: 100% !important
+}
+
+:host(.ptc-spacer-horizontal.xx-small) {
+	width: 4px;
+	min-width: 4px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.xx-small) {
+		width: 4px;
+		min-width: 4px
+	}
+}
+
+:host(.ptc-spacer-horizontal.x-small) {
+	width: 4px;
+	min-width: 4px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.x-small) {
+		width: 8px;
+		min-width: 8px
+	}
+}
+
+:host(.ptc-spacer-horizontal.small) {
+	width: 8px;
+	min-width: 8px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.small) {
+		width: 12px;
+		min-width: 12px
+	}
+}
+
+:host(.ptc-spacer-horizontal.medium) {
+	height: 100%
+}
+
+:host(.ptc-spacer-horizontal.large) {
+	width: 16px;
+	min-width: 16px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.large) {
+		width: 20px;
+		min-width: 20px
+	}
+}
+
+:host(.ptc-spacer-horizontal.x-large) {
+	width: 20px;
+	min-width: 20px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.x-large) {
+		width: 28px;
+		min-width: 28px
+	}
+}
+
+:host(.ptc-spacer-horizontal.xx-large) {
+	width: 28px;
+	min-width: 28px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.xx-large) {
+		width: 36px;
+		min-width: 36px
+	}
+}
+
+:host(.ptc-spacer-horizontal.xxx-large) {
+	width: 36px;
+	min-width: 36px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.xxx-large) {
+		width: 48px;
+		min-width: 48px
+	}
+}
+
+:host(.ptc-spacer-horizontal.xxxx-large) {
+	width: 48px;
+	min-width: 48px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.xxxx-large) {
+		width: 72px;
+		min-width: 72px
+	}
+}
+
+:host(.ptc-spacer-vertical.xx-small) {
+	width: 100%;
+	height: 4px;
+	min-height: 4px
+}
+
+:host(.ptc-spacer-vertical.x-small) {
+	width: 100%;
+	height: 4px;
+	min-height: 4px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.x-small) {
+		height: 8px;
+		min-height: 8px
+	}
+}
+
+:host(.ptc-spacer-vertical.small) {
+	width: 100%;
+	height: 8px;
+	min-height: 8px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.small) {
+		height: 12px;
+		min-height: 12px
+	}
+}
+
+:host(.ptc-spacer-vertical.medium) {
+	width: 100%
+}
+
+:host(.ptc-spacer-vertical.large) {
+	width: 100%;
+	height: 16px;
+	min-height: 16px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.large) {
+		height: 20px;
+		min-height: 20px
+	}
+}
+
+:host(.ptc-spacer-vertical.x-large) {
+	width: 100%;
+	height: 20px;
+	min-height: 20px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.x-large) {
+		height: 28px;
+		min-height: 28px
+	}
+}
+
+:host(.ptc-spacer-vertical.xx-large) {
+	width: 100%;
+	height: 28px;
+	min-height: 28px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.xx-large) {
+		height: 36px;
+		min-height: 36px
+	}
+}
+
+:host(.ptc-spacer-vertical.xxx-large) {
+	width: 100%;
+	height: 36px;
+	min-height: 36px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.xxx-large) {
+		height: 48px;
+		min-height: 48px
+	}
+}
+
+:host(.ptc-spacer-vertical.xxxx-large) {
+	width: 100%;
+	height: 48px;
+	min-height: 48px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.xxxx-large) {
+		height: 72px;
+		min-height: 72px
+	}
+}
+
+:host(.ptc-spacer-vertical.space-144){
+	width: 100%;
+	height: 144px;
+	min-height: 144px;
+}
+:host(.ptc-spacer-vertical.space-120){
+	width: 100%;
+	height: 120px;
+	min-height: 120px;
+}
+:host(.ptc-spacer-vertical.space-128){
+	width: 100%;
+	height: 128px;
+	min-height: 128px;
+}
+
+:host(.ptc-spacer-xx-small) {
+	display: none
+}
+
+@media (max-width: 22.5em) {
+	:host(.ptc-spacer-xx-small) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-x-small) {
+	display: none
+}
+
+@media (max-width: 35.99em) {
+	:host(.ptc-spacer-x-small) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-small) {
+	display: none
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-small) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-medium) {
+	display: none
+}
+
+@media (min-width: 48em) {
+	:host(.ptc-spacer-medium) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-large) {
+	display: none
+}
+
+@media (min-width: 62em) {
+	:host(.ptc-spacer-large) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-x-large) {
+	display: none
+}
+
+@media (min-width: 64.0625em) {
+	:host(.ptc-spacer-x-large) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-xx-large) {
+	display: none
+}
+
+@media (min-width: 76.25em) {
+	:host(.ptc-spacer-xx-large) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-xxx-large) {
+	display: none
+}
+
+@media (min-width: 90em) {
+	:host(.ptc-spacer-xxx-large) {
+		display: block
+	}
 }