Browse Source

Style improvements.

pull/95/head
Sebastian Stehle 8 years ago
parent
commit
5096d96b31
  1. 4
      src/Squidex/app/features/webhooks/pages/webhook-events-page.component.html
  2. 22
      src/Squidex/app/features/webhooks/pages/webhook-events-page.component.scss
  3. 7
      src/Squidex/app/theme/_lists.scss
  4. 2
      src/Squidex/app/theme/_vars.scss

4
src/Squidex/app/features/webhooks/pages/webhook-events-page.component.html

@ -70,7 +70,9 @@
</tr> </tr>
<tr *ngIf="selectedEventId === event.id"> <tr *ngIf="selectedEventId === event.id">
<td colspan="5"> <td colspan="5">
<h3>Last Request</h3> <div class="event-header">
<h3>Last Request</h3>
</div>
<div class="row event-stats"> <div class="row event-stats">
<div class="col-3"> <div class="col-3">

22
src/Squidex/app/features/webhooks/pages/webhook-events-page.component.scss

@ -48,4 +48,26 @@ h3 {
font-weight: normal; font-weight: normal;
height: 20rem; height: 20rem;
} }
&-header {
& {
padding: 1rem 1.25rem;
position: relative;
background: $color-border;
border: 0;
margin: -1.25rem;
margin-bottom: 1rem;
}
&::before {
@include caret-top;
@include absolute(-.5rem, 1.9rem, auto, auto);
border-color: transparent transparent $color-border;
border-width: .6rem;
}
h3 {
margin: 0;
}
}
} }

7
src/Squidex/app/theme/_lists.scss

@ -63,11 +63,6 @@
margin-bottom: .5rem; margin-bottom: .5rem;
} }
// Transitioned hover effect.
&:hover {
background: darken($color-table, 2%);
}
&:focus { &:focus {
outline: none; outline: none;
} }
@ -127,7 +122,7 @@
// Caret that is placed next to the expand button. // Caret that is placed next to the expand button.
&::before { &::before {
@include caret-top; @include caret-top;
@include absolute(-.5rem, 5.5rem, auto, auto); @include absolute(-.5rem, 5.7rem, auto, auto);
border-color: transparent transparent $color-border; border-color: transparent transparent $color-border;
border-width: .6rem; border-width: .6rem;
} }

2
src/Squidex/app/theme/_vars.scss

@ -57,7 +57,7 @@ $color-panel-icon: #a2b0b6;
$color-table: #fff; $color-table: #fff;
$color-table-footer: #ecf2f6; $color-table-footer: #ecf2f6;
$color-table-border: #e9ecef; $color-table-border: $color-border;
$color-table-header: $color-text-decent; $color-table-header: $color-text-decent;
$color-modal-header-background: #2e3842; $color-modal-header-background: #2e3842;

Loading…
Cancel
Save