layout changes
Said Gedik
parent
ea37c02fbd
commit
894ef0dbaf
|
|
@ -10,6 +10,7 @@
|
|||
border-right: 1px rgba(0, 0, 0, 0.181) solid;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.head {
|
||||
color: rgba(41, 46, 50, 0.8);
|
||||
padding-left: 10px;
|
||||
|
|
@ -18,13 +19,11 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
|
||||
height: 60px;
|
||||
margin-bottom: 5px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
.head {
|
||||
overflow: hidden;
|
||||
/* Hides anything that overflows the boundary of this element */
|
||||
|
|
@ -107,15 +106,17 @@
|
|||
}
|
||||
|
||||
.restartButton {
|
||||
width: 60px;
|
||||
background-color: white;
|
||||
border: none;
|
||||
border: solid 1px rgba(94, 94, 94, 0.18);
|
||||
color: #000000a7;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.restartButton mat-icon {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.restartButton:hover {
|
||||
color: #000000;
|
||||
background-color: rgb(240, 240, 240);
|
||||
|
|
@ -188,7 +189,7 @@
|
|||
.restartButton mat-icon {
|
||||
transform: scale(0.9);
|
||||
margin-right: -2px;
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.detailsButton {
|
||||
|
|
@ -315,9 +316,10 @@
|
|||
}
|
||||
|
||||
.dateButton mat-icon {
|
||||
transform: scale(0.8);
|
||||
transform: scale(0.7);
|
||||
opacity: 0.75;
|
||||
margin-right: 0px;
|
||||
margin-right: 1px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.dateButton:hover>mat-icon {
|
||||
|
|
@ -328,59 +330,62 @@
|
|||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.editButton {
|
||||
height: 59px;
|
||||
width: 59px;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
border: none;
|
||||
border-top-right-radius: 4px;
|
||||
margin-right: 15px;
|
||||
.editButton{
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border: solid 1px rgba(0, 0, 0, 0.124);
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
gap: 3px;
|
||||
transition: background-color 0.3s ease; /* Add this line for smooth transition */
|
||||
}
|
||||
|
||||
.editButton:hover {
|
||||
height: 59px;
|
||||
width: 59px;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
border-top-right-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.editButton:checked {
|
||||
height: 59px;
|
||||
width: 59px;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
border-top-right-radius: 4px;
|
||||
background-color: red;
|
||||
|
||||
.editButton mat-icon{
|
||||
transform: scale(0.7);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.deleteButton mat-icon {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.editButton:hover>mat-icon, .deleteButton:hover>mat-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.deleteButton {
|
||||
height: 59px;
|
||||
width: 59px;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
border-width: 1px;
|
||||
border: none;
|
||||
border-top-right-radius: 4px;
|
||||
margin-right: 15px;
|
||||
margin-left: -15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border: solid 1px rgba(0, 0, 0, 0.124);
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
gap: 3px;
|
||||
transition: background-color 0.3s ease; /* Add this line for smooth transition */
|
||||
}
|
||||
|
||||
.deleteButton:hover {
|
||||
height: 59px;
|
||||
width: 59px;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
border-width: 2px;
|
||||
border-top-right-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.deleteButton:checked {
|
||||
height: 59px;
|
||||
width: 59px;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
border-width: 2px;
|
||||
border-top-right-radius: 4px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/* .datePickerContainer{
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="head" style="">
|
||||
<div class="left" style="display: flex; align-items: center; gap: 15px; height: 100%;">
|
||||
<div class="left" style="display: flex; align-items: center; gap: 8px; height: 100%;">
|
||||
<h2>W&I Kalender</h2>
|
||||
<div class="splitter"></div>
|
||||
<!-- Preset Picker -->
|
||||
<div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px; font-size: 14px;">
|
||||
<div appearance="fill" style="width: 200px; padding-left: 15px; padding-top: 3px; font-size: 14px;">
|
||||
<mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
|
||||
<mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
|
||||
<mat-option *ngFor="let preset of group.presets" [value]="preset">
|
||||
|
|
|
|||
Loading…
Reference in New Issue