From eb80f8a610100f908b5cb9ffc65bfa94f8a23c21 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 8 May 2012 13:26:36 -0700 Subject: CSS Panel - Create non-tree declaration (optimized). And add updating functionality. --- js/panels/css-panel/css-style.reel/css-style.css | 187 +++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 js/panels/css-panel/css-style.reel/css-style.css (limited to 'js/panels/css-panel/css-style.reel/css-style.css') diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css new file mode 100644 index 00000000..6864e245 --- /dev/null +++ b/js/panels/css-panel/css-style.reel/css-style.css @@ -0,0 +1,187 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +/* ------------------------ + Style item container styles +------------------------ */ +.style-item { + border-bottom: 1px solid rgba(0,0,0,0); + cursor: url(/js/../images/tools/hand_down.png), default; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.style-item:hover { + border-right: 3px double #999; + margin-right: 3px; +} + +/* ------------------------ + Invalid Style +------------------------ */ +.style-item-invalid { + background-repeat: no-repeat; + background-position: 6px 2px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMzYyMERFNTQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMzYyMERFNjQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNjIwREUzNDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzNjIwREU0NDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bc4fwegAAAWpJREFUeNo8kLtLA0EQxr%2B9l3lcDAaCBsEqEOysBFEQsRAsRVCEpBREsbIUSxtBrAxEewsrK8VHQIhK%2FoIUUVJIQFFjYi65XDZ36%2Bz5GFgWZr75fjPDhBD4C%2BucjWgaphjQdTgK%2FfPi5a%2FGpPDtjEVjERyqKlag%2FlY8gHPsfzSwPbQgbDyfIs6vURa3EKK8Jf6jmhUy51yiWDlBUDED2NF0JKGQS3IPVn4ATXqIL0EYJgwD42YQG4quE45EggOtCwbWrUM1Ej%2F0jkXDAYaOtOa6iIH2YSQOBugPj4KN3aFdnIThkprynoeUYjtwIRO0hCLxiU3wp12odgl0AXhUa3VQ0xoWCqEApiNhEpFzt7Tm%2F4Tzo9kGvtq4UjNzqJB1mswURvNoqayP57V7KcB7HfZnE8v%2BHYtZtmiGcBzqQ1TSZUPP85HVlo1MfCaX94WPpSO83qwO6wbWCTtBQocoD70eDgZncw3Z%2BC3AAFMzlxlnnpevAAAAAElFTkSuQmCC); + opacity: 0.5; +} +.style-item.style-item-invalid:hover input { + visibility: hidden; +} +.style-item-invalid.edit-style-item { + opacity: 1; +} +/* ------------------------ + Checkbox +------------------------ */ + +.style-item input { + height: 10px; + width: 10px; + margin: 0 6px; + visibility: hidden; +} +.style-item:hover input, .style-item-disabled input { + visibility: visible; +} +.style-item-disabled { + opacity: .5; +} + +/* ------------------------ + Property/value styles +------------------------ */ + +.css-property, .css-value { + border: 1px solid rgba(0,0,0,0); + border-radius: 2px; + cursor: pointer; + margin: 0; + outline: none; + padding: 0 2px; +} +.css-property:hover, .css-value:hover { + background-color: #FFDECC; +} +.css-property:focus, .css-value:focus { + border: 1px solid rgba(0,0,0,0); + box-shadow: none; +} +.css-property:after { + color: #333; + content: ":"; +} +.css-value:after { + content: ";"; +} +.css-property { + display: inline-block; + color: rgb(200,0,0); + max-width: 68%; + overflow: hidden; + text-overflow: ellipsis; +} +.css-value { + display: inline; +} + +/* ------------------------ + Editable Styles +------------------------ */ + +.style-item .editable { + background-color: transparent; + border: 1px solid #999; + box-shadow: 1px 1px 1px #CCC; + color: #333; + cursor: text; + display: inline-block; + margin-right: 7px; + max-width: none; + overflow: visible; + -webkit-user-select: text; +} +.style-item .editable:after { + position: relative; + margin-right: -7px; + right: -1px; +} +.style-item .hintable-hint { + color: #bdbdbd; +} + +/* ------------------------ + Empty Style (Add Style) +------------------------ */ +.add-style-button { + display: none; +} +.empty-css-style { + cursor: default; + -webkit-transition: -webkit-transform .2s cubic-bezier(0.44, 0.19, 0, 0.99); + -webkit-transform: translate3d(-120px, 0, 0); + overflow: visible; +} +.empty-css-style:hover { + border-right-style: none; +} +.empty-css-style .add-style-button { + cursor: pointer; + color: #333; + display: inline-block; + font-family: "Droid Sans", sans-serif; + background: -webkit-linear-gradient(top, rgba(242,242,242,1) 1%,rgba(221,221,221,1) 100%); + border-radius: 5px; + border: 1px solid #CCC; + padding: 1px 10px 0; + position: absolute; + left: 140px; + text-shadow: 1px 1px 0 #FFF; + -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99); +} +.empty-css-style .add-style-button:hover { + background: -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%); +} +.empty-css-style .add-style-button:active { + background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(252,252,252,1) 99%); +} +.empty-css-style .css-property, .empty-css-style .css-value { + -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99); + opacity: 0; +} +.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value { + opacity: 1; +} +.empty-css-style.edit-empty-style { + border-right-style: none; + -webkit-transform: translate3d(0, 0, 0); +} +.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value { + color: #adadad; +} +.empty-css-style.edit-empty-style .add-style-button { + opacity: 0; +} +.empty-css-style input[type="checkbox"] { + visibility: hidden; +} +/* ------------------------ + Drag/Drop Styles +------------------------ */ + +.style-item.dragged { + background: none; + border-right-style: none; + opacity: .85; +} +.style-item.dragging { + background-color: #f2f2f2; + opacity: .55; +} +.style-item.drag-enter { + border-bottom: 1px solid #CCC; +} \ No newline at end of file -- cgit v1.2.3 From 5c4cfc1a52b1cb079b1fa6f02aedcaef1ad2bc38 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 17 May 2012 19:53:13 -0700 Subject: CSS Style - minor css fix --- js/panels/css-panel/css-style.reel/css-style.css | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/css-panel/css-style.reel/css-style.css') diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css index 6864e245..4f7f6b9c 100644 --- a/js/panels/css-panel/css-style.reel/css-style.css +++ b/js/panels/css-panel/css-style.reel/css-style.css @@ -165,6 +165,7 @@ } .empty-css-style.edit-empty-style .add-style-button { opacity: 0; + cursor: default; } .empty-css-style input[type="checkbox"] { visibility: hidden; -- cgit v1.2.3 From baeff46187e106a238b23631fe35b9760b70dcc7 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 22 May 2012 13:18:12 -0700 Subject: CSS Style - Remove drag/drop UI stuff --- js/panels/css-panel/css-style.reel/css-style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/panels/css-panel/css-style.reel/css-style.css') diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css index 4f7f6b9c..524884bd 100644 --- a/js/panels/css-panel/css-style.reel/css-style.css +++ b/js/panels/css-panel/css-style.reel/css-style.css @@ -9,15 +9,15 @@ ------------------------ */ .style-item { border-bottom: 1px solid rgba(0,0,0,0); - cursor: url(/js/../images/tools/hand_down.png), default; + /*cursor: url(/js/../images/tools/hand_down.png), default;*/ display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .style-item:hover { - border-right: 3px double #999; - margin-right: 3px; + /*border-right: 3px double #999;*/ + /*margin-right: 3px;*/ } /* ------------------------ -- cgit v1.2.3