mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-02 07:49:39 +00:00
1ff77932ff
**filters.styl** * restyle tags and filter controls using global styles **filter.jade** * add button to toggle visibility * change controls from icons to text **global-modules** * add new extends and mixins for button bar and tags **global-colors.styl** * add tag colours
302 lines
8.3 KiB
Stylus
302 lines
8.3 KiB
Stylus
// Buttons
|
|
// The !important declarations override Bootstrap
|
|
hrpg-button-color-mixin($hrpg-button-color)
|
|
> a, > button
|
|
background-color: $hrpg-button-color !important
|
|
&:active
|
|
background-color: darken($hrpg-button-color, 10%) !important
|
|
@media screen and (min-width:768px)
|
|
&:hover
|
|
background-color: darken($hrpg-button-color, 2.36%) !important
|
|
> a, > button, > input
|
|
color: darken($hrpg-button-color, 70%) !important
|
|
border-color: darken($hrpg-button-color, 16.18%) !important
|
|
> a:nth-of-type(2)
|
|
border-left: 1px solid darken($hrpg-button-color, 3.82%) !important
|
|
> div
|
|
@media screen and (min-width:768px)
|
|
border:1px solid darken($hrpg-button-color, 16.18%)
|
|
h4
|
|
color: darken($hrpg-button-color, 61.8%)
|
|
background-color: $hrpg-button-color
|
|
border-color: darken($hrpg-button-color, 16.18%)
|
|
> ul:first-child:before, > div:first-child:before
|
|
background-color: #fff
|
|
border-color: darken($hrpg-button-color, 16.18%)
|
|
h4:before
|
|
background-color: $hrpg-button-color
|
|
border-color: darken($hrpg-button-color, 16.18%)
|
|
ul
|
|
border-color: $hrpg-button-color
|
|
a, a:link, a:visited
|
|
color: darken($hrpg-button-color, 70%) !important
|
|
.glyphicon
|
|
color:darken($hrpg-button-color, 60%)
|
|
&.active
|
|
a, button
|
|
background-color: darken($hrpg-button-color, 3.82%) !important
|
|
border-color: darken($hrpg-button-color, 38.2%) !important
|
|
$hrpg-button-master
|
|
list-style: none
|
|
> a, > button, > input
|
|
display: inline-block !important
|
|
padding: 0.25em 0.5em !important
|
|
text-decoration:none
|
|
font-size: 1em
|
|
color:#222
|
|
background-color: transparent
|
|
.glyphicon
|
|
position: relative
|
|
top: 0.132em
|
|
&:active
|
|
background-color: #aaa !important
|
|
@media screen and (min-width:768px)
|
|
&:hover
|
|
background-color: #eee !important
|
|
$hrpg-button
|
|
@extend $hrpg-button-master
|
|
> a, > button
|
|
border: 1px solid #ccc !important
|
|
border-radius: 0.382em !important
|
|
$hrpg-button-call-to-action
|
|
@extend $hrpg-button
|
|
hrpg-button-color-mixin($color-button-style-one)
|
|
$hrpg-button-toggle
|
|
@extend $hrpg-button-master
|
|
border: 1px solid #ccc !important
|
|
border-radius: 0.382em !important
|
|
> a:first-of-type
|
|
border-radius: 0.382em 0em 0em 0.382em !important
|
|
> a:nth-of-type(2)
|
|
border-radius: 0em 0.382em 0.382em 0em !important
|
|
// Input + Button
|
|
$hrpg-button-with-input
|
|
@extend $hrpg-button-master
|
|
border: none
|
|
border-radius: 0.382em
|
|
input, a, button
|
|
display: block
|
|
float: left
|
|
height: 2em
|
|
input
|
|
border: 1px solid #ccc
|
|
border-radius: 0.382em 0em 0em 0.382em
|
|
padding-left: 0.618em
|
|
&:hover
|
|
background-color: #f5f5f5 !important
|
|
a, button
|
|
border-width: 1px
|
|
border-color: #ccc
|
|
border-top-style: solid
|
|
border-right-style: solid
|
|
border-bottom-style: solid
|
|
border-left: none
|
|
border-radius: 0em 0.382em 0.382em 0em
|
|
//Button bar
|
|
hrpg-button-bar-mixin($hrpg-button-bar-color)
|
|
border-color: darken($hrpg-button-bar-color, 16.18)
|
|
li
|
|
border-right-color: darken($hrpg-button-bar-color,3.82%)
|
|
li:first-of-type
|
|
background-color: darken($hrpg-button-bar-color,6.18%)
|
|
color: darken($hrpg-button-bar-color,70%)
|
|
border-right-color: darken($hrpg-button-bar-color,16.18%)
|
|
$hrpg-button-bar
|
|
border: 1px solid darken(#fff,16.18%)
|
|
border-radius: 0.382em
|
|
margin-bottom: 0.618em
|
|
li
|
|
border-right: 1px solid darken(#fff,3.82%)
|
|
li:first-of-type
|
|
color: darken(#fff,61.8%)
|
|
padding: 0.25em 0.5em
|
|
border-radius: 0.382em 0em 0em 0.382em
|
|
border-right: 1px solid darken(#fff,6.18%)
|
|
li:last-of-type
|
|
border-right: none
|
|
a
|
|
border-radius: 0em 0.382em 0.382em 0em
|
|
// Labels
|
|
hrpg-label-color-mixin($hrpg-label-color)
|
|
color: lighten($hrpg-label-color, 90%) !important
|
|
background-color: $hrpg-label-color !important
|
|
border-color: darken($hrpg-label-color, 16.18%) !important
|
|
> a
|
|
color: lighten($hrpg-label-color, 90%) !important
|
|
$hrpg-label
|
|
padding: 0.382em 0.618em
|
|
border-width: 1px
|
|
border-style: solid
|
|
border-radius: 0.382em
|
|
font-size: 0.8em
|
|
line-height: 1
|
|
color: #fff
|
|
// Modals
|
|
$hrpg-modal
|
|
position: relative
|
|
$hrpg-modal-dropdown
|
|
@extend $hrpg-modal
|
|
> div
|
|
position: absolute
|
|
top: 3em
|
|
min-width:110px
|
|
border-radius:4px
|
|
background-color:#fff
|
|
@media screen and (max-width:768px)
|
|
position:fixed
|
|
z-index: 1000
|
|
top: 2%
|
|
left: 2%
|
|
width: 96%
|
|
height: 96%
|
|
box-shadow: 0 0 0 30px rgba(0,0,0,0.63)
|
|
h4:before
|
|
display: none
|
|
> div
|
|
height: 80%
|
|
overflow: auto
|
|
ul:last-child
|
|
padding-bottom: 2.618em
|
|
h4
|
|
font-size: 1.2em
|
|
margin:0px
|
|
border-bottom-width: 1px
|
|
border-bottom-style: solid
|
|
border-radius:0.2em 0.2em 0em 0em
|
|
padding: 0.618em 0.8333em
|
|
ul
|
|
padding: 0.382em 0em
|
|
list-style: none
|
|
overflow: auto
|
|
border-top-width: 1px
|
|
border-top-style: solid
|
|
@media screen and (min-width:768px)
|
|
max-height: 320px
|
|
max-height: 62.8vh
|
|
li
|
|
width: 100%
|
|
@media screen and (max-width:768px)
|
|
width: auto
|
|
a
|
|
display: inline-block
|
|
width: 100%
|
|
height: 100%
|
|
padding: 0.618em 1em
|
|
ul:first-of-type
|
|
border: none
|
|
> ul:first-child:before, > div:first-child:before, h4:before
|
|
content:''
|
|
position:absolute
|
|
top:-9px
|
|
z-index:2
|
|
width:16px
|
|
height:16px
|
|
border-top-width: 1px
|
|
border-top-style: solid
|
|
border-left-width: 1px
|
|
border-left-style: solid
|
|
transform: rotate(45deg)
|
|
$hrpg-modal-dropdown-left
|
|
@extend $hrpg-modal-dropdown
|
|
@media screen and (min-width:768px)
|
|
div
|
|
right: 0px
|
|
> ul:first-child:before, > div:first-child:before, h4:before
|
|
right: 1em
|
|
$hrpg-modal-dropdown-right
|
|
@extend $hrpg-modal-dropdown
|
|
@media screen and (min-width:768px)
|
|
div
|
|
left: 0px
|
|
> ul:first-child:before, > div:first-child:before, h4:before
|
|
left: 1em
|
|
$hrpg-modal-controls
|
|
text-align: right
|
|
border-radius:0px 0px 0.382em 0.382em
|
|
background-color: #fff
|
|
li
|
|
margin-right: 0.618em
|
|
margin-bottom: 0.382em
|
|
display: inline-block
|
|
@media screen and (max-width:768px)
|
|
width: 96%
|
|
position: fixed
|
|
bottom:2%
|
|
right: 2%
|
|
border: none
|
|
@media screen and (min-width:768px)
|
|
display: none
|
|
// Submenus
|
|
$hrpg-submenu
|
|
@media screen and (min-width:768px)
|
|
padding: 1em 1em 0em 1em
|
|
margin-bottom: 1.618em
|
|
li
|
|
display: inline-block
|
|
margin-right: 1em
|
|
margin-bottom: 1em
|
|
// Tags
|
|
hrpg-tag-color-mixin($hrpg-tag-color)
|
|
background-color: darken($hrpg-tag-color,3.82%)
|
|
&.active
|
|
> a, > a span
|
|
color: darken($hrpg-tag-color,3.82%)
|
|
background-color: darken($hrpg-tag-color,32.8%)
|
|
&:before
|
|
border-right-color: darken($hrpg-tag-color,32.8%)
|
|
> a, > a span
|
|
color: darken($hrpg-tag-color,61.8%)
|
|
&:before
|
|
border-right-color: darken($hrpg-tag-color,3.82%)
|
|
@media screen and (min-width:768px)
|
|
&:hover, &:hover > a, &:hover > a span
|
|
//color: darken($hrpg-tag-color,3.82%)
|
|
background-color: darken($hrpg-tag-color,16.8%)
|
|
&:hover > a:before
|
|
border-right-color: darken($hrpg-tag-color,16.18%)
|
|
&.active:hover, &.active:hover > a, &.active:hover > a span
|
|
color: darken($hrpg-tag-color,3.82%)
|
|
background-color: darken($hrpg-tag-color,32.8%)
|
|
&.active:hover > a:before
|
|
border-right-color: darken($hrpg-tag-color,32.8%)
|
|
|
|
$hrpg-tag-master
|
|
display: inline-block
|
|
position: relative
|
|
width: auto
|
|
margin-left: 1.618em
|
|
&.active > a
|
|
color: darken(#fff,3.82%)
|
|
background-color: darken(#fff,32.8%)
|
|
&:before
|
|
border-right-color: darken(#fff,32.8%)
|
|
a
|
|
display: inline-block
|
|
min-height: 2em
|
|
padding: 0.45em 0.618em 0.45em 0.382em
|
|
text-decoration:none
|
|
font-size: 1em
|
|
line-height: 1
|
|
color:#222
|
|
background-color: transparent
|
|
.glyphicon-bullhorn
|
|
margin-right: 0.618em
|
|
font-size: 0.8em
|
|
padding: 0;
|
|
&:before, &:after
|
|
display: block
|
|
content:'';
|
|
position: absolute
|
|
top: 0
|
|
left: -1.5em
|
|
&:before
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 1em solid transparent
|
|
border-right: 1.5em solid darken(#fff,3.82%)
|
|
border-bottom: 1em solid transparent
|
|
&:after
|
|
width: 0.75em;
|
|
min-height:2em;
|
|
background-color: #fff
|
|
z-index: 2
|