mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-18 15:17:25 +01:00
2b80931202
* handle medium screen width on home columns * rename new-row helper used on home screen for todo column flow
69 lines
1.4 KiB
Stylus
69 lines
1.4 KiB
Stylus
// Hide from both screenreaders and browsers: h5bp.com/u
|
|
.hidden
|
|
display: none !important
|
|
visibility: hidden
|
|
|
|
|
|
// Hide only visually, but have it available for screenreaders: h5bp.com/v
|
|
.visuallyhidden
|
|
border: 0
|
|
clip: rect(0 0 0 0)
|
|
height: 1px
|
|
margin: -1px
|
|
overflow: hidden
|
|
padding: 0
|
|
position: absolute
|
|
width: 1px
|
|
|
|
|
|
// Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p
|
|
.visuallyhidden.focusable:focus
|
|
clip: auto
|
|
height: auto
|
|
margin: 0
|
|
overflow: visible
|
|
position: static
|
|
width: auto
|
|
|
|
|
|
// Hide visually and from screenreaders, but maintain layout
|
|
.invisible
|
|
visibility: hidden
|
|
|
|
.transparent
|
|
opacity: 0.5
|
|
|
|
// Allow block element to be centered
|
|
.col-centered
|
|
margin-left: auto
|
|
margin-right: auto
|
|
|
|
// .pull-right & .pull-left for specific screen sizes
|
|
// Follows conventions for col-x-SIZE classes
|
|
|
|
@media (min-width: $sm-min-screen-width)
|
|
.pull-left-sm
|
|
float: left
|
|
|
|
.pull-right-sm
|
|
float: right
|
|
|
|
@media (min-width: $md-min-screen-width)
|
|
.pull-left-md
|
|
float: left
|
|
|
|
.pull-right-md
|
|
float: right
|
|
|
|
@media (min-width: $lg-min-screen-width)
|
|
.pull-left-lg
|
|
float: left
|
|
|
|
.pull-right-lg
|
|
float: right
|
|
|
|
// Making sure that the To-Dos tab always flow right on small screens.
|
|
@media (min-width: $sm-min-screen-width) and (max-width: $sm-max-screen-width)
|
|
.new-row-sm
|
|
clear: left
|