fastlane-plugin-polidea 0.1.0

data/lib/fastlane/plugin/polidea/templates/installation-page/sass/foundation/components/_icon-bar.scss

@@ -0,0 +1,293 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+
+// @name
+// @dependencies _global.scss
+
+$include-html-icon-bar-classes: $include-html-classes !default;
+
+// @variables
+
+// We use these to style the icon-bar and items
+$icon-bar-bg: $oil !default;
+$icon-bar-font-color: $white !default;
+$icon-bar-font-size: 1rem !default;
+$icon-bar-hover-color: $primary-color !default;
+$icon-bar-icon-color: $white !default;
+$icon-bar-icon-size: 1.875rem !default;
+$icon-bar-image-width: 1.875rem !default;
+$icon-bar-image-height: 1.875rem !default;
+$icon-bar-active-color: $primary-color !default;
+$icon-bar-item-padding: 1.25rem !default;
+
+//
+// @mixins
+//
+
+// We use this mixin to create the base styles for our Icon bar element.
+//
+@mixin icon-bar-base() {
+ 
+ 	width: 100%;
+	font-size: 0;
+	display: inline-block;
+
+	& > * {
+		text-align: center;
+		font-size: $icon-bar-font-size;
+		width: 25%;
+		margin: 0 auto;
+		display: block;
+		padding: $icon-bar-item-padding;
+		float: left;
+
+		i, img { 
+			display: block;
+			margin: 0 auto; 
+
+			& + label {
+				margin-top: .0625rem;
+			}
+		}
+
+		i {
+			font-size: $icon-bar-icon-size;
+			vertical-align: middle;
+		}
+
+		img {
+			width: $icon-bar-image-width;
+			height: $icon-bar-image-height;
+		}
+	}
+
+	&.label-right > * {
+
+		i, img { 
+			margin: 0 .0625rem 0 0; 
+			display: inline-block;
+
+			& + label {
+				margin-top: 0;
+			}
+		}
+
+		label { display: inline-block; }
+	}
+
+	&.vertical.label-right > * {
+		text-align: left;
+	}
+
+	&.vertical, &.small-vertical{
+		height: 100%;
+		width: auto;
+
+		.item {
+			width: auto;
+			margin: auto;
+			float: none;
+		}
+	}
+
+	&.medium-vertical {
+		@media #{$medium-up} {
+			height: 100%;
+			width: auto;
+
+			.item {
+				width: auto;
+				margin: auto;
+				float: none;
+			}
+		}
+	}
+	&.large-vertical {
+		@media #{$large-up} {
+			height: 100%;
+			width: auto;
+
+			.item {
+				width: auto;
+				margin: auto;
+				float: none;
+			}
+		}
+	}
+}
+
+// We use this mixin to create the size styles for icon bars.
+@mixin icon-bar-size(
+	$padding: $icon-bar-item-padding,
+	$font-size: $icon-bar-font-size,
+	$icon-size: $icon-bar-icon-size,
+	$image-width: $icon-bar-image-width,
+	$image-height: $icon-bar-image-height) {
+
+	& > * {
+		font-size: $font-size;
+		padding: $padding;
+
+		i, img { 
+
+			& + label {
+				margin-top: .0625rem;
+			}
+		}
+
+		i {
+			font-size: $icon-size;
+		}
+
+		img {
+			width: $image-width;
+			height: $image-height;
+		}
+	}
+
+}
+
+@mixin icon-bar-style(
+  $bar-bg:$icon-bar-bg,
+  $bar-font-color:$icon-bar-font-color,
+  $bar-hover-color:$icon-bar-hover-color,
+  $bar-icon-color:$icon-bar-icon-color,
+  $bar-active-color:$icon-bar-active-color,
+  $base-style:true) {
+
+	@if $base-style {
+	
+		background: $bar-bg;
+
+		& > * {
+
+			&:hover { background: $bar-hover-color; }
+
+			label { color: $bar-font-color; }
+
+			i {
+				color: $bar-icon-color;
+			}
+		}
+	}
+
+}
+
+// We use this to quickly create icon bars with a single mixin
+// $height - The overall calculated height of the icon bar (horizontal)
+// $bar-bg - the background color of the bar
+// $bar-font-color - the font color
+// $bar-hover-color - okay these are pretty obvious variables
+// $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
+// $bar-active-color - the color of an active / hover state
+// $base-style - Apply base styles? Default: true.
+
+@mixin icon-bar(
+  $bar-bg:$icon-bar-bg,
+  $bar-font-color:$icon-bar-font-color,
+  $bar-hover-color:$icon-bar-hover-color,
+  $bar-icon-color:$icon-bar-icon-color,
+  $bar-active-color:$icon-bar-active-color,
+  $padding: $icon-bar-item-padding,
+	$font-size: $icon-bar-font-size,
+	$icon-size: $icon-bar-icon-size,
+	$image-width: $icon-bar-image-width,
+	$image-height: $icon-bar-image-height,
+  $base-style:true) {
+    @include icon-bar-base();
+    @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
+    @include icon-bar-style($bar-bg, $bar-font-color, $bar-hover-color, $bar-icon-color, $bar-active-color, $base-style);
+}
+
+@include exports("icon-bar") {
+  @if $include-html-icon-bar-classes {
+    .icon-bar {
+      @include icon-bar;
+    }
+  }
+}
+
+@if $include-html-icon-bar-classes {
+
+	// toolbar styles
+
+	.icon-bar {
+
+		// Counts
+
+		&.two-up {
+			.item { width: 50%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.three-up {
+			.item { width: 33.3333%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.four-up {
+			.item { width: 25%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.five-up {
+			.item { width: 20%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.six-up {
+			.item { width: 16.66667%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+	}
+}

data/lib/fastlane/plugin/polidea/templates/installation-page/sass/foundation/components/_inline-lists.scss

@@ -0,0 +1,57 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @variables
+//
+$include-html-inline-list-classes: $include-html-classes !default;
+
+// We use this to control the margins and padding of the inline list.
+$inline-list-top-margin: 0 !default;
+$inline-list-opposite-margin: 0 !default;
+$inline-list-bottom-margin: rem-calc(17) !default;
+$inline-list-default-float-margin: rem-calc(-22) !default;
+$inline-list-default-float-list-margin: rem-calc(22) !default;
+
+$inline-list-padding: 0 !default;
+
+// We use this to control the overflow of the inline list.
+$inline-list-overflow: hidden !default;
+
+// We use this to control the list items
+$inline-list-display: block !default;
+
+// We use this to control any elements within list items
+$inline-list-children-display: block !default;
+
+//
+// @mixins
+//
+// We use this mixin to create inline lists
+@mixin inline-list {
+  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
+  margin-#{$default-float}: $inline-list-default-float-margin;
+  margin-#{$opposite-direction}: $inline-list-opposite-margin;
+  padding: $inline-list-padding;
+  list-style: none;
+  overflow: $inline-list-overflow;
+
+  & > li {
+    list-style: none;
+    float: $default-float;
+    margin-#{$default-float}: $inline-list-default-float-list-margin;
+    display: $inline-list-display;
+    &>* { display: $inline-list-children-display; }
+  }
+}
+
+@include exports("inline-list") {
+  @if $include-html-inline-list-classes {
+    .inline-list {
+      @include inline-list();
+    }
+  }
+}

data/lib/fastlane/plugin/polidea/templates/installation-page/sass/foundation/components/_joyride.scss

@@ -0,0 +1,222 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @variables
+//
+$include-html-joyride-classes: $include-html-classes !default;
+
+// Controlling default Joyride styles
+$joyride-tip-bg: $oil !default;
+$joyride-tip-default-width: 300px !default;
+$joyride-tip-padding: rem-calc(18 20 24) !default;
+$joyride-tip-border: solid 1px $charcoal !default;
+$joyride-tip-radius: 4px !default;
+$joyride-tip-position-offset: 22px !default;
+
+// Here, we're setting the tip font styles
+$joyride-tip-font-color: $white !default;
+$joyride-tip-font-size: rem-calc(14) !default;
+$joyride-tip-header-weight: $font-weight-bold !default;
+
+// This changes the nub size
+$joyride-tip-nub-size: 10px !default;
+
+// This adjusts the styles for the timer when its enabled
+$joyride-tip-timer-width: 50px !default;
+$joyride-tip-timer-height: 3px !default;
+$joyride-tip-timer-color: $steel !default;
+
+// This changes up the styles for the close button
+$joyride-tip-close-color: $monsoon !default;
+$joyride-tip-close-size: 24px !default;
+$joyride-tip-close-weight: $font-weight-normal !default;
+
+// When Joyride is filling the screen, we use this style for the bg
+$joyride-screenfill: rgba(0,0,0,0.5) !default;
+
+
+// We decided not to make a mixin for this because it relies on
+// predefined classes to work properly.
+@include exports("joyride") {
+  @if $include-html-joyride-classes {
+
+    /* Foundation Joyride */
+    .joyride-list { display: none; }
+
+    /* Default styles for the container */
+    .joyride-tip-guide {
+      display: none;
+      position: absolute;
+      background: $joyride-tip-bg;
+      color: $joyride-tip-font-color;
+      z-index: 101;
+      top: 0;
+      #{$default-float}: 2.5%;
+      font-family: inherit;
+      font-weight: $font-weight-normal;
+      width: 95%;
+    }
+
+    .lt-ie9 .joyride-tip-guide {
+      max-width:800px;
+      #{$default-float}: 50%;
+      margin-#{$default-float}:-400px;
+    }
+
+    .joyride-content-wrapper {
+      width: 100%;
+
+      padding: $joyride-tip-padding;
+
+      .button { margin-bottom: 0 !important; }
+
+      .joyride-prev-tip { margin-right: 10px; }
+    }
+
+    /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
+    .joyride-tip-guide {
+      .joyride-nub {
+        display: block;
+        position: absolute;
+        #{$default-float}: $joyride-tip-position-offset;
+        width: 0;
+        height: 0;
+        border: $joyride-tip-nub-size solid $joyride-tip-bg;
+
+        &.top {
+          border-top-style: solid;
+          border-color: $joyride-tip-bg;
+          border-top-color: transparent !important;
+          border-#{$default-float}-color: transparent !important;
+          border-#{$opposite-direction}-color: transparent !important;
+          top: -($joyride-tip-nub-size*2);
+        }
+        &.bottom {
+          border-bottom-style: solid;
+          border-color: $joyride-tip-bg !important;
+          border-bottom-color: transparent !important;
+          border-#{$default-float}-color: transparent !important;
+          border-#{$opposite-direction}-color: transparent !important;
+          bottom: -($joyride-tip-nub-size*2);
+        }
+
+        &.right { right: -($joyride-tip-nub-size*2); }
+        &.left { left: -($joyride-tip-nub-size*2); }
+      }
+    }
+
+    /* Typography */
+    .joyride-tip-guide h1,
+    .joyride-tip-guide h2,
+    .joyride-tip-guide h3,
+    .joyride-tip-guide h4,
+    .joyride-tip-guide h5,
+    .joyride-tip-guide h6 {
+      line-height: 1.25;
+      margin: 0;
+      font-weight: $joyride-tip-header-weight;
+      color: $joyride-tip-font-color;
+    }
+    .joyride-tip-guide p {
+      margin: rem-calc(0 0 18 0);
+      font-size: $joyride-tip-font-size;
+      line-height: 1.3;
+    }
+
+    .joyride-timer-indicator-wrap {
+      width: $joyride-tip-timer-width;
+      height: $joyride-tip-timer-height;
+      border: $joyride-tip-border;
+      position: absolute;
+      #{$opposite-direction}: rem-calc(17);
+      bottom: rem-calc(16);
+    }
+    .joyride-timer-indicator {
+      display: block;
+      width: 0;
+      height: inherit;
+      background: $joyride-tip-timer-color;
+    }
+
+    .joyride-close-tip {
+      position: absolute;
+      #{$opposite-direction}: 12px;
+      top: 10px;
+      color: $joyride-tip-close-color !important;
+      text-decoration: none;
+      font-size: $joyride-tip-close-size;
+      font-weight: $joyride-tip-close-weight;
+      line-height: .5 !important;
+
+      &:hover,
+      &:focus { color: $smoke !important; }
+    }
+
+    .joyride-modal-bg {
+      position: fixed;
+      height: 100%;
+      width: 100%;
+      background: transparent;
+      background: $joyride-screenfill;
+      z-index: 100;
+      display: none;
+      top: 0;
+      #{$default-float}: 0;
+      cursor: $cursor-pointer-value;
+    }
+
+    .joyride-expose-wrapper {
+      background-color: $white;
+      position: absolute;
+      border-radius: 3px;
+      z-index: 102;
+      box-shadow: 0 0 15px $white;
+    }
+
+    .joyride-expose-cover {
+      background: transparent;
+      border-radius: 3px;
+      position: absolute;
+      z-index: 9999;
+      top: 0;
+      left: 0;
+    }
+
+
+    /* Styles for screens that are at least 768px; */
+    @media #{$small} {
+      .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
+        .joyride-nub {
+          &.bottom {
+            border-color: $joyride-tip-bg !important;
+            border-bottom-color: transparent !important;
+            border-#{$default-float}-color: transparent !important;
+            border-#{$opposite-direction}-color: transparent !important;
+            bottom: -($joyride-tip-nub-size*2);
+          }
+          &.right {
+            border-color: $joyride-tip-bg !important;
+            border-top-color: transparent !important;
+            border-right-color: transparent !important; border-bottom-color: transparent !important;
+            top: $joyride-tip-position-offset;
+            left: auto;
+            right: -($joyride-tip-nub-size*2);
+          }
+          &.left {
+            border-color: $joyride-tip-bg !important;
+            border-top-color: transparent !important;
+            border-left-color: transparent !important;
+            border-bottom-color: transparent !important;
+            top: $joyride-tip-position-offset;
+            left: -($joyride-tip-nub-size*2);
+            right: auto;
+          }
+        }
+      }
+    }
+  }
+}