toggle-components-library 1.10.1

package/src/sass/includes/_as_buttons.scss

@@ -0,0 +1,235 @@
+// loading
+.toggle-button-loader {
+    border-radius: 50%;
+    border: .25rem solid $toggle-button-disabled;
+    border-top-color: $toggle-white;
+    animation: spin 1s infinite linear;
+    margin: 0 auto;
+    width:0.5rem;
+    height:0.5rem;
+    position:absolute;
+    left:50%;
+    margin-left: -0.5rem;
+    top:50%;
+    margin-top: -0.5rem;
+    box-sizing:content-box;
+}
+
+.toggle-button-container{
+    background:white;
+    display: inline-block;
+    border-radius: 0.3rem;
+}
+
+
+.toggle-button-a{
+    position:relative;
+}
+
+.toggle-button, .toggle-button-a a{
+    @include toggle-global-font-config;
+    display: block;
+    font-size: $toggle-font-size-small;
+    box-sizing: border-box;
+    font-weight: bold;
+    border-radius: 0.3rem;
+    cursor: pointer;
+    border-width:2px;
+    border-style: solid;
+    background:transparent;
+    background-repeat: no-repeat;
+    position:relative;
+
+    strong{
+        font-weight: 900;
+    }
+
+}
+
+.toggle-button-float-left{
+    float:left;
+    clear: both;
+}
+
+.toggle-button:disabled, .toggle-button-a.disabled a{
+    border: 2px solid $toggle-button-disabled !important;
+    color: $toggle-button-disabled !important;
+    &:after{
+        opacity: 0;
+    }
+}
+
+.toggle-button:after, .toggle-button-a a:after{
+    position:absolute;
+    content:'';
+    width:100%;
+    height:100%;
+    left:0;
+    top:0;
+    opacity: 0.15;
+    z-index: 0;
+}
+
+.toggle-button-a-loading .toggle-button-a-border{
+
+    position:relative;
+    box-sizing:border-box;
+    border-radius: 0.3rem;
+    border: 2px solid $toggle-button-disabled !important;
+    color: $toggle-button-disabled !important;
+    width:100%;
+    height:100%;
+    position: absolute;
+    top:0;
+    left:0;
+
+}
+
+.toggle-button.toggle-button-loading, .toggle-button-a-loading{
+    background-image: none !important;
+    min-width: 5rem;
+    span, a{
+        opacity: 0;
+    }
+}
+
+.toggle-button:hover:not([disabled]), .toggle-button-a:not(.disabled) a:hover{
+    &:after{
+        opacity: 0.1;
+    }
+}
+
+// Confirm Button styls
+.toggle-button.confirm, .toggle-button-a.confirm a{
+    color: $toggle-button-success;
+    border-color: $toggle-button-success;
+    background-image: url("../assets/icons/tick.svg");
+    background-position: 1rem 0.4rem;
+    background-size:0.95rem 0.95rem;
+    padding: 0.5rem 1.2rem 0.5rem 2.7rem;
+}
+.toggle-button.confirm:after, .toggle-button-a.confirm a:after{
+    background-color:$toggle-button-success;
+}
+.toggle-button.confirm:disabled, .toggle-button-a.confirm.disabled a{
+    background-image: url("../assets/icons/tick-grey.svg");
+}
+
+// Abort Button styls
+.toggle-button.abort, .toggle-button-a a.abort{
+    color: $toggle-button-abort;
+    border-color: $toggle-button-abort;
+    background-image: url("../assets/icons/delete.svg");
+    background-position: 1rem 0.5rem;
+    background-size:0.95rem 0.95rem;
+    padding: 0.5rem 1.2rem 0.5rem 2.7rem;
+}
+.toggle-button.abort:after, .toggle-button-a.abort a:after{
+    background-color:$toggle-button-abort;
+}
+.toggle-button.abort:disabled, .toggle-button-a.disabled a{
+    background-image: url("../assets/icons/delete-grey.svg");
+}
+
+// Neutral Button styls
+.toggle-button.neutral, .toggle-button-a.neutral a{
+    color: $toggle-button-neutral;
+    border-color: $toggle-button-neutral;
+    padding: 0.5rem 1.2rem 0.5rem 1.2rem;
+}
+.toggle-button.neutral:after, .toggle-button-a.neutral a:after{
+    background-color:$toggle-button-neutral;
+}
+.toggle-button.neutral:disabled, .toggle-button-a.disabled a{
+}
+
+// Mini buttons
+// 
+.toggle-button-container-mini{
+    &.toggle-button-container-mini-full-width{
+
+        border: 1px black solid;
+        width:100%;
+        text-align: center;
+        height:100%;
+
+    }
+    background: transparent;
+    .toggle-button{
+        height:1rem;
+        width:1rem;
+        border:none;
+        background: transparent;
+        &.mini_edit{
+            background-image: url("../assets/icons/edit_circle.svg");
+        }
+        &.mini_add{
+            background-image: url("../assets/icons/add_circle.svg");
+        }
+        &.mini_delete{
+            background-image: url("../assets/icons/delete.svg");
+        }
+        &:disabled, &.disabled a{
+            border:none !important;
+            &.mini_edit{
+                background-image: url("../assets/icons/edit_circle_grey.svg");
+            }
+            &.mini_delete{
+                background-image: url("../assets/icons/delete-grey.svg");
+            }
+        }
+        &.toggle-button-loading{
+            min-width: 1rem;
+        }
+    }
+}
+
+.toggle-feature-button {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    width: 100%;
+    align-items: center;
+    padding: 0.5rem 0.8rem;
+    background-color: $toggle-off-white;
+    border-radius: 9px;
+    box-sizing: border-box;
+    border: 1px solid $toggle-off-white;
+    font-size: $toggle-font-size-large;
+    color: $toggle-input-colour;
+    font-weight: bold;
+    cursor: pointer;
+    &:hover {
+        background-color: $toggle-white;
+    }
+
+    .toggle-feature-button-image {
+        width: 6rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        padding: 0.5rem;
+        background: $toggle-white;
+        grid-column-start: 1;
+        justify-self: flex-start;
+    }
+
+    .toggle-feature-button-label {
+        padding-left: 0.5rem;
+        grid-column-start: 2;
+        justify-self: flex-start;
+    }
+
+    .toggle-feature-button-icon {
+      display: flex;
+      align-items: center;
+      grid-column-start: 3;
+      justify-self: flex-end;
+    }
+
+    img {
+       width: auto;
+       height: 1.5rem;
+    }
+
+}

