mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-19 15:48:04 +01:00
b4d5c634b3
* Close dropdowns when user clicks outside of them Fixes #5490 * Remove expandMenu and closeMenu directives and tests * Remove unnecessary HTML attributes
389 lines
11 KiB
Stylus
389 lines
11 KiB
Stylus
@require "./variables/screen-size.styl"
|
|
|
|
// Clearfix (http://css-tricks.com/snippets/css/clear-fix/)
|
|
$clearfix
|
|
&:after
|
|
content: ""
|
|
display: table
|
|
clear: both
|
|
// Text shadow mixin
|
|
hrpg-text-shadow-mixin($hrpg-text-shadow-base-color)
|
|
text-shadow:
|
|
-1px -1px 1px darken($hrpg-text-shadow-base-color,70%),
|
|
1px -1px 1px darken($hrpg-text-shadow-base-color,70%),
|
|
-1px 1px 1px darken($hrpg-text-shadow-base-color,70%),
|
|
1px 1px 1px darken($hrpg-text-shadow-base-color,70%);
|
|
// Buttons
|
|
// The !important declarations override Bootstrap
|
|
// buttons with the .highlight class pass highlight=true to this mixin
|
|
hrpg-button-color-mixin($hrpg-button-color, highlight=false)
|
|
// this case covers button elements with the highlight class
|
|
// like the subscribe button, for which the following selectors do not apply
|
|
if highlight==true
|
|
border-color: darken($color-button-highlight, 16.18%) !important
|
|
background-color: $color-button-highlight !important
|
|
&
|
|
color: darken($hrpg-button-color, 70%) !important
|
|
hrpg-anchor-button-color-mixin($color-button-highlight)
|
|
> a, > button
|
|
if highlight==true
|
|
hrpg-anchor-button-color-mixin($color-button-highlight)
|
|
else
|
|
hrpg-anchor-button-color-mixin($hrpg-button-color)
|
|
> a, > button, > input, textarea
|
|
color: darken($hrpg-button-color, 70%) !important
|
|
border-color: darken($hrpg-button-color, 16.18%) !important
|
|
> input, textarea
|
|
&:hover
|
|
border-color: darken($hrpg-button-color, 32.8%) !important
|
|
&:focus
|
|
border-color: darken($hrpg-button-color, 61.8%) !important;
|
|
outline: none;
|
|
> input + button, textarea + button
|
|
&:focus
|
|
border-color: darken($hrpg-button-color, 32.8%) !important;
|
|
background-color: darken($hrpg-button-color, 6.18%) !important;
|
|
outline: none;
|
|
&:active
|
|
background-color: darken($hrpg-button-color, 16.18%) !important;
|
|
> a:nth-of-type(2)
|
|
if highlight==true
|
|
border-left: 1px solid darken($color-button-highlight, 3.82%) !important
|
|
else
|
|
border-left: 1px solid darken($hrpg-button-color, 3.82%) !important
|
|
> div
|
|
@media screen and (min-width: $sm-min-screen-width)
|
|
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%)
|
|
.tooltip
|
|
border:0
|
|
&.active
|
|
a, button
|
|
background-color: darken($hrpg-button-color, 3.82%) !important
|
|
border-color: darken($hrpg-button-color, 50%) !important
|
|
&.active.filters-tags
|
|
a, button
|
|
background-color: darken($hrpg-button-color, 32.8%) !important
|
|
border-color: $hrpg-button-color !important
|
|
color: #fff !important;
|
|
span
|
|
color: #fff !important;
|
|
hrpg-anchor-button-color-mixin($hrpg-button-color)
|
|
background-color: $hrpg-button-color !important
|
|
&:active
|
|
background-color: darken($hrpg-button-color, 61.18%) !important
|
|
@media screen and (min-width: $sm-min-screen-width)
|
|
&:hover
|
|
background-color: darken($hrpg-button-color, 2.36%) !important
|
|
$hrpg-button-master
|
|
list-style: none
|
|
> a, > button, > input, label::after
|
|
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
|
|
> a, > button
|
|
&:active
|
|
background-color: #aaa !important
|
|
$hrpg-button
|
|
@extend $hrpg-button-master
|
|
> a, > button, > input, label::after
|
|
border: 1px solid #ccc !important
|
|
border-radius: 0.382em !important
|
|
.highlight
|
|
hrpg-button-color-mixin($color-toolbar, true)
|
|
$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:last-of-type
|
|
border-radius: 0em 0.382em 0.382em 0em !important
|
|
&.highlight
|
|
hrpg-button-color-mixin($color-toolbar, true)
|
|
// Input + Button
|
|
$hrpg-button-with-input
|
|
@extend $hrpg-button-master
|
|
border: none
|
|
border-radius: 0.382em
|
|
input, a, button, textarea
|
|
display: block
|
|
float: left
|
|
height: 2em
|
|
textarea
|
|
height: auto
|
|
input, textarea
|
|
border: 1px solid #ccc
|
|
border-radius: 0.382em 0em 0em 0.382em !important
|
|
padding-left: 0.618em
|
|
background-color: #fff !important
|
|
-webkit-appearance: none
|
|
-moz-appearance: none
|
|
appearance: none
|
|
box-shadow: none //remove red glow in Firefox
|
|
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
|
|
outline: none
|
|
//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,6.18%)
|
|
&.active
|
|
a
|
|
box-shadow: 0 0 0 1px darken($hrpg-button-bar-color,23.8%) !important
|
|
li:first-of-type
|
|
color: darken($hrpg-button-bar-color,50%);
|
|
//border-right-color: darken($hrpg-button-bar-color,16.18%)
|
|
|
|
$hrpg-button-bar
|
|
list-style: none
|
|
display: inline-block
|
|
border: 1px solid darken(#fff,16.18%)
|
|
border-radius: 0.382em
|
|
margin-bottom: 0.618em
|
|
@extend $clearfix
|
|
li
|
|
border-right: 1px solid darken(#fff,3.82%)
|
|
float:left
|
|
word-wrap: break-word
|
|
button
|
|
border: none
|
|
li:nth-of-type(2)
|
|
border-radius: 0.382em 0em 0em 0.382em
|
|
li:first-of-type
|
|
border-radius: 0.382em 0em 0em 0.382em
|
|
a, button
|
|
border-radius: 0.382em 0em 0em 0.382em
|
|
li:last-of-type
|
|
border-right: none
|
|
a, button
|
|
border-radius: 0em 0.382em 0.382em 0em
|
|
|
|
$hrpg-button-bar-with-heading
|
|
@extend $hrpg-button-bar
|
|
li:first-of-type
|
|
padding: 0.25em 0.618em
|
|
// Labels
|
|
hrpg-label-color-mixin($hrpg-label-color)
|
|
background-color: $hrpg-label-color !important
|
|
hrpg-text-shadow-mixin($hrpg-label-color)
|
|
$hrpg-label
|
|
padding: 0.382em 0.618em
|
|
border: 1px solid #fff
|
|
outline: 1px solid #999
|
|
background-color: #999
|
|
font-size: 0.8em
|
|
line-height: 1
|
|
font-weight: bold
|
|
letter-spacing: 0.0618em;
|
|
color: #fff
|
|
> a
|
|
color: #fff
|
|
text-shadow:
|
|
-1px -1px 1px #333,
|
|
1px -1px 1px #333,
|
|
-1px 1px 1px #333,
|
|
1px 1px 1px #333;
|
|
// Modals
|
|
$hrpg-modal
|
|
position: relative
|
|
$hrpg-modal-dropdown
|
|
@extend $hrpg-modal
|
|
> div
|
|
position: absolute
|
|
top: 2.9em
|
|
left: auto
|
|
padding: 0
|
|
min-width:110px
|
|
border-radius:4px
|
|
background-color:#fff
|
|
@media screen and (max-width: $xs-max-screen-width)
|
|
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: $sm-min-screen-width)
|
|
max-height: 320px
|
|
max-height: 62.8vh
|
|
li
|
|
width: 100%
|
|
@media screen and (max-width: $xs-max-screen-width)
|
|
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: $sm-min-screen-width)
|
|
div
|
|
right: 0px
|
|
> ul:first-child:before, > div:first-child:before, h4:before
|
|
right: .5em
|
|
$hrpg-modal-dropdown-right
|
|
@extend $hrpg-modal-dropdown
|
|
@media screen and (min-width: $sm-min-screen-width)
|
|
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: $xs-max-screen-width)
|
|
width: 96%
|
|
position: fixed
|
|
bottom:2%
|
|
right: 2%
|
|
border: none
|
|
@media screen and (min-width: $sm-min-screen-width)
|
|
display: none
|
|
// Submenus
|
|
$hrpg-submenu
|
|
@media screen and (min-width: $sm-min-screen-width)
|
|
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%)
|
|
> a, > a span
|
|
color: darken($hrpg-tag-color,61.8%)
|
|
&:before
|
|
border-right-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%)
|
|
@media screen and (min-width: $sm-min-screen-width)
|
|
&:hover, &:hover > a, &:hover > a span
|
|
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%)
|
|
// Tooltips wrapper for disabled elements
|
|
.disabled-tooltip-wrapper
|
|
display: inline-block
|
|
|
|
$hrpg-tag-master
|
|
display: inline-block
|
|
position: relative
|
|
left: -1em
|
|
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
|