Write a //
and indent every subsequent line by two spaces.
This is great for documenting BEM blocks!
//
An action button
================
Basic usage
-----------
<a href="/path" class="action">New booking</a>
<button class="action">Save</a>
<input type="submit" class="action">Save</a>
Colors
-------
<a href="/path" class="action is-red">Primary</a>
<a href="/path" class="action is-grey">Secondary</a>
Small inline buttons
--------------------
<p>
Record 123 <a href="/path" class="action is-inline">Delete</a>
</p>
@import environment
=tint($color)
background-color: $color
+hover
background-color: $color + 10
//box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2)
.action
+default-font
display: inline-block
padding: 7px 13px
color: white
border-radius: 3px
+font-size(16px)
vertical-align: middle
box-shadow: inset 0 20px 20px rgba(255, 255, 255, 0.1)
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)
border: 0
cursor: pointer
min-width: 70px
text-align: center
font-weight: bold
+uppercase
+tint($color-red)
margin-right: 0.15em
&:active
border: 0
outline: 0
&.is-gray
+tint(#666)
&.is-inline
padding: 4px 10px
min-width: 0
+font-size(12px)
//
An action button
================
Basic usage
-----------
<a href="/path" class="action">New booking</a>
<button class="action">Save</a>
<input type="submit" class="action">Save</a>
Colors
-------
<a href="/path" class="action is-red">Primary</a>
<a href="/path" class="action is-grey">Secondary</a>
Small inline buttons
--------------------
<p>
Record 123 <a href="/path" class="action is-inline">Delete</a>
</p>
@import environment
=tint($color)
background-color: $color
+hover
background-color: $color + 10
//box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2)
.action
+default-font
display: inline-block
padding: 7px 13px
color: white
border-radius: 3px
+font-size(16px)
vertical-align: middle
box-shadow: inset 0 20px 20px rgba(255, 255, 255, 0.1)
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)
border: 0
cursor: pointer
min-width: 70px
text-align: center
font-weight: bold
+uppercase
+tint($color-red)
margin-right: 0.15em
&:active
border: 0
outline: 0
&.is-gray
+tint(#666)
&.is-inline
padding: 4px 10px
min-width: 0
+font-size(12px)
Posted by Henning Koch to makandra dev (2015-03-17 07:51)