package/src/sass/includes/_as_elements.scss

@@ -0,0 +1,3 @@
+.toggle-line-break {
+  border-bottom: 1px solid $toggle-blue;
+}

package/src/sass/includes/_as_fonts.scss

@@ -0,0 +1,12 @@
+@import url("https://fonts.googleapis.com/css?family=Lato:300,400,600,700,900");
+@import url("https://use.typekit.net/zrn5nlp.css");
+
+@mixin toggle-global-font-config {
+  color: $toggle-black;
+  font-family: $toggle-font-family;
+  font-size: $toggle-font-size-regular;
+  line-height: 1.4;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight:normal;
+}

package/src/sass/includes/_as_globals.scss

@@ -0,0 +1 @@
+@import "_as_variables";

package/src/sass/includes/_as_gridbuilder.scss

@@ -0,0 +1,136 @@
+.toggle-grid-input-container{
+	width:100%;
+}
+.toggle-grid-input-row{
+	overflow: auto;
+	display: flex;
+	align-items: center;
+	position:relative;
+}
+.toggle-grid-input-row-preview{
+	width: calc(100% - 8rem);
+	display:block;
+	float: left;
+	background: transparent;
+	border-radius:3px;
+	box-sizing:border-box;
+}
+.toggle-grid-input-add-row-button{
+	width:100%;
+	height: 4rem;
+	border-radius: 10px;
+	border: 2px $toggle-button-disabled solid;
+    background-image: url("../assets/icons/add_circle.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1rem;
+    cursor: pointer;
+    outline: none;
+	background-color:transparent;
+    &:hover{
+    	background-color:white;
+    }
+}
+.toggle-grid-input-add-row{
+	width: calc(100% - 9rem);
+	display: block;
+	clear: both;
+	margin-top:1rem;
+	text-align: center;
+	height: 4rem;
+	box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    margin:0.3rem;
+    
+}
+
+.toggle-grid-input-row-column{
+	//cursor: pointer;
+	display:block;
+	float: left;
+	padding:0.6rem;
+	box-sizing:border-box;
+	position:relative;
+	.toggle-grid-input-row-column-content{
+		width:100%;
+	}
+
+	&:after{
+		cursor: pointer;
+		position: absolute;
+		left:1.25rem;
+		z-index:2;
+		top:50%;
+		margin-top:-0.5rem;
+		content: url("../assets/icons/drag_drop.svg");
+		height:1rem;
+		width: 1rem;
+	}
+
+}
+
+.toggle-grid-input-row-remove{
+	width: 3rem;
+	text-align: center;
+	display: block;
+	height: 1rem;
+    line-height: 0rem;
+	
+}
+
+.toggle-grid-input-column-layout-edit{
+	overflow: auto;
+	display: block;
+	position: relative;
+}
+
+.toggle-grid-input-column-layout-input{
+
+	padding: 0.3rem;
+	float: right;
+}
+
+.toggle-grid-input-column-layout-option{
+	margin-top:0.1rem;
+	clear: both;
+	width:5rem;
+	display: block;
+	cursor: pointer;
+
+	input[type="radio"], input[type="checkbox"]{
+        display: none;
+    }
+
+    > input:checked + div{ /* (RADIO CHECKED) */
+        &.toggle-grid-input-column-layout-option-custom-radio {
+			opacity: 1;
+        }
+    }
+
+    .toggle-grid-input-column-layout-option-custom-radio{
+		opacity: 0.5;
+    	&:hover{
+			opacity: 0.75;
+		}
+    }
+
+	.toggle-grid-input-column-layout-option-column{
+		height:0.7rem;
+		display:block;
+		float:left;
+		padding:2px;
+		box-sizing: border-box;
+
+		span{
+			background: $toggle-placeholder-grey;
+			display:block;
+			width:100%;
+			height:100%;
+			border-radius: 3px;
+		}
+	}
+	&.toggle-grid-input-column-layout-option-active{
+		opacity: 1;
+	}
+}