@wordpress/edit-site 3.0.9 → 3.0.10

package/src/style.scss

@@ -5,14 +5,18 @@
 @import "./components/header/style.scss";
 @import "./components/header/document-actions/style.scss";
 @import "./components/header/more-menu/style.scss";
-@import "./components/header/navigation-link/style.scss";
+@import "./components/navigation-sidebar/navigation-toggle/style.scss";
+@import "./components/navigation-sidebar/navigation-panel/style.scss";
+@import "./components/list/style.scss";
+@import "./components/add-new-template/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
 @import "./components/sidebar/template-card/style.scss";
 @import "./components/editor/style.scss";
 @import "./components/template-details/style.scss";
-@import "./components/template-part-converter/style.scss";
+@import "./components/create-template-part-modal/style.scss";
 @import "./components/secondary-sidebar/style.scss";
+@import "./components/welcome-guide/style.scss";
 
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
@@ -37,15 +41,14 @@ body.site-editor-php {
 	@include break-small {
 		bottom: 0;
 		left: 0;
-		min-height: calc(100vh - #{$admin-bar-height-big});
+		min-height: 100vh;
 		position: absolute;
 		right: 0;
 		top: 0;
 	}
 
-	// The WP header height changes at this breakpoint.
-	@include break-medium {
-		min-height: calc(100vh - #{$admin-bar-height});
+	.interface-interface-skeleton {
+		top: 0;
 	}
 
 	// Todo: Remove this rule when edit site gets support

package/src/utils/is-template-removable.js

@@ -0,0 +1,13 @@
+/**
+ * Check if a template is removable.
+ *
+ * @param {Object} template The template entity to check.
+ * @return {boolean} Whether the template is revertable.
+ */
+export default function isTemplateRemovable( template ) {
+	if ( ! template ) {
+		return false;
+	}
+
+	return template.source === 'custom' && ! template.has_theme_file;
+}

package/build/components/header/navigation-link/index.js

@@ -1,87 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _data = require("@wordpress/data");
-
-var _components = require("@wordpress/components");
-
-var _i18n = require("@wordpress/i18n");
-
-var _icons = require("@wordpress/icons");
-
-var _coreData = require("@wordpress/core-data");
-
-var _compose = require("@wordpress/compose");
-
-/**
- * WordPress dependencies
- */
-function NavigationLink(_ref) {
-  let {
-    icon
-  } = _ref;
-  const {
-    isRequestingSiteIcon,
-    siteIconUrl
-  } = (0, _data.useSelect)(select => {
-    const {
-      getEntityRecord,
-      isResolving
-    } = select(_coreData.store);
-    const siteData = getEntityRecord('root', '__unstableBase', undefined) || {};
-    return {
-      isRequestingSiteIcon: isResolving('core', 'getEntityRecord', ['root', '__unstableBase', undefined]),
-      siteIconUrl: siteData.site_icon_url
-    };
-  }, []);
-  const disableMotion = (0, _compose.useReducedMotion)();
-  let buttonIcon = (0, _element.createElement)(_components.Icon, {
-    size: "36px",
-    icon: _icons.wordpress
-  });
-  const effect = {
-    expand: {
-      scale: 1.7,
-      borderRadius: 0,
-      transition: {
-        type: 'tween',
-        duration: '0.2'
-      }
-    }
-  };
-
-  if (siteIconUrl) {
-    buttonIcon = (0, _element.createElement)(_components.__unstableMotion.img, {
-      variants: !disableMotion && effect,
-      alt: (0, _i18n.__)('Site Icon'),
-      className: "edit-site-navigation-link__site-icon",
-      src: siteIconUrl
-    });
-  } else if (isRequestingSiteIcon) {
-    buttonIcon = null;
-  } else if (icon) {
-    buttonIcon = (0, _element.createElement)(_components.Icon, {
-      size: "36px",
-      icon: icon
-    });
-  }
-
-  return (0, _element.createElement)(_components.__unstableMotion.div, {
-    className: "edit-site-navigation-link",
-    whileHover: "expand"
-  }, (0, _element.createElement)(_components.Button, {
-    className: "edit-site-navigation-link__button has-icon",
-    label: (0, _i18n.__)('Dashboard'),
-    href: "index.php"
-  }, buttonIcon));
-}
-
-var _default = NavigationLink;
-exports.default = _default;
-//# sourceMappingURL=index.js.map

package/build/components/header/navigation-link/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/header/navigation-link/index.js"],"names":["NavigationLink","icon","isRequestingSiteIcon","siteIconUrl","select","getEntityRecord","isResolving","coreDataStore","siteData","undefined","site_icon_url","disableMotion","buttonIcon","wordpress","effect","expand","scale","borderRadius","transition","type","duration"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAZA;AACA;AACA;AAYA,SAASA,cAAT,OAAoC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACnC,QAAM;AAAEC,IAAAA,oBAAF;AAAwBC,IAAAA;AAAxB,MAAwC,qBAAaC,MAAF,IAAc;AACtE,UAAM;AAAEC,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAmCF,MAAM,CAAEG,eAAF,CAA/C;AACA,UAAMC,QAAQ,GACbH,eAAe,CAAE,MAAF,EAAU,gBAAV,EAA4BI,SAA5B,CAAf,IAA0D,EAD3D;AAGA,WAAO;AACNP,MAAAA,oBAAoB,EAAEI,WAAW,CAAE,MAAF,EAAU,iBAAV,EAA6B,CAC7D,MAD6D,EAE7D,gBAF6D,EAG7DG,SAH6D,CAA7B,CAD3B;AAMNN,MAAAA,WAAW,EAAEK,QAAQ,CAACE;AANhB,KAAP;AAQA,GAb6C,EAa3C,EAb2C,CAA9C;AAeA,QAAMC,aAAa,GAAG,gCAAtB;AAEA,MAAIC,UAAU,GAAG,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,IAAI,EAAGC;AAAzB,IAAjB;AAEA,QAAMC,MAAM,GAAG;AACdC,IAAAA,MAAM,EAAE;AACPC,MAAAA,KAAK,EAAE,GADA;AAEPC,MAAAA,YAAY,EAAE,CAFP;AAGPC,MAAAA,UAAU,EAAE;AAAEC,QAAAA,IAAI,EAAE,OAAR;AAAiBC,QAAAA,QAAQ,EAAE;AAA3B;AAHL;AADM,GAAf;;AAQA,MAAKjB,WAAL,EAAmB;AAClBS,IAAAA,UAAU,GACT,4BAAC,4BAAD,CAAQ,GAAR;AACC,MAAA,QAAQ,EAAG,CAAED,aAAF,IAAmBG,MAD/B;AAEC,MAAA,GAAG,EAAG,cAAI,WAAJ,CAFP;AAGC,MAAA,SAAS,EAAC,sCAHX;AAIC,MAAA,GAAG,EAAGX;AAJP,MADD;AAQA,GATD,MASO,IAAKD,oBAAL,EAA4B;AAClCU,IAAAA,UAAU,GAAG,IAAb;AACA,GAFM,MAEA,IAAKX,IAAL,EAAY;AAClBW,IAAAA,UAAU,GAAG,4BAAC,gBAAD;AAAM,MAAA,IAAI,EAAC,MAAX;AAAkB,MAAA,IAAI,EAAGX;AAAzB,MAAb;AACA;;AAED,SACC,4BAAC,4BAAD,CAAQ,GAAR;AAAY,IAAA,SAAS,EAAC,2BAAtB;AAAkD,IAAA,UAAU,EAAC;AAA7D,KACC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,KAAK,EAAG,cAAI,WAAJ,CAFT;AAGC,IAAA,IAAI,EAAC;AAHN,KAKGW,UALH,CADD,CADD;AAWA;;eAEcZ,c","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tButton,\n\tIcon,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { wordpress } from '@wordpress/icons';\nimport { store as coreDataStore } from '@wordpress/core-data';\nimport { useReducedMotion } from '@wordpress/compose';\n\nfunction NavigationLink( { icon } ) {\n\tconst { isRequestingSiteIcon, siteIconUrl } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, isResolving } = select( coreDataStore );\n\t\tconst siteData =\n\t\t\tgetEntityRecord( 'root', '__unstableBase', undefined ) || {};\n\n\t\treturn {\n\t\t\tisRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [\n\t\t\t\t'root',\n\t\t\t\t'__unstableBase',\n\t\t\t\tundefined,\n\t\t\t] ),\n\t\t\tsiteIconUrl: siteData.site_icon_url,\n\t\t};\n\t}, [] );\n\n\tconst disableMotion = useReducedMotion();\n\n\tlet buttonIcon = <Icon size=\"36px\" icon={ wordpress } />;\n\n\tconst effect = {\n\t\texpand: {\n\t\t\tscale: 1.7,\n\t\t\tborderRadius: 0,\n\t\t\ttransition: { type: 'tween', duration: '0.2' },\n\t\t},\n\t};\n\n\tif ( siteIconUrl ) {\n\t\tbuttonIcon = (\n\t\t\t<motion.img\n\t\t\t\tvariants={ ! disableMotion && effect }\n\t\t\t\talt={ __( 'Site Icon' ) }\n\t\t\t\tclassName=\"edit-site-navigation-link__site-icon\"\n\t\t\t\tsrc={ siteIconUrl }\n\t\t\t/>\n\t\t);\n\t} else if ( isRequestingSiteIcon ) {\n\t\tbuttonIcon = null;\n\t} else if ( icon ) {\n\t\tbuttonIcon = <Icon size=\"36px\" icon={ icon } />;\n\t}\n\n\treturn (\n\t\t<motion.div className=\"edit-site-navigation-link\" whileHover=\"expand\">\n\t\t\t<Button\n\t\t\t\tclassName=\"edit-site-navigation-link__button has-icon\"\n\t\t\t\tlabel={ __( 'Dashboard' ) }\n\t\t\t\thref=\"index.php\"\n\t\t\t>\n\t\t\t\t{ buttonIcon }\n\t\t\t</Button>\n\t\t</motion.div>\n\t);\n}\n\nexport default NavigationLink;\n"]}

package/build-module/components/header/navigation-link/index.js

@@ -1,74 +0,0 @@
-import { createElement } from "@wordpress/element";
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { Button, Icon, __unstableMotion as motion } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { wordpress } from '@wordpress/icons';
-import { store as coreDataStore } from '@wordpress/core-data';
-import { useReducedMotion } from '@wordpress/compose';
-
-function NavigationLink(_ref) {
-  let {
-    icon
-  } = _ref;
-  const {
-    isRequestingSiteIcon,
-    siteIconUrl
-  } = useSelect(select => {
-    const {
-      getEntityRecord,
-      isResolving
-    } = select(coreDataStore);
-    const siteData = getEntityRecord('root', '__unstableBase', undefined) || {};
-    return {
-      isRequestingSiteIcon: isResolving('core', 'getEntityRecord', ['root', '__unstableBase', undefined]),
-      siteIconUrl: siteData.site_icon_url
-    };
-  }, []);
-  const disableMotion = useReducedMotion();
-  let buttonIcon = createElement(Icon, {
-    size: "36px",
-    icon: wordpress
-  });
-  const effect = {
-    expand: {
-      scale: 1.7,
-      borderRadius: 0,
-      transition: {
-        type: 'tween',
-        duration: '0.2'
-      }
-    }
-  };
-
-  if (siteIconUrl) {
-    buttonIcon = createElement(motion.img, {
-      variants: !disableMotion && effect,
-      alt: __('Site Icon'),
-      className: "edit-site-navigation-link__site-icon",
-      src: siteIconUrl
-    });
-  } else if (isRequestingSiteIcon) {
-    buttonIcon = null;
-  } else if (icon) {
-    buttonIcon = createElement(Icon, {
-      size: "36px",
-      icon: icon
-    });
-  }
-
-  return createElement(motion.div, {
-    className: "edit-site-navigation-link",
-    whileHover: "expand"
-  }, createElement(Button, {
-    className: "edit-site-navigation-link__button has-icon",
-    label: __('Dashboard'),
-    href: "index.php"
-  }, buttonIcon));
-}
-
-export default NavigationLink;
-//# sourceMappingURL=index.js.map

package/build-module/components/header/navigation-link/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/header/navigation-link/index.js"],"names":["useSelect","Button","Icon","__unstableMotion","motion","__","wordpress","store","coreDataStore","useReducedMotion","NavigationLink","icon","isRequestingSiteIcon","siteIconUrl","select","getEntityRecord","isResolving","siteData","undefined","site_icon_url","disableMotion","buttonIcon","effect","expand","scale","borderRadius","transition","type","duration"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SACCC,MADD,EAECC,IAFD,EAGCC,gBAAgB,IAAIC,MAHrB,QAIO,uBAJP;AAKA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,sBAAvC;AACA,SAASC,gBAAT,QAAiC,oBAAjC;;AAEA,SAASC,cAAT,OAAoC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACnC,QAAM;AAAEC,IAAAA,oBAAF;AAAwBC,IAAAA;AAAxB,MAAwCb,SAAS,CAAIc,MAAF,IAAc;AACtE,UAAM;AAAEC,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAmCF,MAAM,CAAEN,aAAF,CAA/C;AACA,UAAMS,QAAQ,GACbF,eAAe,CAAE,MAAF,EAAU,gBAAV,EAA4BG,SAA5B,CAAf,IAA0D,EAD3D;AAGA,WAAO;AACNN,MAAAA,oBAAoB,EAAEI,WAAW,CAAE,MAAF,EAAU,iBAAV,EAA6B,CAC7D,MAD6D,EAE7D,gBAF6D,EAG7DE,SAH6D,CAA7B,CAD3B;AAMNL,MAAAA,WAAW,EAAEI,QAAQ,CAACE;AANhB,KAAP;AAQA,GAbsD,EAapD,EAboD,CAAvD;AAeA,QAAMC,aAAa,GAAGX,gBAAgB,EAAtC;AAEA,MAAIY,UAAU,GAAG,cAAC,IAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,IAAI,EAAGf;AAAzB,IAAjB;AAEA,QAAMgB,MAAM,GAAG;AACdC,IAAAA,MAAM,EAAE;AACPC,MAAAA,KAAK,EAAE,GADA;AAEPC,MAAAA,YAAY,EAAE,CAFP;AAGPC,MAAAA,UAAU,EAAE;AAAEC,QAAAA,IAAI,EAAE,OAAR;AAAiBC,QAAAA,QAAQ,EAAE;AAA3B;AAHL;AADM,GAAf;;AAQA,MAAKf,WAAL,EAAmB;AAClBQ,IAAAA,UAAU,GACT,cAAC,MAAD,CAAQ,GAAR;AACC,MAAA,QAAQ,EAAG,CAAED,aAAF,IAAmBE,MAD/B;AAEC,MAAA,GAAG,EAAGjB,EAAE,CAAE,WAAF,CAFT;AAGC,MAAA,SAAS,EAAC,sCAHX;AAIC,MAAA,GAAG,EAAGQ;AAJP,MADD;AAQA,GATD,MASO,IAAKD,oBAAL,EAA4B;AAClCS,IAAAA,UAAU,GAAG,IAAb;AACA,GAFM,MAEA,IAAKV,IAAL,EAAY;AAClBU,IAAAA,UAAU,GAAG,cAAC,IAAD;AAAM,MAAA,IAAI,EAAC,MAAX;AAAkB,MAAA,IAAI,EAAGV;AAAzB,MAAb;AACA;;AAED,SACC,cAAC,MAAD,CAAQ,GAAR;AAAY,IAAA,SAAS,EAAC,2BAAtB;AAAkD,IAAA,UAAU,EAAC;AAA7D,KACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,KAAK,EAAGN,EAAE,CAAE,WAAF,CAFX;AAGC,IAAA,IAAI,EAAC;AAHN,KAKGgB,UALH,CADD,CADD;AAWA;;AAED,eAAeX,cAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tButton,\n\tIcon,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { wordpress } from '@wordpress/icons';\nimport { store as coreDataStore } from '@wordpress/core-data';\nimport { useReducedMotion } from '@wordpress/compose';\n\nfunction NavigationLink( { icon } ) {\n\tconst { isRequestingSiteIcon, siteIconUrl } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, isResolving } = select( coreDataStore );\n\t\tconst siteData =\n\t\t\tgetEntityRecord( 'root', '__unstableBase', undefined ) || {};\n\n\t\treturn {\n\t\t\tisRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [\n\t\t\t\t'root',\n\t\t\t\t'__unstableBase',\n\t\t\t\tundefined,\n\t\t\t] ),\n\t\t\tsiteIconUrl: siteData.site_icon_url,\n\t\t};\n\t}, [] );\n\n\tconst disableMotion = useReducedMotion();\n\n\tlet buttonIcon = <Icon size=\"36px\" icon={ wordpress } />;\n\n\tconst effect = {\n\t\texpand: {\n\t\t\tscale: 1.7,\n\t\t\tborderRadius: 0,\n\t\t\ttransition: { type: 'tween', duration: '0.2' },\n\t\t},\n\t};\n\n\tif ( siteIconUrl ) {\n\t\tbuttonIcon = (\n\t\t\t<motion.img\n\t\t\t\tvariants={ ! disableMotion && effect }\n\t\t\t\talt={ __( 'Site Icon' ) }\n\t\t\t\tclassName=\"edit-site-navigation-link__site-icon\"\n\t\t\t\tsrc={ siteIconUrl }\n\t\t\t/>\n\t\t);\n\t} else if ( isRequestingSiteIcon ) {\n\t\tbuttonIcon = null;\n\t} else if ( icon ) {\n\t\tbuttonIcon = <Icon size=\"36px\" icon={ icon } />;\n\t}\n\n\treturn (\n\t\t<motion.div className=\"edit-site-navigation-link\" whileHover=\"expand\">\n\t\t\t<Button\n\t\t\t\tclassName=\"edit-site-navigation-link__button has-icon\"\n\t\t\t\tlabel={ __( 'Dashboard' ) }\n\t\t\t\thref=\"index.php\"\n\t\t\t>\n\t\t\t\t{ buttonIcon }\n\t\t\t</Button>\n\t\t</motion.div>\n\t);\n}\n\nexport default NavigationLink;\n"]}

