Update skin for Ocean theme

Fixes #91
liferay · Jan 29, 2015 · 5ee80bf · 5ee80bf
1 parent 6585e7c
commit 5ee80bf
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 112 deletions.
diff --git a/src/ui/yui/src/assets/css/alloy-editor-core.css b/src/ui/yui/src/assets/css/alloy-editor-core.css
@@ -1,74 +1,77 @@
-/* line 1, ../sass/alloy-editor-core.scss */
 .yui3-toolbarstyles-hidden, .yui3-toolbaradd-hidden, .yui3-toolbaraddtrigger-hidden, .yui3-toolbarimage-hidden, .yui3-linktooltip-hidden {
   display: none;
 }
 
-/* line 5, ../sass/alloy-editor-core.scss */
 .alloy-editor-toolbar, .alloy-editor-tooltip-link {
   position: absolute;
   z-index: 1;
 }
 
-/* line 11, ../sass/alloy-editor-core.scss */
+.alloy-editor-toolbar {
+  padding: 10px;
+}
 .alloy-editor-toolbar .alloy-editor-button {
-  padding: 10px 10px 8px 10px;
+  height: 24px;
+  margin: 0 10px;
   outline: none;
-  height: 36px;
+  padding: 0;
+  width: 24px;
+}
+.alloy-editor-toolbar .alloy-editor-button:last-child {
+  margin-right: 0;
 }
 
-/* line 20, ../sass/alloy-editor-core.scss */
+.alloy-editor-toolbar-styles .link-wrapper .alloy-editor-button {
+  margin-left: 10px;
+}
 .alloy-editor-toolbar-styles .link-wrapper .input-container {
   display: inline-block;
   padding: 2px;
 }
-/* line 24, ../sass/alloy-editor-core.scss */
 .alloy-editor-toolbar-styles .link-wrapper .input-container input {
   outline: none;
   width: 162px;
 }
-/* line 29, ../sass/alloy-editor-core.scss */
 .alloy-editor-toolbar-styles .link-wrapper .input-container input::-ms-clear {
   display: none;
 }
-/* line 33, ../sass/alloy-editor-core.scss */
 .alloy-editor-toolbar-styles .link-wrapper .input-container .input-clear {
   display: inline-block;
   height: 14px;
   vertical-align: text-top;
   width: 14px;
 }
-/* line 39, ../sass/alloy-editor-core.scss */
 .alloy-editor-toolbar-styles .link-wrapper .input-container .input-clear i {
   cursor: pointer;
 }
 
-/* line 48, ../sass/alloy-editor-core.scss */
+.alloy-editor-toolbar-add-trigger .alloy-editor-button {
+  height: 24px;
+  padding: 5px;
+  width: 24px;
+}
+
 .alloy-editor-toolbar-add .alloy-editor-button {
   font-size: 20px;
 }
 
-/* line 55, ../sass/alloy-editor-core.scss */
 .alloy-editor-tooltip-link .link-container .icon-link-container {
   margin: 0 5px 0 5px;
   vertical-align: text-top;
 }
-/* line 60, ../sass/alloy-editor-core.scss */
 .alloy-editor-tooltip-link .link-container .link-preview {
   display: inline-block;
   padding: 4px;
   outline: none;
 }
 
-/* line 68, ../sass/alloy-editor-core.scss */
 .alloy-editor-placeholder:empty:not(:focus):before {
   content: attr(data-placeholder);
 }
 
-/* line 72, ../sass/alloy-editor-core.scss */
 .alloy-editor-twitter-link {
   padding: 0 5px;
 }
-/* line 75, ../sass/alloy-editor-core.scss */
 .alloy-editor-twitter-link:after {
   content: '\e604';
   font-family: alloyeditor;

diff --git a/src/ui/yui/src/assets/css/skin/ocean/alloy-editor-skin.css b/src/ui/yui/src/assets/css/skin/ocean/alloy-editor-skin.css
@@ -1,122 +1,122 @@
-/* line 6, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 ::-webkit-selection {
   text-shadow: none;
   background: #e6f1fa !important;
 }
 
-/* line 12, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloyeditor-add-toolbar ::-webkit-selection {
   text-shadow: none;
-  background: #f3dada !important;
+  /*
+   * background-color: #f3205b
+   * opacity: 0.2
+   */
+  background-color: rgba(243, 32, 91, 0.2) !important;
 }
 
-/* line 6, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 ::-moz-selection {
   text-shadow: none;
   background: #e6f1fa !important;
 }
 
-/* line 12, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloyeditor-add-toolbar ::-moz-selection {
   text-shadow: none;
-  background: #f3dada !important;
+  /*
+   * background-color: #f3205b
+   * opacity: 0.2
+   */
+  background-color: rgba(243, 32, 91, 0.2) !important;
 }
 
-/* line 6, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 ::-o-selection {
   text-shadow: none;
   background: #e6f1fa !important;
 }
 
-/* line 12, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloyeditor-add-toolbar ::-o-selection {
   text-shadow: none;
-  background: #f3dada !important;
+  /*
+   * background-color: #f3205b
+   * opacity: 0.2
+   */
+  background-color: rgba(243, 32, 91, 0.2) !important;
 }
 
-/* line 6, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 ::selection {
   text-shadow: none;
   background: #e6f1fa !important;
 }
 
-/* line 12, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloyeditor-add-toolbar ::selection {
   text-shadow: none;
-  background: #f3dada !important;
+  /*
+   * background-color: #f3205b
+   * opacity: 0.2
+   */
+  background-color: rgba(243, 32, 91, 0.2) !important;
 }
 
