RubyGems - playbook_ui - Versions diffs - 11.19.0 → 11.20.0.pre.alpha.focus1 - Mend

playbook_ui 11.19.0 → 11.20.0.pre.alpha.focus1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb389dc6dd09b729a058710f9dbaffccf1c70f4994dabad0e8c877fdfb15160a
-  data.tar.gz: 5f8d2f82abeccdb16d5a8e0896db8c9c701b524f1fdfd86ac0cdb3e296dc5b16
+  metadata.gz: dd5b6e17a1e5ff8a0149e8d809b67ebd4c1bd6ade257db72ed9fe4716c7f0488
+  data.tar.gz: 4f6b2edf940d88f2113516a34e7288c18e68bde88cb367a49e3407c8e5d506a9
 SHA512:
-  metadata.gz: 4ef7df4f5c65d61d144d0b552b11c7205451cb77d50dff97c181af2175de03374ee98d18505c0765b219b217caef55f5714425585a27f7d0d2597efa50a1af21
-  data.tar.gz: '0068b2d612e89e7932399e089b1478faac10bd3a710e29ef4f555b6e57060236ff0a4f346c15ae61bd08e2a925b136174901803b55a066d1c1d6397b1379f1ee'
+  metadata.gz: 7400acc711d9fa10b999850ed8c02282b3e6f9dcee98745dec7df79bdb7e57842d3751cae96b9d248ac08bf807daa035af6b429b3ea93c4d7157f6bf0e156392
+  data.tar.gz: f54bc46b74b4f15ad295303b73413b8f2e7e17adc078420b2b21970f470770ee2dcdc9203d58fec00fb28e826f8e7f0a4065c28f8e798efd60d3d582250e7e7e

data/app/pb_kits/playbook/pb_body/_body.scss CHANGED Viewed

@@ -1,4 +1,5 @@
 @import "./body_mixins";
+@import "../tokens/titles";
 [class^=pb_body_kit]{
   @include pb_body($text_lt_default);
@@ -12,13 +13,21 @@
       }
     }
   }
   @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
     &[class*=_#{$dark_color_name}][class*=dark]{
       @include pb_body($dark_color_value);
     }
   }
+  b, strong {
+    @include pb_title_4
+  }
+  a {
+    color: $primary;
+    &:hover {
+      color: $text_lt_default;
+    }
+  }
   @each $status_name, $status_value in $pb_body_status {
     &[class*=#{$status_name}] {
       @include pb_body($status_value);

data/app/pb_kits/playbook/pb_body/docs/_body_styled.html.erb ADDED Viewed

@@ -0,0 +1,9 @@
+<%= pb_rails("body") do %>
+    <b>This text is using the <%="<b>"%> tag</b>
+    <br />
+    <br />
+    <strong>This text is using the <%="<strong>"%> tag</strong>
+    <br />
+    <br />
+    <a href="#">This text is using the <%="<a>"%> tag</a>
+<% end %>

data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx ADDED Viewed

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Body } from '../..'
+const BodyStyled = (props) => {
+  return (
+    <div>
+      <Body {...props}>
+        <b>{"This text is using the <b> tag"}</b>
+        <br />
+        <br />
+        <strong>{"This text is using the <strong> tag"}</strong>
+        <br />
+        <br />
+        <a href="#">{"This text is using the <a> tag"}</a>
+      </Body>
+    </div>
+  )
+}
+export default BodyStyled

data/app/pb_kits/playbook/pb_body/docs/_body_styled.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Playbook styles the `b`, `strong` and `a` tags within the body kit to match Playbook's design system.

data/app/pb_kits/playbook/pb_body/docs/example.yml CHANGED Viewed

@@ -2,6 +2,8 @@ examples:
   rails:
   - body_light: Default
   - body_block: Block
+  - body_styled: Styled b/strong/a tags
   react:
   - body_light: Default
   - body_block: Block
+  - body_styled: Styled b/strong/a tags

data/app/pb_kits/playbook/pb_body/docs/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
 export { default as BodyLight } from './_body_light.jsx'
 export { default as BodyBlock } from './_body_block.jsx'
+export { default as BodyStyled } from './_body_styled.jsx'

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

@@ -29,11 +29,6 @@ $pb_button_sizes: (
   }
   &[class*=_link]  {
     @include pb_button_link;
-    @media (hover:hover) {
-      &:hover {
-        color: $text_lt_default;
-      }
-    }
   }
   // Disabled =================

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

@@ -5,6 +5,7 @@
 @import "../tokens/spacing";
 @import "../tokens/transition";
 @import "../tokens/typography";
+@import "../tokens/accessibility";
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
@@ -62,11 +63,12 @@ $pb_button_border_width: 0px;
     margin-left: $space_xs;
   }
