diff --git a/goofy-client/libs/ozg-file/src/lib/ozg-file-container/ozg-file/ozg-file.component.html b/goofy-client/libs/ozg-file/src/lib/ozg-file-container/ozg-file/ozg-file.component.html index 8f4d4dbecf074ebb369ac9a5c734eff98d58f61a..8ec634e6628ba68dd02f8dba8690bf234b78259c 100644 --- a/goofy-client/libs/ozg-file/src/lib/ozg-file-container/ozg-file/ozg-file.component.html +++ b/goofy-client/libs/ozg-file/src/lib/ozg-file-container/ozg-file/ozg-file.component.html @@ -1,4 +1,4 @@ -<div class="container"> +<div class="container" [ngClass]="{ 'deletable': deletable}"> <button [matTooltip]="file.name" matTooltipClass="word-break" diff --git a/goofy-client/libs/ozg-file/src/lib/ozg-file-container/ozg-file/ozg-file.component.scss b/goofy-client/libs/ozg-file/src/lib/ozg-file-container/ozg-file/ozg-file.component.scss index 8aa781df04b8af4aa3e9fa90502a5b4091418787..0fc970ac7eeaa3455f4e0bc015c842fef1c59144 100644 --- a/goofy-client/libs/ozg-file/src/lib/ozg-file-container/ozg-file/ozg-file.component.scss +++ b/goofy-client/libs/ozg-file/src/lib/ozg-file-container/ozg-file/ozg-file.component.scss @@ -4,6 +4,7 @@ justify-content: flex-start; position: relative; padding: 4px; + font-size: 14px; } .container { @@ -17,6 +18,7 @@ background-color: transparent; padding: 0 8px 0 2px; border-radius: 14px; + line-height: 26px; white-space: nowrap; display: flex; align-items: center; @@ -49,6 +51,8 @@ opacity: 0.40; padding: 0 4px; transform: scale(0.9); + display: flex; + align-items: center; } .name { @@ -90,3 +94,21 @@ goofy-client-icon-button-with-spinner { display: block; margin: -12px 0; } + +.deletable { + .container { + border-radius: 16px; + } + + .file { + width: calc(100% - 40px); + padding: 0 0 0 2px; + line-height: 32px; + } + + .mat-icon { + width: 32px; + padding: 6px; + } +} +