package/src/components/header/navigation-link/index.js

@@ -1,71 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
-	Button,
-	Icon,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { wordpress } from '@wordpress/icons';
-import { store as coreDataStore } from '@wordpress/core-data';
-import { useReducedMotion } from '@wordpress/compose';
-
-function NavigationLink( { icon } ) {
-	const { isRequestingSiteIcon, siteIconUrl } = useSelect( ( select ) => {
-		const { getEntityRecord, isResolving } = select( coreDataStore );
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
-		return {
-			isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
-				'root',
-				'__unstableBase',
-				undefined,
-			] ),
-			siteIconUrl: siteData.site_icon_url,
-		};
-	}, [] );
-
-	const disableMotion = useReducedMotion();
-
-	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
-
-	const effect = {
-		expand: {
-			scale: 1.7,
-			borderRadius: 0,
-			transition: { type: 'tween', duration: '0.2' },
-		},
-	};
-
-	if ( siteIconUrl ) {
-		buttonIcon = (
-			<motion.img
-				variants={ ! disableMotion && effect }
-				alt={ __( 'Site Icon' ) }
-				className="edit-site-navigation-link__site-icon"
-				src={ siteIconUrl }
-			/>
-		);
-	} else if ( isRequestingSiteIcon ) {
-		buttonIcon = null;
-	} else if ( icon ) {
-		buttonIcon = <Icon size="36px" icon={ icon } />;
-	}
-
-	return (
-		<motion.div className="edit-site-navigation-link" whileHover="expand">
-			<Button
-				className="edit-site-navigation-link__button has-icon"
-				label={ __( 'Dashboard' ) }
-				href="index.php"
-			>
-				{ buttonIcon }
-			</Button>
-		</motion.div>
-	);
-}
-
-export default NavigationLink;