-  &:hover, &:focus {
+  &:hover {
     outline: none;
   }
+  @include focus;
   &:active {
     outline: none;
     border-width: $pb_button_border_width;
@@ -86,6 +88,10 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover;
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant($primary_action);
+    }
   }
 }
@@ -97,6 +103,10 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover(rgba($primary_action, $opacity_3));
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
+    }
   }
 }
@@ -107,6 +117,11 @@ $pb_button_border_width: 0px;
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
+      color: $text_lt_default;
+    }
+    &:active {
+      transition: none;
+      @include pb_button_variant($transparent, $primary_action);
     }
   }
 }
@@ -116,6 +131,9 @@ $pb_button_border_width: 0px;
   $disabled_color: rgba($charcoal, $opacity_5);
   @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
   pointer-events: none;
+  &:focus {
+    outline: none;
+  }
 }
 // Block =======================
@@ -145,6 +163,10 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant($primary_action);
+    }
   }
 }
@@ -156,6 +178,10 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover(rgba($primary_action, $opacity_2));
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant(rgba($white, 0.2), $white);
+    }
   }
 }
@@ -166,6 +192,11 @@ $pb_button_border_width: 0px;
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
+      color: rgba($white, $opacity_6)
+    }
+    &:active {
+      transition: none;
+      @include pb_button_variant($transparent, $white);
     }
   }
 }

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb CHANGED Viewed

@@ -1,2 +1,2 @@
-<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left" }) %>
-<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right" }) %>
+<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx CHANGED Viewed

