TASK-144 dropdown button group styling #104
Conversation
| .btn-dropdown { | ||
| border-radius: 0px; | ||
| &:hover { | ||
| cursor: pointer; | ||
| font-weight: 600; | ||
| box-shadow: 0px 0px; | ||
| } | ||
| float: left; | ||
| clear: left; | ||
| padding: 5px 7px 5px; | ||
| line-height: 20px; | ||
| } |
There was a problem hiding this comment.
Moim zdaniem, lepiej jest przenieść to bezpośrednio do klasy .dropdown-buttons-container. To ma taką zaletę, że te style są przeznaczone tylko do dropdowna na co wskazuje nazwa btn-dropdown, więc było by fajnie zrobić tak, żeby nie można było tego użyć w jakimś innym miejscu, żeby ktoś przez przypadek tego nie użył. Chyba że uważasz, że można by użyć je też w innych miejscach. To w takim razie, proponowałbym zmienić nazwę tej klasy na coś bardziej generyczne ;)
PS.
To o czym mówię wyglądało by jakoś tak:
.dropdown-buttons-container {
overflow: hidden;
border-bottom-left-radius: $btn-border-radius;
border-bottom-right-radius: $btn-border-radius;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
box-shadow: 0 2.8px 2.2px $gray-400, 0 6.7px 5.3px $gray-400;
position: relative;
top: -20px;
padding-bottom: 10px;
padding-top: 25px;
button {
border-radius: 0px;
&:hover {
cursor: pointer;
font-weight: 600;
box-shadow: 0px 0px;
}
float: left;
clear: left;
padding: 5px 7px 5px;
line-height: 20px;
}
}Zauważ, ze podalem button, a nie btn-dropdown. Zrobiłem tak, bo tego całkiem wystarczy - css nadpisze wszystkie style co były używane wcześniej i użyje tych co są tutaj.
| line-height: 20px; | ||
| } | ||
|
|
||
| .dropdown-buttons-container { |
There was a problem hiding this comment.
Ja bym wyniósł to do osobnego pliku, ponieważ ten dropdown raczej nie jest powiązany z przyciskami.
Wtedy można by było go nazwać jakoś w stylu _dropdown.scss.
I potrzeba będzie też zaimportować ten plik w style-all.scss, podobnie jak to jest robione tutaj
https://github.com/Project-Summer-AI-Lab-Glider/nurse-scheduling-problem-frontend/blob/445796a22ff0f270917e8fe0491e48e185fc5874/src/assets/styles/styles-all.scss#L23-L34
There was a problem hiding this comment.
Widzę, ze celujesz w naszego eksperta z cssów :D
Bardzo fajnie to wygląda!
Jedyna rzecz - brakuje tła na dropdownie przez co trochę nieładnie to wygląda.
I też jest problem z tym, ze przyciski nie zajmują całej szerokości kontenera co może skutkować tym, ze to będzie nieintuicyjne w użyciu
src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx
Show resolved
Hide resolved
src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx
Show resolved
Hide resolved
| @@ -33,16 +33,20 @@ export default function DropdownButtonsComponent({ buttons, mainLabel }: Options | |||
| <ArrowDropDownIcon /> | |||
| </Button> | |||
| <Popper open={open} anchorEl={anchorRef.current}> | |||
| <div className="display-main-button"> | |||
| <Button variant="primary"> | |||
There was a problem hiding this comment.
Myślę, że przydałaby się możliwość ustawienia typu tego przycisku
No description provided.