You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.8 KiB
150 lines
3.8 KiB
// inline btn |
|
span.btn |
|
display: inline |
|
>a |
|
display: inline-block |
|
background: $color-theme |
|
color: $color-inner |
|
padding: 2px 4px 0px 4px |
|
margin: 2px |
|
border-radius: 2px |
|
i |
|
margin-right: 2px |
|
trans() |
|
&:hover |
|
color: $color-inner |
|
background: $color-hover |
|
&:not([href]) |
|
opacity: 0.5 |
|
&:hover |
|
cursor: not-allowed |
|
|
|
&.regular |
|
>a |
|
padding: 8px 16px 6px 16px |
|
i |
|
margin-right: 4px |
|
&.large |
|
>a |
|
padding: 10px 40px 8px 40px |
|
i |
|
margin-right: 8px |
|
&.center |
|
display: block |
|
text-align: center |
|
|
|
|
|
// btns |
|
div.btns |
|
margin: 0 -0.5 * $gap |
|
&,b,p,a |
|
font-size: $fontsize-code |
|
color: $color-p |
|
&,>p |
|
display: flex |
|
flex-wrap: wrap |
|
align-items: flex-start |
|
overflow: visible |
|
&.wide>p>a,&.wide>a |
|
padding-left: $gap*2 |
|
padding-right: $gap*2 |
|
&.fill>p>a,&.fill>a |
|
flex-grow: 1 |
|
width: auto |
|
&.around |
|
&,>p |
|
justify-content: space-around |
|
&.center |
|
&,>p |
|
justify-content: center |
|
&.grid2>p>a,&.grid2>a |
|
width: "calc(100%/2 - %s)" % $gap |
|
@media screen and (max-width: $device-laptop) |
|
width: "calc(100%/2 - %s)" % $gap |
|
@media screen and (max-width: $device-tablet) |
|
width: "calc(100%/2 - %s)" % $gap |
|
@media screen and (max-width: $device-mobile) |
|
width: "calc(100%/1 - %s)" % $gap |
|
&.grid3>p>a,&.grid3>a |
|
width: "calc(100%/3 - %s)" % $gap |
|
@media screen and (max-width: $device-laptop) |
|
width: "calc(100%/3 - %s)" % $gap |
|
@media screen and (max-width: $device-tablet) |
|
width: "calc(100%/3 - %s)" % $gap |
|
@media screen and (max-width: $device-mobile) |
|
width: "calc(100%/1 - %s)" % $gap |
|
&.grid4>p>a,&.grid4>a |
|
width: "calc(100%/4 - %s)" % $gap |
|
@media screen and (max-width: $device-laptop) |
|
width: "calc(100%/3 - %s)" % $gap |
|
@media screen and (max-width: $device-tablet) |
|
width: "calc(100%/3 - %s)" % $gap |
|
@media screen and (max-width: $device-mobile) |
|
width: "calc(100%/2 - %s)" % $gap |
|
&.grid5>p>a,&.grid5>a |
|
width: "calc(100%/5 - %s)" % $gap |
|
@media screen and (max-width: $device-laptop) |
|
width: "calc(100%/4 - %s)" % $gap |
|
@media screen and (max-width: $device-tablet) |
|
width: "calc(100%/3 - %s)" % $gap |
|
@media screen and (max-width: $device-mobile) |
|
width: "calc(100%/2 - %s)" % $gap |
|
a |
|
trans() |
|
margin: $gap * 0.5 |
|
margin-top: "calc(1.25 * %s + 32px)" % $gap |
|
min-width: 120px |
|
font-weight: bold |
|
display: flex |
|
justify-content: flex-start |
|
align-content: center |
|
align-items: center |
|
flex-direction: column |
|
padding: $gap * 0.5 |
|
text-align: center |
|
&>img:first-child, &>i:first-child |
|
trans() |
|
height: 64px |
|
width: 64px |
|
box-shadow: $boxshadow-card |
|
&.auto |
|
width: auto |
|
margin: $gap $gap * 0.5 $gap * 0.25 $gap * 0.5 |
|
margin-top: "calc(-1.25 * %s - 32px)" % $gap |
|
border: 2px solid $color-card |
|
background: $color-inner |
|
line-height: 60px |
|
font-size: 28px |
|
&>i:first-child |
|
color: $color-inner |
|
background: $color-theme |
|
background: $color-block |
|
border-radius: 4px |
|
p,b |
|
margin: .25em |
|
font-weight: normal |
|
line-height: 1.25 |
|
word-wrap: break-word |
|
b |
|
font-weight: bold |
|
line-height: 1.3 |
|
img |
|
margin: .4em auto |
|
&:not([href]) |
|
cursor: default |
|
color: inherit |
|
&[href]:hover |
|
background: alpha($color-hover, 15%) |
|
&,b |
|
color: $color-hover |
|
&>img:first-child, &>i:first-child |
|
transform: scale(1.1) translateY(-8px) |
|
box-shadow: $boxshadow-float |
|
&>i:first-child |
|
background:$color-hover |
|
&.circle>p a, &.circle a |
|
&>img:first-child, &>i:first-child |
|
border-radius: 32px |
|
&.rounded>p a, &.rounded a |
|
&>img:first-child, &>i:first-child |
|
border-radius: 16px
|
|
|