@@ -6,6 +6,7 @@ const ButtonIconOptions = (props) => (
       <Button
           fixedWidth
           icon='plus'
+          marginRight='lg'
           text="Icon on Left"
           {...props}
       />
@@ -14,6 +15,7 @@ const ButtonIconOptions = (props) => (
           fixedWidth
           icon='chevron-right'
           iconRight
+          marginRight='lg'
           text="Icon on Right"
           {...props}
       />

data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb CHANGED Viewed

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com",margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com",margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx CHANGED Viewed

@@ -6,6 +6,7 @@ const ButtonLink = (props) => (
     <Button
         aria={{ label: 'Link to Google' }}
         link="https://google.com"
+        marginRight='lg'
         text="A Tag Button"
         {...props}
     />
@@ -13,6 +14,7 @@ const ButtonLink = (props) => (
     <Button
         aria={{ label: 'Link to Google in new window' }}
         link="https://google.com"
+        marginRight='lg'
         newWindow
         text="Open in New Window"
         {...props}
@@ -22,6 +24,7 @@ const ButtonLink = (props) => (
         aria={{ label: 'Disabled link to Google' }}
         disabled
         link="https://google.com"
+        marginRight='lg'
         text="A Tag Button Disabled"
         {...props}
     />

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb CHANGED Viewed

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx CHANGED Viewed

@@ -6,6 +6,7 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
+        marginRight='lg'
         text="Button Primary"
         {...props}
     />
@@ -13,6 +14,7 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
+        marginRight='lg'
         text="Button Secondary"
         variant="secondary"
         {...props}
@@ -21,6 +23,7 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
+        marginRight='lg'
         text="A Tag Button Disabled"
         variant="link"
         {...props}

data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb CHANGED Viewed

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %>
-<%= pb_rails("button", props: { text: "Button md size", size: "md" }) %>
-<%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button sm size", size: "sm", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button md size", size: "md", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button lg size", size: "lg", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx CHANGED Viewed

@@ -4,18 +4,21 @@ import { Button } from '../../'
 const ButtonSize = (props) => (
   <div>
     <Button
+        marginRight='lg'
         size="sm"
         text="Button sm size"
         {...props}
     />
     {' '}
     <Button
+        marginRight='lg'
         size="md"
         text="Button md size"
         {...props}
     />
     {' '}
     <Button
+        marginRight='lg'
         size="lg"
         text="Button lg size"
         {...props}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx CHANGED Viewed

@@ -8,18 +8,18 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 type CheckboxProps = {
   aria?: {[key: string]: string},
   checked?: boolean,
-  children: Node,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
   id?: string,
   indeterminate?: boolean,
-  name: string,
-  onChange: (event: React.FormEvent<HTMLInputElement>) => void,
-  tabIndex: number,
-  text: string,
-  value: string,
+  name?: string,
+  onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
+  tabIndex?: number,
+  text?: string,
+  value?: string,
 } & GlobalProps
 const Checkbox = (props: CheckboxProps): JSX.Element => {
@@ -34,7 +34,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
     id,
     indeterminate = false,
     name = '',
-    onChange = () => {},
+    onChange = () => { void 0 },
     tabIndex,
     text = '',
     value = '',

data/app/pb_kits/playbook/pb_dialog/_dialog.scss CHANGED Viewed

@@ -9,7 +9,7 @@
 // Dialog Animations
+// Dialog Animations for fading in and out from the center
 @keyframes modalFadeIn {
 	from {
 		transform: translate3d(0, -100%, 0);
@@ -32,6 +32,53 @@
 	}
 }
+// Dialog Animations for fading in and out from the left side
+@keyframes modalFadeInLeft {
+	from {
+		transform: translate3d(-100%, 0, 0);
+		opacity: 0;
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+@keyframes modalFadeOutLeft {
+	from {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	to {
+		transform: translate3d(-50%, 0, 0);
+		opacity: 0;
+	}
+}
+// Dialog Animations for fading in and out from the right side
+@keyframes modalFadeInRight {
+	from {
+		transform: translate3d(100%, 0, 0);
+		opacity: 0;
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+@keyframes modalFadeOutRight {
+	from {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	to {
+		transform: translate3d(50%, 0, 0);
+		opacity: 0;
+	}
+}
 @keyframes overlayFade {
 	from {
 		opacity: 0;
@@ -63,7 +110,7 @@
 	$medium: 500px;
 	$large: 800px;
 	$xlarge: 1150px;
-	$animation-duration: 0.2s;
+	$animation-duration: .2s;
 	$z-index: 100;
 	$opacity_visible: 1;
 	$opacity_hidden: 0;
@@ -87,6 +134,24 @@
 	outline: none;
 	animation-timing-function: $easeInOutQuint;
+	&[class*="_left"] {
+		animation-name: modalFadeInLeft;
+		&[class*="_before_close"] {
+			animation-name: modalFadeOutLeft;
+			animation-duration: $animation-duration;
+			opacity: $opacity_hidden;
+		}
+	}
+	&[class*="_right"] {
+		animation-name: modalFadeInRight;
+		&[class*="_before_close"] {
+			animation-name: modalFadeOutRight;
+			animation-duration: $animation-duration;
+			opacity: $opacity_hidden;
+		}
+	}
 	&[class*="_status_size"] {
 		width: $status_size;
 	}
@@ -98,6 +163,7 @@
 	&[class*="_md"] {
 		width: $medium;
 	}
 	&[class*="_lg"] {
 		width: $large;
@@ -111,7 +177,7 @@
 		opacity: $opacity_visible;
 	}
-	&_before_close {
+	&[class*="_before_close"] {
 		animation-name: modalFadeOut;
 		animation-duration: $animation-duration;
 		opacity: $opacity_hidden;

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx CHANGED Viewed

@@ -71,7 +71,7 @@ const Dialog = (props: DialogProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const dialogClassNames = {
-    base: classnames("pb_dialog", buildCss("pb_dialog", size)),
+    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
     afterOpen: "pb_dialog_after_open",
     beforeClose: "pb_dialog_before_close",
   };

data/app/pb_kits/playbook/pb_dialog/dialog.rb CHANGED Viewed

@@ -20,7 +20,7 @@ module Playbook
                     default: ""
       def classname
-        generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
+        generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")
       end
       def full_height_style

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx CHANGED Viewed

@@ -25,6 +25,7 @@ function DialogTest({ props }) {
           onClose={close}
           onConfirm={() => setIsLoading(!isLoading)}
           opened={isOpen}
+          placement="right"
           portalClassName="portal"
           size={size}
           text={text}
@@ -98,3 +99,14 @@ test("renders the buttons", async () => {
   cleanup()
 });
+test("renders the right placement dialog", async () => {
+  const { queryByText } = render(<DialogTest />);
+  fireEvent.click(queryByText('Open Dialog'));
+  await waitFor(() => expect(queryByText("Header Title is the Title Prop")));
+  cleanup()
+});

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx CHANGED Viewed

@@ -12,6 +12,7 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: string[],
   className?: string,
+  customMessage?: string,
   data?: {[key: string]: string | number},
   acceptedFilesDescription?: string,
   maxSize?: number,
@@ -28,6 +29,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     accept = null,
     acceptedFilesDescription = '',
     className,
+    customMessage,
     data = {},
     maxSize,
     onFilesAccepted = noop,
@@ -77,10 +79,9 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const getDescription = () => {
-    let msg = ""
-    accept === null ? msg += 'Choose a file or drag it here.' : msg += `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`
-    if (maxSize) msg += ` ${maxFileSizeText}`
-    return msg
+    return customMessage
+      ? customMessage
+      : `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
   }
   return (

data/app/pb_kits/playbook/pb_file_upload/docs/_description.md CHANGED Viewed

@@ -1,8 +1,7 @@
-This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
+This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
 ### Props
 `accept: [String]` Use this prop to set the list of valid file types
+`customMessage: [String]` Use this prop to set a custom message, replacing the default text
 `onFilesAccepted: Function` The callback function, providing the list of dropped files

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx ADDED Viewed

@@ -0,0 +1,40 @@
+/* @flow */
+import React, { useState } from 'react'
+import {
+  FileUpload,
+  List,
+  ListItem,
+} from '../..'
+const AcceptedFilesList = ({ files }: FileList) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}>{file.name}</ListItem>
+    ))}
+  </List>
+)
+const FileUploadCustomMessage = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+  return (
+    <div>
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
+      <FileUpload
+          customMessage="Playbook is awesome!"
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  )
+}
+export default FileUploadCustomMessage

data/app/pb_kits/playbook/pb_file_upload/docs/example.yml CHANGED Viewed

@@ -1,10 +1,10 @@
 examples:
   rails:
   react:
   - file_upload_default: Default List of files to upload
   - file_upload_accept: Accept only certain types of files
+  - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit

data/app/pb_kits/playbook/pb_file_upload/docs/index.js CHANGED Viewed

@@ -1,4 +1,5 @@
 export { default as FileUploadDefault } from './_file_upload_default.jsx'
 export { default as FileUploadAccept } from './_file_upload_accept.jsx'
+export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js CHANGED Viewed

@@ -38,3 +38,15 @@ test('displays max file size text', () => {
   const kit = screen.getByTestId(testid)
   expect(kit).toHaveTextContent('Choose a file or drag it here. Max file size is 1 MB.')
 })
+test('displays custom message', () => {
+  render(
+    <FileUpload
+        customMessage={'Hello world!'}
+        data={{ testid: testid }}
+    />
+  )
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveTextContent('Hello world!')
+})

data/app/pb_kits/playbook/pb_radio/_radio.tsx CHANGED Viewed

@@ -10,16 +10,16 @@ type RadioProps = {
   aria?: {[key: string]: string},
   alignment?: string,
   checked?: boolean,
-  children?: Node,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
   id?: string,
   label: string,
-  name: string,
-  value: string,
-  text: string,
+  name?: string,
+  value?: string,
+  text?: string,
   onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
 } & GlobalProps

data/app/pb_kits/playbook/pb_select/_select.scss CHANGED Viewed

@@ -50,7 +50,7 @@
         border-color: $error;
       }
       .pb_select_kit_caret {
-        top: 35%;
+        top: 25px;
       }
     }
   }