tinymce-single: add toolbar styles from main prototype

WordPress · Feb 23, 2017 · 00cf814 · 00cf814
1 parent 8b436e4
commit 00cf814
Showing 1 changed file with 13 additions and 159 deletions.
diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -107,67 +107,47 @@
 }
 
 .mce-inline-toolbar-grp .mce-btn {
-	border: 1px solid transparent;
+	padding: 5px;
 	position: relative;
 	display: inline-block;
 	background: none;
-	border-radius: 2px;
-	margin: 2px;
-	color: #23282d;
+	color: #12181e;
 }
 
 .mce-inline-toolbar-grp .mce-btn:hover,
 .mce-inline-toolbar-grp .mce-btn:focus {
-	background-color: #fafafa;
-	border-color: #23282d;
-	-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
-	box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
+	background-color: #f0f2f4;
 }
 
 .mce-inline-toolbar-grp .mce-btn.mce-active,
 .mce-inline-toolbar-grp .mce-btn:active {
-	background-color: #ebebeb;
-	border-color: #555d66;
-	-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
-	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
+	background-color: #e0e5e9;
 }
 
 .mce-inline-toolbar-grp .mce-btn button {
-	padding: 1px 2px;
+	padding: 1px;
 	display: block;
 }
 
 svg.gridicon {
 	width: 24px;
 	height: 24px;
-	fill: #000;
+	fill: #12181e;
 }
 
 .mce-inline-toolbar-grp .mce-btn.mce-primary {
 	background: #0085ba;
-	border-color: #0073aa #006799 #006799;
-	-webkit-box-shadow: 0 1px 0 #006799;
-	box-shadow: 0 1px 0 #006799;
-	text-decoration: none;
 }
 
 .mce-inline-toolbar-grp .mce-btn.mce-primary .mce-txt,
 .mce-inline-toolbar-grp .mce-btn.mce-primary .mce-ico {
 	color: #fff;
-	text-shadow: 0 -1px 1px #006799,
-		1px 0 1px #006799,
-		0 1px 1px #006799,
-		-1px 0 1px #006799;
 }
 
 .mce-inline-toolbar-grp .mce-btn.mce-primary svg {
 	fill: #fff;
 }
 
-.mce-flow-layout-item {
-	margin: 1px;
-}
-
 .mce-btn .mce-txt {
 	display: block;
 	height: 24px;
@@ -190,14 +170,9 @@ svg.gridicon {
 }
 
 div.mce-inline-toolbar-grp {
-	background-color: #f5f5f5;
-	border: 1px solid #a0a5aa;
-	-webkit-border-radius: 2px;
-	border-radius: 2px;
-	-webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
-	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
+	background-color: #fff;
+	border: 1px solid #e1e6ea;
+	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
 	box-sizing: border-box;
 	margin-bottom: 8px;
 	position: absolute;
@@ -206,126 +181,20 @@ div.mce-inline-toolbar-grp {
 	-ms-user-select: none;
 	user-select: none;
 	max-width: 98%;
-	z-index: 99998; /* Under adminbar */
-}
-
-div.mce-inline-toolbar-grp > div.mce-stack-layout {
-	padding: 1px;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-up {
-	margin-bottom: 0;
-	margin-top: 8px;
-}
-
-div.mce-inline-toolbar-grp:before,
-div.mce-inline-toolbar-grp:after {
-	position: absolute;
-	left: 50%;
-	display: block;
-	width: 0;
-	height: 0;
-	border-style: solid;
-	border-color: transparent;
-	content: '';
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-up:before {
-	top: -9px;
-	border-bottom-color: #a0a5aa;
-	border-width: 0 9px 9px;
-	margin-left: -9px;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-down:before {
-	bottom: -9px;
-	border-top-color: #a0a5aa;
-	border-width: 9px 9px 0;
-	margin-left: -9px;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-up:after {
-	top: -8px;
-	border-bottom-color: #f5f5f5;
-	border-width: 0 8px 8px;
-	margin-left: -8px;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-down:after {
-	bottom: -8px;
-	border-top-color: #f5f5f5;
-	border-width: 8px 8px 0;
-	margin-left: -8px;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-left:before,
-div.mce-inline-toolbar-grp.mce-arrow-left:after {
-	margin: 0;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-left:before {
-	left: 20px;
-}
-div.mce-inline-toolbar-grp.mce-arrow-left:after {
-	left: 21px;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-right:before,
-div.mce-inline-toolbar-grp.mce-arrow-right:after {
-	left: auto;
-	margin: 0;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-right:before {
-	right: 20px;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-right:after {
-	right: 21px;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-full {
-	right: 0;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-full > div {
-	width: 100%;
-	overflow-x: auto;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-left-side:before,
-div.mce-inline-toolbar-grp.mce-arrow-left-side:after {
-	left: auto;
-	top: 50%;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-left-side:before {
-	left: -9px;
-	border-right-color: #a0a5aa;
-	border-width: 9px 9px 9px 0;
-	margin-top: -9px;
-}
-
-div.mce-inline-toolbar-grp.mce-arrow-left-side:after {
-	left: -8px;
-	border-right-color: #f5f5f5;
-	border-width: 8px 8px 8px 0;
-	margin-top: -8px;
 }
 
 div.wp-link-preview {
 	float: left;
-	margin: 2px;
 	max-width: 694px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 div.wp-link-preview a {
 	display: block;
-	color: #0073aa;
+	color: #12181e;
 	font-size: 16px;
-	padding: 5px;
+	padding: 9px;
 	text-decoration: underline;
 	-webkit-transition-property: border, background, color;
 	transition-property: border, background, color;
@@ -338,29 +207,14 @@ div.wp-link-preview a {
 
 div.wp-link-input {
 	float: left;
-	margin: 2px;
 	max-width: 694px;
 }
 
 div.wp-link-input input {
 	font-size: 16px;
 	width: 300px;
-	padding: 4px;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-	border-width: 1px;
-	border-style: solid;
-	background-color: #fff;
-	color: #333;
-	border-color: #ddd;
-	box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
-}
-
-div.wp-link-input input:focus {
-	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-	border-color: #999;
+	padding: 9px;
+	color: #12181e;
 }
 
 @media screen and ( max-width: 782px ) {