-/* line 19, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
   opacity: 0.95;
-  border: none;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  background-color: #32a8e6;
 }
 
-/* line 25, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar .alloy-editor-button {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-  -webkit-transition: color 0.1s ease-out;
-  -moz-transition: color 0.1s ease-out;
-  -o-transition: color 0.1s ease-out;
-  transition: color 0.1s ease-out;
-  background-color: #215ec0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  background-color: transparent;
   background-image: none;
   color: #fff;
-  height: 40px;
-  width: 40px;
 }
-/* line 34, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar .alloy-editor-button:hover, .alloy-editor-toolbar .alloy-editor-button:focus {
   background-image: none;
-  color: #41bdea;
+  color: #2b4259;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+  opacity: 0.4;
 }
-/* line 39, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar .alloy-editor-button.yui3-button-selected, .alloy-editor-toolbar .alloy-editor-button.yui3-button-active, .alloy-editor-toolbar .alloy-editor-button.yui3-button:active {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-  background-color: #215ec0;
-  color: #41bdea;
-}
-/* line 46, ../../../sass/skin/ocean/alloy-editor-skin.scss */
-.alloy-editor-toolbar .alloy-editor-button.yui3-button-selected:hover, .alloy-editor-toolbar .alloy-editor-button.yui3-button-active:hover, .alloy-editor-toolbar .alloy-editor-button.yui3-button:active:hover {
-  background-color: #215ec0;
+  /*
+   * background-color: #2b4259
+   * opacity: 0.4
+   *
+   * Child elements inherit parent opacity attribute. We need to convert to rgba
+   * because rgba affects only to the background-color.
+   * In this way we avoid setting opacity on the whole button.
+   */
+  background-color: rgba(43, 66, 89, 0.4);
 }
 
-/* line 54, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar-styles .link-wrapper {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
-  border-radius: 4px;
-  background-color: #215ec0;
-  height: 40px;
   margin-left: 5px;
 }
-/* line 60, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar-styles .link-wrapper input {
   border: none;
 }
-/* line 64, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar-styles .link-wrapper .input-container {
   background-color: #fff;
   color: #2f232d;
-  margin: 4px;
-  padding: 5px;
 }
-/* line 70, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar-styles .link-wrapper .input-container .input-clear {
-  color: #b1b1b1;
+  color: #2b4259;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+  opacity: 0.4;
 }
-/* line 76, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar-styles .link-wrapper .input-close-container .close-link {
   color: #41bdea;
 }
-/* line 79, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar-styles .link-wrapper .input-close-container .close-link.yui3-button[disabled], .alloy-editor-toolbar-styles .link-wrapper .input-close-container .close-link.yui3-button-disabled {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
@@ -125,25 +125,28 @@
   opacity: 1;
 }
 
-/* line 89, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar-add-trigger {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+  background-color: transparent;
 }
-/* line 92, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-toolbar-add-trigger .alloy-editor-button {
   -webkit-border-radius: 13px;
   -moz-border-radius: 13px;
   -ms-border-radius: 13px;
   -o-border-radius: 13px;
   border-radius: 13px;
-  height: 26px;
-  padding: 6px;
-  width: 26px;
+  background-color: #32a8e6;
+}
+.alloy-editor-toolbar-add-trigger .alloy-editor-button:hover {
+  /*
+   * background-color: #32a8e6
+   * opacity: 0.7
+   */
+  background-color: rgba(50, 168, 230, 0.7);
 }
 
-/* line 101, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-tooltip-link {
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
@@ -152,29 +155,20 @@
   border-radius: 4px;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
   opacity: 0.95;
-  background-color: #215ec0;
+  background-color: #32a8e6;
   padding: 2px 4px;
 }
-/* line 107, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-tooltip-link .link-container {
   color: #fff;
 }
-/* line 110, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-tooltip-link .link-container .link-preview {
   color: #fff;
 }
 
-/* line 116, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-placeholder:empty:not(:focus) {
   background-color: #ffffe0;
 }
 
-/* line 120, ../../../sass/skin/ocean/alloy-editor-skin.scss */
-.alloy-editor-toolbar .alloy-editor-button.focus {
-  color: #44b6e0;
-}
-
-/* line 124, ../../../sass/skin/ocean/alloy-editor-skin.scss */
 .alloy-editor-twitter-link {
   background-color: #f8f8f8;
 }
diff --git a/src/ui/yui/src/assets/sass/alloy-editor-core.scss b/src/ui/yui/src/assets/sass/alloy-editor-core.scss
@@ -8,15 +8,27 @@
 }
 
 .alloy-editor-toolbar {
-     .alloy-editor-button {
-        padding: 10px 10px 8px 10px;
+    padding: 10px;
+
+    .alloy-editor-button {
+        height: 24px;
+        margin: 0 10px;
         outline: none;
-        height: 36px;
+        padding: 0;
+        width: 24px;
+
+        &:last-child {
+            margin-right: 0;
+        }
     }
 }
 
 .alloy-editor-toolbar-styles {
     .link-wrapper {
+        .alloy-editor-button {
+            margin-left: 10px;
+        }
+
         .input-container {
             display: inline-block;
             padding: 2px;
@@ -44,6 +56,14 @@
     }
 }
 
+.alloy-editor-toolbar-add-trigger {
+    .alloy-editor-button {
+        height: 24px;
+        padding: 5px;
+        width: 24px;
+    }
+}
+
 .alloy-editor-toolbar-add {
     .alloy-editor-button {
         font-size: 20px;