playbook_ui 13.31.0.pre.alpha.play1262iconstyles3172 → 13.31.0.pre.alpha.play1416movealiaslogic3232

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 40926fc2e7c733b41e34cd183f1e0ba98adf9c136615f73415a64a88bdcd7ef5
-  data.tar.gz: '038a9914dad8b716dbb6bcd3cc9c73ff2c4b5b3f59ee578130903e68e791a5ea'
+  metadata.gz: 290a1034be7cf5e836f3da231ed2896d560d79080809f179a70a46d9c7ddef61
+  data.tar.gz: 35144f9c3c691719fc2374d63279d0fa43b3bc9cfcb8cf84c7d26b0416b351f5
 SHA512:
-  metadata.gz: cad3db04fdc0cd38b2896803be0002f866cf654a0c21e61f21fcf26dda0de2a0819324245f606e2a5b28a1da0f70d8a66a89a6961a5d3c3403557e45dd322130
-  data.tar.gz: 1099544d9ecf11f27874c3939ab83aaf50e9b7f09cae1459eecf06bfea553782f1b98ec0936ef92211ea9ed3822d325aff0259b418d118f6411fb0bfa17e89bd
+  metadata.gz: a7701d8e4f59e871068bc64d7b85bd84a25c5dbedfa9a7cfcbcaa8959fe46e92615cdfaab63cf1c4061ca22bbb2f8265ceb075e5c008fa3e01e6b1185eeff38c
+  data.tar.gz: 15a088787644d2b6eeeef831561819e06d8027f2145541d6a256a1185a6dd1a12f832eae5da700189c6195411242499d4dff03d370be2ef64c53edb572d0c1b9

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -6,9 +6,9 @@
 @import "../tokens/typography";
 
 $pb_button_sizes: (
-  "sm":   0.75rem,
-  "md":   0.875rem,
-  "lg":   1.125rem,
+  "sm":   $font_smaller,
+  "md":   $font_small,
+  "lg":   ($font_large - 2px),
 );
 
 [class*=pb_button_kit]{

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -9,7 +9,7 @@
 
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
-$pb_button_h_padding: 34px;
+$pb_button_h_padding: 28px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
@@ -27,13 +27,14 @@ $pb_button_border_width: 0px;
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
+  letter-spacing: $lspace_loose;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
   border-style: solid;
-  border-radius: $border_rad_light;
+  border-radius: $border_rad_heavy;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -24,7 +24,7 @@ $pb_dark_caption_colors: (
   color: $text_lt_light;
   text-transform: uppercase;
   font-size: $font_size;
-  letter-spacing: $lspace_looser;
+  letter-spacing: $lspace_loosest;
 }
 
 @mixin caption_color($color: $text_lt_light) {

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -28,7 +28,7 @@ exports[`html structure is correct 1`] = `
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <i
-                class="pb_icon_kit far far fa-lg fa-fw fa-fw fa-lg fa-chevron-down"
+                class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
               />
               <span
                 aria-label="chevron-down icon"

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -53,7 +53,7 @@ const adjustAxisStyle = (axis) => {
   /* Change axis label styles */
   axis.labels.style.fontFamily = typography.font_family_base
   axis.labels.style.color = colors.charcoal
-  axis.labels.style.fontWeight = typography.light
+  axis.labels.style.fontWeight = typography.regular
   axis.labels.style.fontSize = typography.font_small
 }
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -33,7 +33,7 @@ const highchartsDarkTheme: ThemeProps = {
     style: {
       color: colors.text_dk_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
+      fontWeight: typography.bold,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -34,7 +34,7 @@ const highchartsTheme: ThemeProps = {
     style: {
       color: colors.text_lt_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
+      fontWeight: typography.bold,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -4,7 +4,10 @@ import { DateYearStacked } from '../../'
 const DateYearStackedDefault = (props) => {
   return (
     <div>
-      <DateYearStacked date={new Date()} />
+      <DateYearStacked
+          date={new Date()}
+          {...props}
+      />
       <DateYearStacked
           align="center"
           date={new Date()}

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -51,7 +51,16 @@ export const DraggableContext = () => {
   return useContext(DragContext);
 };
 
-export const DraggableProvider = ({ children, initialItems, onReorder }: DraggableProviderType) => {
+export const DraggableProvider = ({ 
+  children, 
+  initialItems, 
+  onReorder,
+  onDragStart, 
+  onDragEnter, 
+  onDragEnd, 
+  onDrop, 
+  onDragOver 
+}: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
   useEffect(() => {
@@ -65,6 +74,7 @@ export const DraggableProvider = ({ children, initialItems, onReorder }: Draggab
   const handleDragStart = (id: string, container: string) => {
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
+    if (onDragStart) onDragStart(id, container);
   };
 
   const handleDragEnter = (id: string, container: string) => {
@@ -72,11 +82,13 @@ export const DraggableProvider = ({ children, initialItems, onReorder }: Draggab
       dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
       dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
     }
+    if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+    if (onDragEnd) onDragEnd();
   };
 
   const changeCategory = (itemId: string, container: string) => {
@@ -87,11 +99,13 @@ export const DraggableProvider = ({ children, initialItems, onReorder }: Draggab
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     changeCategory(state.dragData.id, container);
+    if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
+    if (onDragOver) onDragOver(e, container);
   };
 
   const contextValue = useMemo(() => ({

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -23,4 +23,9 @@ export interface ItemType {
       children: React.ReactNode;
       initialItems: ItemType[];
       onReorder: (items: ItemType[]) => void;
+      onDragStart?: (id: string, container: string) => void; 
+      onDragEnter?: (id: string, container: string) => void;
+      onDragEnd?: () => void; 
+      onDrop?: (container: string) => void; 
+      onDragOver?: (e: Event, container: string) => void;
     }

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -1,23 +1,19 @@
 import React, { useState } from "react";
-import { SelectableList, Draggable, DraggableProvider } from "../../";
+import { Flex, Image, Draggable, DraggableProvider } from "../../";
 
 // Initial items to be dragged
 const data = [
   {
-    id: "1",
-    text: "Task 1",
+    id: "21",
+    url: "https://unsplash.it/500/400/?image=633",
   },
   {
-    id: "2",
-    text: "Task 2",
+    id: "22",
+    url: "https://unsplash.it/500/400/?image=634",
   },
   {
-    id: "3",
-    text: "Task 3",
-  },
-  {
-    id: "4",
-    text: "Task 4",
+    id: "23",
+    url: "https://unsplash.it/500/400/?image=637",
   },
 ];
 
@@ -30,20 +26,19 @@ const DraggableDefault = (props) => {
         onReorder={(items) => setInitialState(items)}
     >
         <Draggable.Container {...props}>
-          <SelectableList variant="checkbox">
-            {initialState.map(({ id, text }) => (
+        <Flex>
+            {initialState.map(({ id, url }) => (
               <Draggable.Item dragId={id} 
                   key={id}
               >
-                <SelectableList.Item
-                    label={text} 
-                    name={id} 
-                    value={id} 
-                    {...props}
+                <Image alt={id} 
+                    margin="xs"
+                    size="md" 
+                    url={url} 
                 />
               </Draggable.Item>
             ))}
-          </SelectableList>
+         </Flex>
         </Draggable.Container>
     </DraggableProvider>
     </>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md

@@ -1,4 +1,6 @@
-To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
+The Draggable kit gives you a full subcomponent structure that allows it to be used with almost any kits.
 
-The `Draggable.Container` specifies the container within which items can be dropped.
-The `Draggable.Item` specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.
+`DraggableProvider` = This provider manages all settings that allows drag and drop to function and must be used as the outermost wrapper. It has 2 REQUIRED props: `initialItems` (initial data) and `onReorder` (function that returns mutated data as items are reordered via drag and drop). Devs must manage state as shown.
+ 
+`Draggable.Container` = This specifies the container within which items can be dropped.
+`Draggable.Item` = This specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md

@@ -1,5 +1,9 @@
-For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop. The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the Card kit. 
+For a simplified version of the Draggable API for the Card kit, you can do the following:
+
+Use `DraggableProvider` and manage state as shown.
+
+`Draggable.Container` creates the container within which the cards can be dragged and dropped. 
+
+The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
 
-In addition to the above `dragId` is a REQUIRED prop to be passedd to the Card kit when implementing dragging.
 
-The dev must manage state as shown.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md

@@ -1,7 +1,5 @@
-For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `enableDrag` prop. 
+For a simplified version of the Draggable API for the List kit, you can do the following:
 
-In addition to the above `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
+Use `DraggableProvider` and manage state as shown.
 
-The dev must manage state as shown.
-
-The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md

@@ -1,7 +1,5 @@
-For a simplified version of the Draggable API for the SelectableList kit, use the DraggableProvider to wrap the SelectableList kit and use the `enableDrag` prop. 
+For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
 
-In addition to the above `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
+Use `DraggableProvider` and manage state as shown.
 
-The dev must manage state as shown.
-
-The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the SelectableList kit.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -8,7 +8,9 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
+        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="" />
+        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="" style="display: none" <%= object.required ? "required" : ""%> />
+
         <% if content.present? %>
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :error, type: Playbook::Props::String
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -8,16 +8,22 @@ const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
 const UP_ARROW_SELECTOR = "#dropdown_close_icon";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
+const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
     return DROPDOWN_SELECTOR;
   }
 
+  get target() {
+    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
+  }
+
   connect() {
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.bindEventListeners();
     this.updateArrowDisplay(false);
+    this.handleFormValidation();
   }
 
   bindEventListeners() {
@@ -38,9 +44,13 @@ export default class PbDropdown extends PbEnhancedElement {
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
     const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
       hiddenInput.value = JSON.parse(value).id;
+      inputFormValidation.value = JSON.parse(value).id;
+      this.clearFormValidation(inputFormValidation);
       this.onOptionSelected(value, option);
     }
   }
@@ -103,10 +113,6 @@ export default class PbDropdown extends PbEnhancedElement {
     selectedOption.classList.add("pb_dropdown_option_selected");
   }
 
-  get target() {
-    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
-  }
-
   showElement(elem) {
     elem.classList.remove("close");
     elem.classList.add("open");
@@ -150,4 +156,27 @@ export default class PbDropdown extends PbEnhancedElement {
       upArrow.style.display = isOpen ? "inline-block" : "none";
     }
   }
+
+  handleFormValidation() {
+    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+
+    inputFormValidation.addEventListener("invalid", function (event) {
+      if (inputFormValidation.hasAttribute("required") && inputFormValidation.value === "") {
+        event.preventDefault();
+        inputFormValidation.closest(".dropdown_wrapper").classList.add("error");
+      }
+    }, true);
+  }
+
+  clearFormValidation(input) {
+    if (input.checkValidity()) {
+      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
+      dropdownWrapperElement.classList.remove("error");
+
+      const errorLabelElement = dropdownWrapperElement.querySelector(".pb_body_kit_negative");
+      if (errorLabelElement) {
+        errorLabelElement.remove();
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -13,6 +13,14 @@
   ]
 %>
 
+<% 
+  example_dropdown_options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+%>
+
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
@@ -22,6 +30,7 @@
   <%= form.password_field :example_password_field, props: { label: true, required: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area, props: { label: true, required: true } %>
+  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -55,7 +55,7 @@ $form_pill_colors: (
     height: fit-content;
     height: -moz-fit-content;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: 16px;
+      font-size: $font_base;
       font-weight: $regular;
     }
     .pb_form_pill_text, .pb_form_pill_tag {

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,3 +1,4 @@
+// Rails custom icon styles
 svg.pb_custom_icon {
   width: 1em;
   fill: currentColor;
@@ -9,214 +10,3 @@ svg.pb_custom_icon {
 .pb_icon_kit_emoji {
   font-family: monospace;
 }
-
-$rotate-list: (90, 180, 270);
-$flip-list: (
-"horizontal": (-1, 1),
-"vertical": (1, -1),
-"both": (-1, -1)
-);
-
-@keyframes pb_icon_spin {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-};
-
-svg {
-  &.pb_icon_kit,
-  &.pb_custom_icon{
-    @each $r in $rotate-list {
-      &.rotate_#{$r} {
-        transform: rotate(#{$r}deg);
-      }
-    }
-    @each $f, $v in $flip-list {
-      &.flip_#{$f} {
-        transform: scale($v);
-      }
-    }
-    &.svg-inline--fa {
-      height: 1em;
-      overflow: visible;
-      vertical-align: -.125em
-    }
-    &.svg_inverse {
-      color: #fff;
-    }
-    &.svg_border {
-      border-color: #eee;
-      border-radius: .1em;
-      border-style: solid;
-      border-width: .08em;
-      padding: .2em .25em .15em;
-    }
-    &.svg_fw {
-      text-align: center;
-      width: 1.25em
-    }
-    &.svg_li {
-      left: calc(2em * -1);
-      position: absolute;
-      text-align: center;
-      width: 2em;
-      line-height: inherit
-    }
-    &.pull_left {
-      float: left;
-      margin-right: .3em;
-    }
-
-    &.pull_right {
-      float: right;
-      margin-left: .3em;
-    }
-    &.pulse {
-      animation-name: pb_icon_spin;
-      animation-direction: normal;
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-      animation-timing-function: steps(8);
-    }
-    &.spin {
-      animation-name: pb_icon_spin;
-      animation-delay: 0s;
-      animation-direction: normal;
-      animation-duration: 2s;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-
-    &.svg_xs {
-      font-size: 0.75em
-    }
-
-    &.svg_sm {
-      font-size: 0.875em
-    }
-
-    &.svg_lg {
-      font-size: 1.25em
-    }
-
-    &.svg_1x {
-      font-size: 1em
-    }
-
-    &.svg_2x {
-      font-size: 2em
-    }
-
-    &.svg_3x {
-      font-size: 3em
-    }
-
-    &.svg_4x {
-      font-size: 4em
-    }
-
-    &.svg_5x {
-      font-size: 5em
-    }
-
-    &.svg_6x {
-      font-size: 6em
-    }
-
-    &.svg_7x {
-      font-size: 7em
-    }
-
-    &.svg_8x {
-      font-size: 8em
-    }
-
-    &.svg_9x {
-      font-size: 9em
-    }
-
-    &.svg_10x {
-      font-size: 10em
-    }
-    &.fa-xs {
-      font-size: .75em;
-      line-height: .0833333337em;
-      vertical-align: .125em
-    }
-    &.fa-sm {
-      font-size: .875em;
-      line-height: .0714285718em;
-      vertical-align: .0535714295em
-    }
-    &.fa-lg {
-      font-size: 1.25em;
-      line-height: .05em;
-      vertical-align: -.075em
-    }
-    &.fa-pull-left {
-      float: left;
-      margin-right: .3em;
-    }
-
-    &.fa-pull-right {
-      float: right;
-      margin-left: .3em;
-    }
-    &.fa-li {
-      left: calc(2em * -1);
-      position: absolute;
-      text-align: center;
-      width: 2em;
-      line-height: inherit
-    }
-    &.svg-inline--fa.fa-li {
-      width: 2em;
-      top: .25em
-    }
-    &.svg-inline--fa.fa-fw {
-      width: 1.25em;
-    }
-    &.fa-fw {
-      text-align: center;
-      width: 1.25em
-    }
-    &.fa-layers {
-      display: inline-block;
-      height: 1em;
-      position: relative;
-      text-align: center;
-      vertical-align: -.125em;
-      width: 1em
-    }
-    &.fa-2x {
-      font-size: 2em
-    }
-    &.fa-3x {
-      font-size: 3em
-    }
-    &.fa-flip {
-      animation-name: fa-flip;
-      animation-delay: 0s;
-      animation-direction: normal;
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-      animation-timing-function: ease-in-out;
-    }
-    &.fa-spin {
-      animation-name: fa-spin;
-      animation-delay: 0s;
-      animation-direction: normal;
-      animation-duration: 2s;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-    &.fa-pulse {
-      animation: fa-spin 1s infinite linear;
-    }
-  }
-}