Move panel item CSS into component
Moves all the styles used by a panel item from the included
external CSS file into the custom element template.
Bug: 947388
Change-Id: I010f65de130cda1462cfe3714d63af59f916593e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1689394
Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#675432}
diff --git a/ui/file_manager/file_manager/foreground/elements/files_xf_elements.css b/ui/file_manager/file_manager/foreground/elements/files_xf_elements.css
index e78e099..d24ae42 100644
--- a/ui/file_manager/file_manager/foreground/elements/files_xf_elements.css
+++ b/ui/file_manager/file_manager/foreground/elements/files_xf_elements.css
@@ -13,65 +13,7 @@
flex-direction: column;
}
-.xf-panel-item {
- align-items: center;
- background-color: #FFF;
- display: flex;
- flex-direction: row;
- max-width: 400px;
-}
-
-.xf-button {
- height: 36px;
- width: 36px;
-}
-
-.xf-panel-text {
- font: 13px Roboto;
- line-height: 20px;
- max-width: 216px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.xf-panel-label-text {
- color: rgb(32, 33, 36);
-}
-
-.xf-panel-secondary-text {
- color: rgb(95, 99, 104);
-}
-
-.xf-padder-4 {
- width: 4px;
-}
-
-.xf-padder-16 {
- width: 16px;
-}
-
-.xf-padder-24 {
- flex-grow: 16;
- width: 24px;
-}
.xf-vertical-padder-8 {
height: 8px;
}
-
-xf-circular-progress {
- padding: 16px;
-}
-
-xf-activity-complete {
- padding: 16px;
-}
-
-.xf-success {
- color: rgb(52, 168, 83);
-}
-
-.xf-failure {
- color: rgb(234, 67, 53);
-}
diff --git a/ui/file_manager/file_manager/foreground/elements/xf_panel_item.js b/ui/file_manager/file_manager/foreground/elements/xf_panel_item.js
index dbc70bb..8dbecac 100644
--- a/ui/file_manager/file_manager/foreground/elements/xf_panel_item.js
+++ b/ui/file_manager/file_manager/foreground/elements/xf_panel_item.js
@@ -45,14 +45,73 @@
* @return {string}
*/
static get template_() {
- return `<link rel='stylesheet'
- href='foreground/elements/files_xf_elements.css'>
- <style>
+ return `<style>
+ .xf-panel-item {
+ align-items: center;
+ background-color: #FFF;
+ display: flex;
+ flex-direction: row;
+ max-width: 400px;
+ }
+
+ .xf-button {
+ height: 36px;
+ width: 36px;
+ }
+
+ .xf-panel-text {
+ font: 13px Roboto;
+ line-height: 20px;
+ max-width: 216px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .xf-panel-label-text {
+ color: rgb(32, 33, 36);
+ }
+
+ .xf-panel-secondary-text {
+ color: rgb(95, 99, 104);
+ }
+
+ .xf-padder-4 {
+ width: 4px;
+ }
+
+ .xf-padder-16 {
+ width: 16px;
+ }
+
+ .xf-padder-24 {
+ flex-grow: 16;
+ width: 24px;
+ }
+
+ xf-circular-progress {
+ padding: 16px;
+ }
+
+ xf-activity-complete {
+ padding: 16px;
+ }
+
+ // TODO(crbug.com/947388) Use '--goog' prefixed CSS varables.
+ .xf-success {
+ color: rgb(52, 168, 83);
+ }
+
+ .xf-failure {
+ color: rgb(234, 67, 53);
+ }
+
:host([panel-type='0']) .xf-panel-item {
height: var(--progress-height);
padding-top: var(--progress-padding-top);
padding-bottom: var(--progress-padding-bottom);
}
+
:not(:host([panel-type='0'])) .xf-panel-item {
height: 68px;
}