@iroco/ui 0.20.0 → 0.50.0

package/scss/fields/_checkbox.scss

@@ -1,44 +1,39 @@
 .ui-fields-checkbox {
-
-  >.container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-
-    >label {
-      @include Arial(.9em, $blue, bold);
-      letter-spacing: .05em;
-      text-transform: uppercase;
-      display: inline-block;
-      margin-left: 20px;
-
-      @include small-screen() {
-        font-size: .8em;
-        margin-left: 15px;
-      }
-
-    }
-  }
-
-  >.error, >.warning {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-top: 15px;
-
-    >span {
-      @include Arial(.9em, $red);
-      margin-left: 10px;
-    }
-
-  }
-
-  >.warning {
-
-    >span {
-      color: $blue;
-    }
-
-  }
-
+	> .container {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+
+		> label {
+			@include Arial(0.9em, $blue, bold);
+			letter-spacing: 0.05em;
+			text-transform: uppercase;
+			display: inline-block;
+			margin-left: 20px;
+
+			@include small-screen() {
+				font-size: 0.8em;
+				margin-left: 15px;
+			}
+		}
+	}
+
+	> .error,
+	> .warning {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		margin-top: 15px;
+
+		> span {
+			@include Arial(0.9em, $red);
+			margin-left: 10px;
+		}
+	}
+
+	> .warning {
+		> span {
+			color: $blue;
+		}
+	}
 }

package/scss/fields/_input.scss

