AemieJ commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463515027
##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
width: auto;
}
- footer .footer .context a {
- font-size: 13.5px;
- }
-
- footer .footer .context a::after {
- width: 5px;
- height: 5px;
- }
-
footer .footer .footer-icons .brand-icon {
height: 1.5rem;
}
- footer .footer .show-menu {
- float: right;
- height: 40px;
- margin-top: -2.5rem;
- }
-
- footer .footer .hide-menu {
- float: right;
- height: 35px;
- margin-top: -2.5rem;
+ footer .footer input[type="checkbox"] {
+ display: inline;
+ position: relative;
+ top: 2rem;
+ left: 45vw;
+ width: 1.75rem;
+ height: 1.75rem;
+ transition: 0.2s;
}
- footer .footer .footer-menu {
- margin-top: 1rem;
+ footer .footer input[type="checkbox"]:checked {
+ transform: rotate(45deg);
}
- input[type="checkbox"] + label img.show-menu {
+ footer .footer input[type="checkbox"]::before {
+ background-color: var(--footer-background);
Review comment:
This line of code isn't required with the above suggestions I made.
##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
width: auto;
}
- footer .footer .context a {
- font-size: 13.5px;
- }
-
- footer .footer .context a::after {
- width: 5px;
- height: 5px;
- }
-
footer .footer .footer-icons .brand-icon {
height: 1.5rem;
}
- footer .footer .show-menu {
- float: right;
- height: 40px;
- margin-top: -2.5rem;
- }
-
- footer .footer .hide-menu {
- float: right;
- height: 35px;
- margin-top: -2.5rem;
+ footer .footer input[type="checkbox"] {
+ display: inline;
+ position: relative;
+ top: 2rem;
+ left: 45vw;
+ width: 1.75rem;
+ height: 1.75rem;
+ transition: 0.2s;
}
- footer .footer .footer-menu {
- margin-top: 1rem;
+ footer .footer input[type="checkbox"]:checked {
+ transform: rotate(45deg);
}
- input[type="checkbox"] + label img.show-menu {
+ footer .footer input[type="checkbox"]::before {
+ background-color: var(--footer-background);
+ content: '\FF0B';
+ position: absolute;
display: block;
+ height: 1.75rem;
+ width: 1.75rem;
+ line-height: 1.75rem;
+ font-size: 1.75rem;
+ transition: 0.2s;
}
- input[type="checkbox"] ~ label img.hide-menu,
- input[type="checkbox"] ~ div.footer-menu {
- display: none;
- }
-
- input[type="checkbox"]:checked + label img.show-menu {
- display: none;
- }
-
- input[type="checkbox"]:checked ~ label img.hide-menu,
- input[type="checkbox"]:checked ~ div.footer-menu {
- display: block;
+ footer .footer input[type="checkbox"]:checked::before {
+ transform: rotate(45deg);
Review comment:
`transform: rotate(90deg);`
This is 'cause even on clicking it rotates to a plus sign instead of a
cross. To make it cross, the following code achieves it.
##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
width: auto;
}
- footer .footer .context a {
- font-size: 13.5px;
- }
-
- footer .footer .context a::after {
- width: 5px;
- height: 5px;
- }
-
footer .footer .footer-icons .brand-icon {
height: 1.5rem;
}
- footer .footer .show-menu {
- float: right;
- height: 40px;
- margin-top: -2.5rem;
- }
-
- footer .footer .hide-menu {
- float: right;
- height: 35px;
- margin-top: -2.5rem;
+ footer .footer input[type="checkbox"] {
+ display: inline;
+ position: relative;
+ top: 2rem;
+ left: 45vw;
+ width: 1.75rem;
+ height: 1.75rem;
+ transition: 0.2s;
Review comment:
In addition to this, there is an outline around the box, to prevent this
following code achieves it:
````
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
outline: 0;
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