package/src/components/header/navigation-link/style.scss

@@ -1,69 +0,0 @@
-// Developer notes: these rules are duplicated for the post editor.
-// They need to be updated in both places.
-
-.edit-site-navigation-link {
-	align-items: center;
-	background: $gray-900;
-	border-radius: 0;
-	display: flex;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: z-index(".edit-site-navigation-link");
-	height: $header-height;
-	width: $header-height;
-}
-
-.edit-site-navigation-link__button {
-	align-items: center;
-	background: $gray-900;
-	border-radius: 0;
-	color: $white;
-	height: $header-height + $border-width;
-	width: $header-height;
-	z-index: 1;
-	margin-bottom: - $border-width;
-
-	&.has-icon {
-		min-width: $header-height;
-
-		&:hover,
-		&:active,
-		&:focus {
-			color: $white;
-		}
-
-		&:focus {
-			box-shadow: none;
-		}
-
-		&::before {
-			transition: box-shadow 0.1s ease;
-			@include reduce-motion("transition");
-			content: "";
-			display: block;
-			position: absolute;
-			top: 9px;
-			right: 9px;
-			bottom: 9px;
-			left: 9px;
-			border-radius: $radius-block-ui + $border-width + $border-width;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-		}
-
-		// Hover color.
-		&:hover::before {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
-		}
-
-		// Lightened spot color focus.
-		&:focus::before {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-	}
-}
-
-.edit-site-navigation-link__site-icon {
-	width: $button-size;
-	border-radius: $radius-block-ui;
-}