@@ -1,171 +1,162 @@
 .ui-fields-input {
-  width: 100%;
-  transition: width linear 100ms;
-
-  > label {
-    @include Arial(1em, white, bold);
-    letter-spacing: .05em;
-    text-transform: uppercase;
-    padding-bottom: 10px;
-    display: inline-block;
-  }
-
-  input, input:active, input:focus {
-    border: none;
-    outline: none;
-    text-decoration: none;
-    background: transparent;
-
-  }
-
-  >.container {
-    transition: background linear 100ms;
-    background: white;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-
-    &:after {
-      content: "";
-      display: block;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 0;
-      height: 3px;
-      background: $green;
-      transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
-
-    >.left-icon {
-      padding-left: 15px;
-    }
-
-    >input {
-      @include Arial(1em, $darkBlue);
-      flex: 1;
-      padding: 10px 15px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-
-      &::placeholder {
-        color: rgba($darkBlue, .3);
-        font-style: italic;
-      }
-
-    }
-
-    >.suggestions {
-      overflow: hidden;
-      visibility: hidden;
-      opacity: 0;
-      position: absolute;
-      background: white;
-      width: 100%;
-      top: 100%;
-      transition: opacity linear 100ms;
-      @include modal-layout();
-
-      >.suggestion {
-        display: block;
-        text-align: left;
-        width: 100%;
-        border: none;
-        cursor: pointer;
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        flex-shrink: 0;
-        border-top: solid $beige 1px;
-        background: white;
-        transition: background linear 100ms;
-
-        &:first-child {
-          border: none;
-        }
-
-        &:hover, &.selected {
-          background: $lightGrey;
-        }
-
-      }
-
-    }
-  }
-
-  >.instructions {
-    @include Arial(1em, $darkBeige);
-    margin-top: 10px;
-  }
-
-  >.error, >.warning {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-top: 15px;
-
-    >span {
-      @include Arial(.9em, $red);
-      margin-left: 10px;
-    }
-
-  }
-
-  >.warning {
-
-    >span {
-      color: $blue;
-    }
-
-  }
-
-  &.active {
-    >.container {
-
-      &:after {
-        width: 100%;
-      }
-
-      >.suggestions.active {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-  }
-
-  &.dark {
-
-    >.container {
-      background: $darkBlue;
-
-      &:after {
-        //background: $blue;
-      }
-
-      >input {
-        padding: 15px 20px;
-
-        &::placeholder {
-          color: rgba(white, .3);
-        }
-
-      }
-
-    }
-
-    &.active, &.touched {
-      >.container {
-        background: white;
-
-      }
-    }
-
-  }
-
+	width: 100%;
+	transition: width linear 100ms;
+
+	> label {
+		@include Arial(1em, white, bold);
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		padding-bottom: 10px;
+		display: inline-block;
+	}
+
+	input,
+	input:active,
+	input:focus {
+		border: none;
+		outline: none;
+		text-decoration: none;
+		background: transparent;
+	}
+
+	> .container {
+		transition: background linear 100ms;
+		background: white;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		position: relative;
+
+		&:after {
+			content: '';
+			display: block;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 0;
+			height: 3px;
+			background: $green;
+			transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
+		}
+
+		> .left-icon {
+			padding-left: 15px;
+		}
+
+		> input {
+			@include Arial(1em, $darkBlue);
+			flex: 1;
+			padding: 10px 15px;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+
+			&::placeholder {
+				color: rgba($darkBlue, 0.3);
+				font-style: italic;
+			}
+		}
+
+		> .suggestions {
+			overflow: hidden;
+			visibility: hidden;
+			opacity: 0;
+			position: absolute;
+			background: white;
+			width: 100%;
+			top: 100%;
+			transition: opacity linear 100ms;
+			@include modal-layout();
+
+			> .suggestion {
+				display: block;
+				text-align: left;
+				width: 100%;
+				border: none;
+				cursor: pointer;
+				-webkit-touch-callout: none;
+				-webkit-user-select: none;
+				-khtml-user-select: none;
+				-moz-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+				flex-shrink: 0;
+				border-top: solid $beige 1px;
+				background: white;
+				transition: background linear 100ms;
+
+				&:first-child {
+					border: none;
+				}
+
+				&:hover,
+				&.selected {
+					background: $lightGrey;
+				}
+			}
+		}
+	}
+
+	> .instructions {
+		@include Arial(1em, $darkBeige);
+		margin-top: 10px;
+	}
+
+	> .error,
+	> .warning {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		margin-top: 15px;
+
+		> span {
+			@include Arial(0.9em, $red);
+			margin-left: 10px;
+		}
+	}
+
+	> .warning {
+		> span {
+			color: $blue;
+		}
+	}
+
+	&.active {
+		> .container {
+			&:after {
+				width: 100%;
+			}
+
+			> .suggestions.active {
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+	}
+
+	&.dark {
+		> .container {
+			background: $darkBlue;
+
+			&:after {
+				//background: $blue;
+			}
+
+			> input {
+				padding: 15px 20px;
+
+				&::placeholder {
+					color: rgba(white, 0.3);
+				}
+			}
+		}
+
+		&.active,
+		&.touched {
+			> .container {
+				background: white;
+			}
+		}
+	}
 }

package/scss/fonts.scss

@@ -1,11 +1,11 @@
 $arial: 'Arial';
 
 @mixin Arial($size: 1em, $color: white, $weight: normal) {
-  font-family: $arial, sans-serif;
-  font-size: $size;
-  font-weight: $weight;
-  color: $color;
-  margin: 0;
-  padding: 0;
-  transition: color ease-out 100ms, font-size ease-out 100ms;
+	font-family: $arial, sans-serif;
+	font-size: $size;
+	font-weight: $weight;
+	color: $color;
+	margin: 0;
+	padding: 0;
+	transition: color ease-out 100ms, font-size ease-out 100ms;
 }

package/scss/forms.scss

@@ -1,67 +1,65 @@
 @use 'colors';
 
 .iroco-ui-form {
-  input, textarea {
-    outline: none;
-    text-decoration: none;
-    font-size: 14px;
+	input,
+	textarea {
+		outline: none;
+		text-decoration: none;
+		font-size: 14px;
 
-    &:focus {
-      outline: none;
-      text-decoration: none;
-      font-size: 14px;
-    }
-  }
+		&:focus {
+			outline: none;
+			text-decoration: none;
+			font-size: 14px;
+		}
+	}
 
-  .iroco-ui-input {
-    display: flex;
-    flex-direction: column;
-    > input {
-      color: colors.$beige;
-      background: colors.$darkBlue;
-      border: 1px solid colors.$darkBlue;
-      padding: 1em 1.5em;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      border-radius: 0.5em;
+	.iroco-ui-input {
+		display: flex;
+		flex-direction: column;
+		> input {
+			color: colors.$beige;
+			background: colors.$darkBlue;
+			border: 1px solid colors.$darkBlue;
+			padding: 1em 1.5em;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			border-radius: 0.5em;
 
-      &::placeholder {
-        color: rgba(colors.$beige, .5);
-      }
-      &.error {
-        border-color: colors.$red;
-      }
-      &.readonlyInput{
-        cursor: not-allowed;
-      }
-    }
-  }
+			&::placeholder {
+				color: rgba(colors.$beige, 0.5);
+			}
+			&.error {
+				border-color: colors.$red;
+			}
+			&.readonlyInput {
+				cursor: not-allowed;
+			}
+		}
+	}
 
-  .iroco-ui-label {
-    color: rgba(colors.$beige, .6);
-    font-weight: bold;
-    padding-bottom: 10px;
-    display: inline-block;
-  }
+	.iroco-ui-label {
+		color: rgba(colors.$beige, 0.6);
+		font-weight: bold;
+		padding-bottom: 10px;
+		display: inline-block;
+	}
 
-  .field {
-    margin-top: 20px;
+	.field {
+		margin-top: 20px;
 
-    &:first-child {
-      margin: 0;
-    }
-  }
+		&:first-child {
+			margin: 0;
+		}
+	}
 
-  >.submit {
-    margin-top: 40px;
-  }
+	> .submit {
+		margin-top: 40px;
+	}
 
-  p.error {
-    margin: 0;
-    color: colors.$red;
-  }
+	p.error {
+		margin: 0;
+		color: colors.$red;
+	}
 }
-
-
-

package/scss/iroco.scss

@@ -1,37 +1,37 @@
-@use "colors";
-@use "fonts";
-@use "style";
+@use 'colors';
+@use 'fonts';
+@use 'style';
 
 *,
 *::before,
 *::after {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 a,
 a:visited,
 a:active,
 button {
-  outline: none;
-  text-decoration: none;
-  font-size: 14px;
-  color: colors.$beige;
+	outline: none;
+	text-decoration: none;
+	font-size: 14px;
+	color: colors.$beige;
 }
 
 html {
-  margin: 0;
-  padding: 0;
+	margin: 0;
+	padding: 0;
 
-  > body {
-    @include fonts.Arial(14px, white);
-    margin: 0;
-    padding: 0;
-    cursor: default;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-kerning: normal;
-    background: colors.$darkBlue;
-  }
+	> body {
+		@include fonts.Arial(14px, white);
+		margin: 0;
+		padding: 0;
+		cursor: default;
+		text-rendering: optimizeLegibility;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		font-kerning: normal;
+		background: colors.$darkBlue;
+	}
 }

package/scss/layouts.scss

@@ -1,7 +1,21 @@
-@mixin background-layout {z-index: -1;}
-@mixin page-layout {z-index: 1;}
-@mixin foreground-layout {z-index: 2;}
-@mixin header-layout {z-index: 3;}
-@mixin menu-layout {z-index: 4;}
-@mixin modal-layout {z-index: 5;}
-@mixin popup-layout {z-index: 6;}
+@mixin background-layout {
+	z-index: -1;
+}
+@mixin page-layout {
+	z-index: 1;
+}
+@mixin foreground-layout {
+	z-index: 2;
+}
+@mixin header-layout {
+	z-index: 3;
+}
+@mixin menu-layout {
+	z-index: 4;
+}
+@mixin modal-layout {
+	z-index: 5;
+}
+@mixin popup-layout {
+	z-index: 6;
+}

package/scss/loader.scss

@@ -1,20 +1,22 @@
 .ui-loader {
-  display: inline-block;
-  position: relative;
+	display: inline-block;
+	position: relative;
 
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  >div {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-style: solid;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-
-  }
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
 
+	> div {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		border-style: solid;
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+	}
 }