Instantly share code, notes, and snippets.
Last active
July 24, 2016 18:12
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save belozer/4171da6fd247ad2ff9afd30f73862a52 to your computer and use it in GitHub Desktop.
with pobem
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
block(button).mod(theme islands) { | |
font-family: Arial, Helvetica, sans-serif; | |
position: relative; | |
display: inline-block; | |
margin: 0; | |
padding: 0; | |
user-select: none; | |
color: #000; | |
border: 0; | |
border-radius: 3px; | |
outline: 0; | |
background: rgba(0, 0, 0, 0.2); | |
text-align: center; | |
white-space: nowrap; | |
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
&::-moz-focus-inner | |
{ | |
padding: 0; | |
border: 0; | |
} | |
elem(text) | |
{ | |
position: relative; | |
display: inline-block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
vertical-align: top; | |
} | |
block(icon) | |
{ | |
position: relative; | |
} | |
mod(type link) | |
{ | |
text-decoration: none; | |
} | |
// Decorative element (inner background) | |
&:before | |
{ | |
position: absolute; | |
top: 1px; | |
right: 1px; | |
bottom: 1px; | |
left: 1px; | |
content: ''; | |
border-radius: 2px; | |
background: #fff; | |
} | |
mod(hovered) | |
{ | |
cursor: pointer; | |
background: rgba(0, 0, 0, 0.3); | |
} | |
mod(focused-hard) | |
{ | |
z-index: 1; | |
background: rgba(178, 142, 0, 0.6); | |
box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00; | |
} | |
mod(pressed):before | |
{ | |
background: #f6f5f3; | |
} | |
mod(checked) | |
{ | |
background: rgba(153, 122, 0, 0.5); | |
&:before | |
{ | |
background: #ffeba0; | |
} | |
mod(pressed) | |
{ | |
background: rgba(129, 103, 0, 0.6); | |
&:before | |
{ | |
background: #fee481; | |
} | |
} | |
mod(hovered) | |
{ | |
background: rgba(129, 103, 0, 0.6); | |
} | |
} | |
mod(view plain) | |
{ | |
background: none; | |
&:before | |
{ | |
display: none; | |
} | |
mod(pressed) | |
{ | |
background: #f6f5f3; | |
} | |
mod(checked) | |
{ | |
background: #ffeba0; | |
mod(pressed) | |
{ | |
background: #fee481; | |
} | |
} | |
mod(disabled) | |
{ | |
background: none; | |
} | |
} | |
mod(view action) | |
{ | |
background: rgba(191, 153, 0, 0.8); | |
&:before | |
{ | |
background: #ffdb4d; | |
} | |
mod(pressed):before | |
{ | |
background: #fc0; | |
} | |
mod(hovered) | |
{ | |
background: rgba(159, 127, 0, 0.8); | |
} | |
} | |
mod(view pseudo) | |
{ | |
overflow: hidden; | |
background: none; | |
&:before | |
{ | |
background: none; | |
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); | |
} | |
mod(hovered):before | |
{ | |
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); | |
} | |
mod(focused-hard):before | |
{ | |
box-shadow: none; | |
} | |
mod(pressed):before | |
{ | |
background: rgba(0, 0, 0, 0.05); | |
} | |
mod(checked) | |
{ | |
&:before | |
{ | |
background: #ffeba0; | |
box-shadow: 0 0 0 1px rgba(153, 122, 0, 0.5); | |
} | |
mod(hovered):before | |
{ | |
box-shadow: 0 0 0 1px rgba(129, 103, 0, 0.6); | |
} | |
mod(pressed):before | |
{ | |
background: #fee481; | |
box-shadow: 0 0 0 1px rgba(129, 103, 0, 0.6); | |
} | |
} | |
} | |
mod(disabled) | |
{ | |
background: rgba(0, 0, 0, 0.08); | |
&:before | |
{ | |
display: none; | |
} | |
mod(checked):before | |
{ | |
display: block; | |
background: #ffeba0; | |
} | |
elem(text) | |
{ | |
color: #aaa; | |
} | |
block(icon) | |
{ | |
opacity: 0.3; | |
} | |
} | |
mod(size s) | |
{ | |
font-size: 13px; | |
line-height: 24px; | |
block(icon) | |
{ | |
width: 24px; | |
} | |
elem(text) | |
{ | |
margin: 0 10px; | |
} | |
} | |
mod(size m) | |
{ | |
font-size: 13px; | |
line-height: 28px; | |
block(icon) | |
{ | |
width: 28px; | |
} | |
elem(text) | |
{ | |
margin: 0 13px; | |
} | |
} | |
mod(size l) | |
{ | |
font-size: 15px; | |
line-height: 32px; | |
block(icon) | |
{ | |
width: 32px; | |
} | |
elem(text) | |
{ | |
margin: 0 15px; | |
} | |
} | |
mod(size xl) | |
{ | |
font-size: 18px; | |
line-height: 38px; | |
block(icon) | |
{ | |
width: 38px; | |
} | |
elem(text) | |
{ | |
margin: 0 18px; | |
} | |
} | |
block(icon) + block(button).elem(text) | |
{ | |
margin-left: 0; | |
} | |
elem(text):not(:last-child) | |
{ | |
margin-right: 0; | |
} | |
} | |
block(control-group) | |
{ | |
block(button).mod(checked) + block(button).mod(theme islands):before, | |
block(radio).mod(checked) + block(radio) block(button).mod(theme islands):before, | |
block(checkbox).mod(checked) + block(checkbox) block(button).mod(theme islands):before | |
{ | |
left: 0; | |
} | |
block(button).mod(theme islands) { | |
border-radius: 0; | |
&:before | |
{ | |
right: 0; | |
border-radius: 0; | |
} | |
mod(checked), | |
mod(focused-hard).button // Weight of selector should be greater for focused button (#1170) | |
{ | |
&:before | |
{ | |
right: 1px; | |
} | |
} | |
mod(focused-hard).button:before | |
{ | |
left: 1px; | |
} | |
} | |
> block(button).mod(theme islands):first-child, | |
> :first-child block(button).mod(theme islands) | |
{ | |
border-radius: 3px 0 0 3px; | |
&:before | |
{ | |
border-radius: 2px 0 0 2px; | |
} | |
} | |
> block(button).mod(theme islands):last-child, | |
> :last-child block(button).mod(theme islands) | |
{ | |
border-radius: 0 3px 3px 0; | |
&:before | |
{ | |
border-radius: 0 2px 2px 0; | |
right: 1px; | |
} | |
} | |
> :only-child block(button).mod(theme islands) | |
{ | |
border-radius: 3px; | |
&:before | |
{ | |
border-radius: 2px; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment