refactored property from settings

sass/ascribe_custom_style.scss

@@ -256,7 +256,7 @@ h1 {
         }
     }
 
-    .ascribe-settings-wrapper {
+    .ascribe-property-wrapper {
         background-color: transparent;
 
         &:hover {
@@ -522,7 +522,7 @@ fieldset[disabled] .btn-secondary.active {
     border-left-color: $ascribe--button-default-color !important;
     background-color: rgba($ascribe--button-default-color, .05);
 }
-.ascribe-settings-wrapper:hover {
+.ascribe-property-wrapper:hover {
     border-left-color: rgba($ascribe--button-default-color, .5);
 }
 

sass/ascribe_settings.scss

@@ -1,158 +1,4 @@
 .settings-container {
     margin: auto;
     max-width: 600px;
-}
-
-
-.ascribe-settings-property {
-    border-top: 1px solid rgba(0, 0, 0, .05);
-    cursor: pointer;
-    display: inline-block;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-    padding-top: 1em;
-    text-align: left;
-    width: 100%;
-
-    > div,
-    > input,
-    > pre,
-    > select,
-    > span:not(.glyphicon),
-    > textarea {
-        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-
-    > span {
-        color: rgba(0, 0, 0, .5);
-        font-size: .9em;
-        font-weight: normal;
-    }
-
-    > div {
-        > div:not(.file-drag-and-drop div) {
-            color: rgba(0, 0, 0, .5);
-            cursor: default;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-            font-size: 1.1em;
-            font-weight: normal;
-            padding-left: 0;
-        }
-    }
-
-    > .progressbar-container, .progressbar-progress {
-        margin-top: 0 !important;
-    }
-
-    > input,
-    > pre,
-    > textarea,
-    > select,
-    .datepicker__input {
-        background-color: rgba(0, 0, 0, 0);
-        border: 0;
-        box-shadow: none;
-        color: rgba(0, 0, 0, .8);
-        font-size: 1.1em;
-        font-weight: 400;
-        margin-top: .5em;
-        padding-left: 0;
-        width: 100%;
-
-        &:focus {
-            border: 0;
-            box-shadow: none;
-            outline: 0;
-        }
-
-        &::selection {
-            background-color: rgba(0, 0, 0, 1);
-            color: white;
-        }
-
-    }
-
-    .datepicker__input {
-        padding: 0;
-    }
-
-    > textarea{
-        color: #666;
-        margin-top: 1em;
-        padding: 0;
-    }
-}
-
-.ascribe-property-footer {
-    font-size: .8em;
-    margin-top: 10px;
-    width: 100%;
-}
-
-.ascribe-settings-property-collapsible-toggle {
-    border-top: 1px solid rgba(0, 0, 0, .05);
-    display: inline-block;
-    padding: .5em 1.5em;
-    text-align: left;
-    width: 100%;
-}
-
-.ascribe-checkbox-wrapper{
-    .checkbox > span {
-        color: black;
-    }
-}
-
-.ascribe-settings-property-collapsible-toggle, .ascribe-checkbox-wrapper {
-    cursor: pointer;
-
-    // Taken from: http://www.htmllion.com/css3-checkbox.html
-    .checkbox {
-        display: inline-block;
-        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        font-size: .9em;
-        font-weight: normal;
-        vertical-align: middle;
-
-        > span {
-            left: 5px;
-            position: relative;
-            top: 1px;
-
-            -khtml-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            -webkit-user-select: none;
-        }
-    }
-
-    [type=checkbox] {
-        display: none;
-    }
-
-    .checkbox:before {
-        background-color: white;
-        border: 1px solid rgba(0, 0, 0, .5);
-        border-radius: 1px;
-        color: #f3f3f3;
-        content: "";
-        display: inline-block;
-        height: 17px;
-        text-align: center;
-        vertical-align: middle;
-        width: 17px;
-    }
-
-    [type=checkbox]:checked + .checkbox:before {
-        color: rgba(2, 182, 163, 1);
-        content: "\2713";
-        font-size: 20px;
-        line-height: .8;
-    }
-}
-
-.ascribe-checkbox-badge {
-    > span > span {
-        margin-top: 0;
-    }
-}
+}

sass/main.scss

@@ -31,6 +31,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'offset_right';
 @import 'ascribe_settings';
 @import 'ascribe_slides_container';
+@import 'ascribe_property';
 @import 'ascribe_form';
 @import 'ascribe_panel';
 @import 'ascribe_collapsible';

sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss

@@ -142,7 +142,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
         }
     }
 
-    .ascribe-settings-wrapper {
+    .ascribe-property-wrapper {
         background-color: transparent;
 
         &:hover {
@@ -403,7 +403,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
         border-left-color: $ikono--button-color !important;
         background-color: rgba($ikono--button-color, .05);
     }
-    .ascribe-settings-wrapper:hover {
+    .ascribe-property-wrapper:hover {
         border-left-color: rgba($ikono--button-color, .5);
     }
 }