fleet/website/assets/styles/mixins-and-variables/buttons.less
Eric 1affb341e3
Website: Add calls to action to /reports/state-of-device-management (#6148)
* Website: updated animated button mixin, add calls to action to report

* added final hrefs

* Update website/assets/styles/pages/reports/state-of-device-management.less

Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>

Co-authored-by: Tim Kern <tim@fleetdm.com>
Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
2022-06-17 16:56:25 -05:00

87 lines
2.1 KiB
Plaintext
Vendored

.btn-reset() {
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
background: transparent;
font-family: inherit;
cursor: pointer;
&:focus {
border-image: none;
outline: none;
}
}
.btn-animated-arrow-red() {
padding-right: 40px;
cursor: pointer;
position: relative;
width: auto;
font-weight: bold;
user-select: none;
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
&:before {
content: url('/images/arrow-right-red-16x16@2x.png');
transform: scale(0.5);
position: absolute;
top: 12px;
left: 80%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity: 0; */
}
&:hover:before {
left: 82%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity:1; */
}
}
.btn-animated-arrow-white() {
padding-right: 40px;
cursor: pointer;
position: relative;
width: auto;
color: #FFF;
font-weight: bold;
user-select: none;
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
&:before {
content: url('/images/arrow-right-white-16x16@2x.png');
transform: scale(0.5);
position: absolute;
top: 10px;
left: 80%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity: 0; */
}
&:hover:before {
left: 82%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity:1; */
}
}