Character Create Modal - Prevent Options From Jumping When Selected (#9252)

* Prevent options from jumping when selected due to border being added/removed based on active option. Instead, always have a border on the option but set its color when active

* Use gray instead of white border in order to match background so that it isn't visible while unselected. Add margin-bottom back

* Make sure the locked option style remains unchanged
- Nest .locked in .customize-options .option to get specificity
- Override border, border-radius, and margin-top for .locked
- Set the override values to what would be applied without other style changes

website/client/components/creatorIntro.vue

@@ -538,12 +538,6 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
     padding-bottom: 2em;
   }
 
-  .option.locked {
-    border-radius: 2px;
-    background-color: #ffffff;
-    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-  }
-
   .option.hide {
     display: none !important;
   }
@@ -554,8 +548,17 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
     padding: .5em;
     height: 90px;
     width: 90px;
-    margin-bottom: .5em;
-    margin-right: .5em;
+    margin: 1em .5em .5em 0;
+    border: 4px solid $gray-700;
+    border-radius: 4px;
+
+    &.locked {
+      border: none;
+      border-radius: 2px;
+      background-color: #ffffff;
+      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+      margin-top: 0;
+    }
 
     .sprite.customize-option {
       margin: 0 auto;
@@ -587,9 +590,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
   }
 
   .option.active {
-    border: 4px solid $purple-200;
-    border-radius: 4px;
-    margin-top: 1em;
+    border-color: $purple-200;
   }
 
   .option:hover {