diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLink/styles.scss b/packages/strapi-admin/admin/src/components/LeftMenuLink/styles.scss index 02551c20af..061bd21ed5 100644 --- a/packages/strapi-admin/admin/src/components/LeftMenuLink/styles.scss +++ b/packages/strapi-admin/admin/src/components/LeftMenuLink/styles.scss @@ -1,5 +1,5 @@ // Import -@import "../../styles/variables/variables"; +@import '../../styles/variables/variables'; .item { position: relative; @@ -12,13 +12,14 @@ .plugin { cursor: pointer; position: absolute; - top: 10px; left: calc(100% - 4px); + top: 10px; + left: calc(100% - 4px); display: inline-block; width: auto; height: 20px; transition: right 1s ease-in-out; - span{ + span { display: inline-block; overflow: hidden; width: auto; @@ -29,10 +30,10 @@ line-height: 20px; background: #0097f7; border-radius: 3px; - transition: transform .3s ease-in-out; + transition: transform 0.3s ease-in-out; white-space: pre; - &:hover{ + &:hover { transform: translateX(calc(-100% + 9px)); } } @@ -40,7 +41,8 @@ } .link { - padding-top: .9rem; + position: relative; + padding-top: 0.8rem; padding-bottom: 0.2rem; padding-left: 1.6rem; min-height: 3.6rem; @@ -66,6 +68,15 @@ &:visited { color: $left-menu-link-color; } + span { + display: inline-block; + width: 100%; + padding-right: 1rem; + padding-left: 2.6rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } .linkActive { @@ -74,7 +85,9 @@ } .linkIcon { - position: relative; + position: absolute; + top: calc(50% - 0.9rem + 0.6rem); + left: 1.6rem; margin-right: 1.2rem; font-size: 1.2rem; width: 1.4rem; @@ -85,5 +98,7 @@ .linkLabel { display: inline-block; + width: 100%; padding-right: 1rem; + padding-left: 2.6rem; } diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeader/StyledPluginHeader.js b/packages/strapi-helper-plugin/lib/src/components/PluginHeader/StyledPluginHeader.js new file mode 100644 index 0000000000..88a5cf4926 --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeader/StyledPluginHeader.js @@ -0,0 +1,16 @@ +/** + * + * StyledPluginHeader + * + */ + +import styled from 'styled-components'; + +const StyledPluginHeader = styled.div` + margin-bottom: 30px; + .justify-content-end { + display: flex; + } +`; + +export default StyledPluginHeader; diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeader/index.js b/packages/strapi-helper-plugin/lib/src/components/PluginHeader/index.js index f696b18d63..537aacc8ee 100644 --- a/packages/strapi-helper-plugin/lib/src/components/PluginHeader/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeader/index.js @@ -6,12 +6,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import cn from 'classnames'; import PluginHeaderTitle from '../PluginHeaderTitle'; import PluginHeaderActions from '../PluginHeaderActions'; -import styles from './styles.scss'; +import StyledPluginHeader from './StyledPluginHeader'; function PluginHeader({ actions, @@ -25,27 +24,27 @@ function PluginHeader({ withDescriptionAnim, }) { return ( -
-
- + +
+
+ +
+
+ + +
-
- -
-
- -
-
+ ); } diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeader/styles.scss b/packages/strapi-helper-plugin/lib/src/components/PluginHeader/styles.scss deleted file mode 100644 index a1259bd571..0000000000 --- a/packages/strapi-helper-plugin/lib/src/components/PluginHeader/styles.scss +++ /dev/null @@ -1,3 +0,0 @@ -.pluginHeader { - margin-bottom: 30px; -} diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/StyledPluginHeaderActions.js b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/StyledPluginHeaderActions.js new file mode 100644 index 0000000000..f91d8f0756 --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/StyledPluginHeaderActions.js @@ -0,0 +1,26 @@ +/** + * + * StyledPluginHeaderActions + * + */ + +import styled from 'styled-components'; + +const StyledPluginHeaderActions = styled.div` + display: flex; + justify-content: flex-end; + width: fit-content; + max-width: 100%; + padding-top: 0.9rem; + button { + margin-right: 0; + margin-left: 1.8rem; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: center; + } +`; + +export default StyledPluginHeaderActions; diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js index 544638b577..e494c65509 100644 --- a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js @@ -10,26 +10,20 @@ import { isArray, isFunction } from 'lodash'; import Button from '../Button'; -import styles from './styles.scss'; +import StyledPluginHeaderActions from './StyledPluginHeaderActions'; function PluginHeaderActions({ actions, overrideRendering }) { let content = ''; if (isArray(actions)) { - content = actions.map(action => ( -