improve appendix marker alignment

improve appendix marker alignment

/*
Typograhy styles
 ==========================================================================
typography.less contains both global and application specific typography */

/*
 Global Typography
 ========================================================================== */

/*  Body Font
    ------------

Georgia, 1em, black

*/

body {
    color: @black;
    font-family: @body-font;
    font-size: 1em;
    /*line-height: 1.625;*/ /* 26px */
    /*line-height: 1.375;*/ /*22px*/
    line-height: 1.5; /*24px*/
}

strong {
    .avenir-next-demi;
}

/*  Default Headings
    --------

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

 */

h1,
h2,
h3{
    .avenir-next-demi;
    margin-bottom: 0;
}

h4,
h5,
h6 {
    .avenir-next-demi;
    margin-bottom: 0;
}

h1 {
    font-size: 2.125em;
}

h2 {
    font-size: 1.625em;
}

h3 {
    font-size: 1.375em;
}

h4 {
    font-size: 1em;
    text-transform: uppercase;
}

h5 {
    font-size: 0.875em;
    text-transform: uppercase;
}

h6 {
    font-size: 0.875em;
    margin: 1em 0 0 0;
}

/*  Sub Headings
    ------------

Sub Heading

*/

.sub-text {
    .avenir-next;
}

.small-header {
    font-size: 1.125em;
}

.xsmall-header {
    font-size: 1em;
}

.light-header {
    .avenir-next;
}

.upper-header {
    text-transform: uppercase;
}

.sentence-header {
    text-transform: none;
}

.effective-date {
    font-size: .875em;
    padding-right: 15px;
}

/*  Lists
    ------

List item

List item

List item

*/

ul li {
  list-style: none;
}

.bullet li {
    list-style: disc;
}

li {
    margin-top: 1em; /*16px*/
}

address {
    font-style: normal;
}

ol[type="no-marker"] {
    list-style-type: none;
    padding-left: 0;
}

/*
 Link Styles
 ========================================================================== */

a:link,
a:visited {
    color: @pacific;
    text-decoration: none;
    border: none;
    -webkit-transition: .1s;
    -moz-transition: .1s;
    transition: .1s;
}

/*  Internal Links
    ---------------
    internal contents
*/

.internal,
.internal:link,
.internal:visited {
    color: @black;
    text-decoration: none;
    border-bottom: 1px solid @link_blue;
}

.internal:hover,
.internal:active,
.internal:focus {
    background-color: #cde3f1;
}

/*  External Links
    --------------
    some other website
*/

.external:after{
    .cf-icon;
    content: "\e610";
    padding: 0 0 0 5px;
    font-size: 16px;
}

.phone:link,
.phone:visited {
    color: @pacific;
}

.phone:before {
    .cf-icon;
    content: "\e306";
    margin-right: 6px;
}

.mail:before {
    .cf-icon;
    content: "\e302";
    margin-right: 6px;
}

.go:after {
   .cf-icon;
    content: "\e002";
    font-size: 0.75em;
    margin-left: 6px;
    vertical-align: middle;
}

.pdf:after {
   .cf-icon;
    content: "\e402";
    margin-left: 6px;
}

.external:hover,
.mail:hover,
.go:hover,
.pdf:hover,
.standard:hover,
.what:hover,
.external:active,
.mail:active,
.go:active,
.pdf:active,
.standard:active,
.what:active,
.external:focus,
.mail:focus,
.go:focus,
.pdf:focus
.standard:focus,
.what:focus, {
    border-bottom: 1px solid;
}

/*  Definition Links
    --------------
    defined term
*/

.definition,
.definition:link,
.definition:visited {
    color: @black;
    text-decoration: none;
    border-bottom: 1px solid @light_field;
}

.definition:hover,
.definition:active {
    border-bottom: 1px solid @medium_gray;
    background-color: @grey;
}

.definition.active {
    background-color: @grey;
}

.inline-interpretation {
    .definition:link,
    .definition:visited {
         border-bottom: 1px solid @medium_gray;
    }
}

/* button styles */

.btn {
    .avenir-next;
    display: inline-block;
    box-sizing: border-box;
    padding: .57142857em 1em;
    border: 0;
    border-radius: .28571429em;
    margin: 0;
    vertical-align: middle;
    font-size: .875em;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .1s;
    -webkit-appearance: none;
}

.btn, .btn:link, .btn:visited {
    background-color: #0072ce;
    color: #fff;
}

.btn.hover, .btn:hover {
    background-color: #328ed8;
}

.btn.focus, .btn:focus {
    background-color: #328ed8;
    outline: #0072ce dotted 1px;
    outline-offset: 1px;
}

/*
 Regulation Headings
 ========================================================================== */

/*  Top Level
    -----------

Top Level Reg Heading

*/

.section-number,
.appendix-heading,
.supplement-section h3 {
    font-size: 1.8125em; /* 29px / 16 */
    .avenir-next-demi;
    line-height: 1.25;
    letter-spacing: 1px;
}

.section-number {
    text-indent: -.94em; /* outdent the § symbol */
}

/* for a header with no following content */

.empty-header {
    margin-bottom: 2em;
}

/*  Sub Headings
    -----------

Top Level Reg Heading

*/

.appendix-subheading,
.interp-subheading {
    .reset;
    font-size: 1.375em; /* 22 / 16 */
    line-height: 1.25;
    margin-top: 1em;
    text-transform: none;
}

/*  List Styles
    ==========================================================================
Regulations are essentially a giant nested list.
This attempts to define global rules for a clear hierarchical structure.
 */

.level-1 > li {
    padding: 1em 0 0 0;
}

.level-1 > li p {
    margin-top: 0;
    padding-top: 0;
}

.supplement-section .level-1 > li {
    border-bottom: none;
    padding: 0;
}

.level-1 > li:last-child {
    border-bottom: 0;
}

.level-1 > li:first-child {
    padding-top: 0;
}

.level-2 > li > p {
    margin-top: 1em;
}

/*
The list & key-terms are set to Avenir Next Demi
Paragraphs within the list items are set in the body font
The `<ol>` tag needs to have the appropriate list type applied
```
<ol class="level-1" type="a">
    <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
        <ol class="level-2" type="1">
            <li><p>Ut enim ad minim veniam</p></li>
            <li><p>Quis nostrud exercitation ullamco laboris nisi ut aliquip</p></li>
        </ol>
    </li>
</ol>
```
*/

.main-content ol, dfn, .stripped-marker {
  .avenir-next-demi;
}

.appendix-section ol {
  list-style-type: none;
}

.main-content p {
  font-family: @body-font;
  font-weight: 400;
}

.paragraph-marker, .stripped-marker {
  display: none;
}

.appendix-section {
  .stripped-marker {
    display: inline-block;
    margin-left: -16px;
    margin-right: 4px;
  }
}
.appendix-section .inline-interpretation-content .stripped-marker {
    margin-left: -20px;
    width: 24px;
}

/* remove paragraph markers that have the markerless class */
.markerless {
  list-style-type: none;

  /* don't indent the markerless paragraph */
  >p {
    margin-left: -1em;
  }
}

/*  Definition Styles
    ==========================================================================

The ```<dfn class="key-term">``` tag is used throughout the reg to reference terms as they are defined
within the context of the regulation.

See [MDN's `<dfn>` tag reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn) for more info.

All key-terms are displayed as block elements to force a line-break,
except in the appendix where we use inline-block to accomodate the marker styles

*/

.key-term {
    display: block;
}

.appendix-section {
  .key-term {
    display: inline-block;
  }
}

/*  Level-1 Key-Terms
    -----------------

```
<ol class="level-1">
    <li>
        <dfn class="key-term">Level 1 key-term</dfn>
    </li>
</ol>
```
*/

.level-1 .key-term {
    font-size: 1.375em; /* 24px / 16px = 1.5em */
    line-height: 1.5; /* 30px / 24px = 1.25 */
}

/*  Level-2 key-terms
    -----------------

```
<section class="supplement-section">
<ol class="level-2">
    <li>
        <dfn class="key-term">Level 2 key-term</dfn>
    </li>
</ol>
</section>
```
*/

.level-2 .key-term,
.supplement-section .level-1 .key-term {
    text-transform: uppercase;
    font-size: 1em;
    .avenir-next-demi;
}

/*  Level-3 key-terms
    -----------------

```
<section class="supplement-section">
<ol class="level-3">
    <li>
        <dfn class="key-term">Level 3 key-term</dfn>
    </li>
</ol>
</section>
```
*/

.level-3 .key-term {
    .avenir-next-demi;
    text-transform: none;
}

/*
  Appendix Styles
 ==========================================================================

Model Form Content
------------------

```
<div class="model-form-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>
```
*/

.model-form-content {
    background: #f6f6f5;
    border: 1px solid #e3e4e5;
    padding: 20px;
    font-family: Arial, sans-serif;
    font-size: 0.875em; /* 14/16 = .875 */
    line-height: 1.4;
}

/* some model forms have dashes in the regulation, such as
* Location ________
* we mark those up with span tags and insert the dash with css
*/
.model-form-dash {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;

    span {
        display: inline-block;
        *display: inline;
        min-width: 1em;
        min-height: 1em;
        vertical-align: baseline;
        *vertical-align: auto;
        zoom: 1;
        position: relative;
        padding-right: 0.4em;

        &:after {
            content: '';
            display: block;
            width: 1000px;
            position: absolute;
            top: 1.2em;
            border-top: 1px solid @black;
        }

        &:after {
          left: 100%;
        }
    }
}

/*
  Table Styles
 ========================================================================== */
table {
    margin: 1em 0;
    padding: 0;
    font-size: .75em;
    .avenir-next;
    table-layout: fixed;
    width: 100%;
}

th,
td {
    padding: 15px;
    line-height: 20px;
    border: 1px solid @80_gray;
}

th {
    font-family: "Avenir Next Demi", Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: left;
}

/* make tables horizontally scroll on small screens */
@media only screen and ( max-width: 480px ) {
    .table-wrap {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch; // smoother scrolling
    }
}

/*
  Code Styles
 ========================================================================== */

pre {
    font-size: 0.875em;
    font-family: Consolas, monaco, monospace;
    margin: 0 auto;
    max-width: 600px;
    padding: 10px;
    background-color: @bg_gray;
    overflow-x: scroll;
    word-wrap: normal;
    white-space: pre;
}

/*
  there's some wonkiness going on with the pre tag and responsiveness
  this is a quick solution */

@media only screen and ( min-width: 1300px ){
  pre {
    max-width: 680px;
  }
}

@media only screen and ( max-width: 1300px ){
  pre {
    max-width: 600px;
  }
}

@media only screen and ( max-width: 1100px ){
  pre {
    max-width: 500px;
  }
}

/*
  Small screens
 ==============
*/

@media only screen and ( max-width: 480px ) {

    .reg-text {
        margin-top: 20px;

        ol {
            padding: 0;
        }
    }

    .main-content,
    .secondary-content,
    .about-content,
    .landing-content {
        font-size: 0.875em;
    }

    .section-number,
    .appendix-heading,
    .supplement-section h3 {
        font-size: 1.571428571em;
    }
}

@media only screen and ( max-width: 600px ) {

    .main-content {

        ol {
            list-style-position: inside;
        }
    }
}

@media only screen and ( max-width: 780px ) {

    /*
    Typography
    ========================
    */

    .section-number {
        text-indent: 0;
    }

    /*
    Main Content
    =====================
    */

    .level-1 > li:after {
        margin-left: -5em;
    }

    h1 .title {
        display: none;
    }

     /*
    Appendix Content
    =====================
    */

    .appendix-section .stripped-marker {
      display: inline-block;
      float: left;
      margin-left: 0;
      width: auto;
      padding-right: 4px;
    }

    .appendix-section ol {
        padding: 0;
    }
}

@media only screen and ( max-width: 1100px ) {

    .level-1 > li:after {
        margin-left: -10em;
    }
}

/*
Typograhy styles
 ==========================================================================
typography.less contains both global and application specific typography */

/*
 Global Typography
 ========================================================================== */

/*  Body Font
    ------------

Georgia, 1em, black

*/

body {
    color: @black;
    font-family: @body-font;
    font-size: 1em;
    /*line-height: 1.625;*/ /* 26px */
    /*line-height: 1.375;*/ /*22px*/
    line-height: 1.5; /*24px*/
}

strong {
    .avenir-next-demi;
}

/*  Default Headings
    --------

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

 */

h1,
h2,
h3{
    .avenir-next-demi;
    margin-bottom: 0;
}

h4,
h5,
h6 {
    .avenir-next-demi;
    margin-bottom: 0;
}

h1 {
    font-size: 2.125em;
}

h2 {
    font-size: 1.625em;
}

h3 {
    font-size: 1.375em;
}

h4 {
    font-size: 1em;
    text-transform: uppercase;
}

h5 {
    font-size: 0.875em;
    text-transform: uppercase;
}

h6 {
    font-size: 0.875em;
    margin: 1em 0 0 0;
}

/*  Sub Headings
    ------------

Sub Heading

*/

.sub-text {
    .avenir-next;
}

.small-header {
    font-size: 1.125em;
}

.xsmall-header {
    font-size: 1em;
}

.light-header {
    .avenir-next;
}

.upper-header {
    text-transform: uppercase;
}

.sentence-header {
    text-transform: none;
}

.effective-date {
    font-size: .875em;
    padding-right: 15px;
}

/*  Lists
    ------

List item

List item

List item

*/

ul li {
  list-style: none;
}

.bullet li {
    list-style: disc;
}

li {
    margin-top: 1em; /*16px*/
}

address {
    font-style: normal;
}

ol[type="no-marker"] {
    list-style-type: none;
    padding-left: 0;
}

/*
 Link Styles
 ========================================================================== */

a:link,
a:visited {
    color: @pacific;
    text-decoration: none;
    border: none;
    -webkit-transition: .1s;
    -moz-transition: .1s;
    transition: .1s;
}

/*  Internal Links
    ---------------
    internal contents
*/

.internal,
.internal:link,
.internal:visited {
    color: @black;
    text-decoration: none;
    border-bottom: 1px solid @link_blue;
}

.internal:hover,
.internal:active,
.internal:focus {
    background-color: #cde3f1;
}

/*  External Links
    --------------
    some other website
*/

.external:after{
    .cf-icon;
    content: "\e610";
    padding: 0 0 0 5px;
    font-size: 16px;
}

.phone:link,
.phone:visited {
    color: @pacific;
}

.phone:before {
    .cf-icon;
    content: "\e306";
    margin-right: 6px;
}

.mail:before {
    .cf-icon;
    content: "\e302";
    margin-right: 6px;
}

.go:after {
   .cf-icon;
    content: "\e002";
    font-size: 0.75em;
    margin-left: 6px;
    vertical-align: middle;
}

.pdf:after {
   .cf-icon;
    content: "\e402";
    margin-left: 6px;
}

.external:hover,
.mail:hover,
.go:hover,
.pdf:hover,
.standard:hover,
.what:hover,
.external:active,
.mail:active,
.go:active,
.pdf:active,
.standard:active,
.what:active,
.external:focus,
.mail:focus,
.go:focus,
.pdf:focus
.standard:focus,
.what:focus, {
    border-bottom: 1px solid;
}

/*  Definition Links
    --------------
    defined term
*/

.definition,
.definition:link,
.definition:visited {
    color: @black;
    text-decoration: none;
    border-bottom: 1px solid @light_field;
}

.definition:hover,
.definition:active {
    border-bottom: 1px solid @medium_gray;
    background-color: @grey;
}

.definition.active {
    background-color: @grey;
}

.inline-interpretation {
    .definition:link,
    .definition:visited {
         border-bottom: 1px solid @medium_gray;
    }
}

/* button styles */

.btn {
    .avenir-next;
    display: inline-block;
    box-sizing: border-box;
    padding: .57142857em 1em;
    border: 0;
    border-radius: .28571429em;
    margin: 0;
    vertical-align: middle;
    font-size: .875em;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .1s;
    -webkit-appearance: none;
}

.btn, .btn:link, .btn:visited {
    background-color: #0072ce;
    color: #fff;
}

.btn.hover, .btn:hover {
    background-color: #328ed8;
}

.btn.focus, .btn:focus {
    background-color: #328ed8;
    outline: #0072ce dotted 1px;
    outline-offset: 1px;
}

/*
 Regulation Headings
 ========================================================================== */

/*  Top Level
    -----------

Top Level Reg Heading

*/

.section-number,
.appendix-heading,
.supplement-section h3 {
    font-size: 1.8125em; /* 29px / 16 */
    .avenir-next-demi;
    line-height: 1.25;
    letter-spacing: 1px;
}

.section-number {
    text-indent: -.94em; /* outdent the § symbol */
}

/* for a header with no following content */

.empty-header {
    margin-bottom: 2em;
}

/*  Sub Headings
    -----------

Top Level Reg Heading

*/

.appendix-subheading,
.interp-subheading {
    .reset;
    font-size: 1.375em; /* 22 / 16 */
    line-height: 1.25;
    margin-top: 1em;
    text-transform: none;
}

/*  List Styles
    ==========================================================================
Regulations are essentially a giant nested list.
This attempts to define global rules for a clear hierarchical structure.
 */

.level-1 > li {
    padding: 1em 0 0 0;
}

.level-1 > li p {
    margin-top: 0;
    padding-top: 0;
}

.supplement-section .level-1 > li {
    border-bottom: none;
    padding: 0;
}

.level-1 > li:last-child {
    border-bottom: 0;
}

.level-1 > li:first-child {
    padding-top: 0;
}

.level-2 > li > p {
    margin-top: 1em;
}

/*
The list & key-terms are set to Avenir Next Demi
Paragraphs within the list items are set in the body font
The `<ol>` tag needs to have the appropriate list type applied
```
<ol class="level-1" type="a">
    <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
        <ol class="level-2" type="1">
            <li><p>Ut enim ad minim veniam</p></li>
            <li><p>Quis nostrud exercitation ullamco laboris nisi ut aliquip</p></li>
        </ol>
    </li>
</ol>
```
*/

.main-content ol, dfn, .stripped-marker {
  .avenir-next-demi;
}

.appendix-section ol {
  list-style-type: none;
}

.main-content p {
  font-family: @body-font;
  font-weight: 400;
}

.paragraph-marker, .stripped-marker {
  display: none;
}

.appendix-section .stripped-marker {
  display: block;
  float: left;
  margin-left: -20px;
  width: 20px;
}

.appendix-section .inline-interpretation-content .stripped-marker {
    margin-left: -24px;
    width: 24px;
}

/* remove paragraph markers that have the markerless class */
.markerless {
  list-style-type: none;

  /* don't indent the markerless paragraph */
  >p {
    margin-left: -1em;
  }
}

/*  Definition Styles
    ==========================================================================

The ```<dfn class="key-term">``` tag is used throughout the reg to reference terms as they are defined
within the context of the regulation.

See [MDN's `<dfn>` tag reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn) for more info.

All key-terms are displayed as block elements to force a line-break.

*/

.key-term {
    display: block;
}

/*  Level-1 Key-Terms
    -----------------

```
<ol class="level-1">
    <li>
        <dfn class="key-term">Level 1 key-term</dfn>
    </li>
</ol>
```
*/

.level-1 .key-term {
    font-size: 1.375em; /* 24px / 16px = 1.5em */
    line-height: 1.5; /* 30px / 24px = 1.25 */
}

/*  Level-2 key-terms
    -----------------

```
<section class="supplement-section">
<ol class="level-2">
    <li>
        <dfn class="key-term">Level 2 key-term</dfn>
    </li>
</ol>
</section>
```
*/

.level-2 .key-term,
.supplement-section .level-1 .key-term {
    text-transform: uppercase;
    font-size: 1em;
    .avenir-next-demi;
}

/*  Level-3 key-terms
    -----------------

```
<section class="supplement-section">
<ol class="level-3">
    <li>
        <dfn class="key-term">Level 3 key-term</dfn>
    </li>
</ol>
</section>
```
*/

.level-3 .key-term {
    .avenir-next-demi;
    text-transform: none;
}

/*
  Appendix Styles
 ==========================================================================

Model Form Content
------------------

```
<div class="model-form-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>
```
*/

.model-form-content {
    background: #f6f6f5;
    border: 1px solid #e3e4e5;
    padding: 20px;
    font-family: Arial, sans-serif;
    font-size: 0.875em; /* 14/16 = .875 */
    line-height: 1.4;
}

/* some model forms have dashes in the regulation, such as
* Location ________
* we mark those up with span tags and insert the dash with css
*/
.model-form-dash {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;

    span {
        display: inline-block;
        *display: inline;
        min-width: 1em;
        min-height: 1em;
        vertical-align: baseline;
        *vertical-align: auto;
        zoom: 1;
        position: relative;
        padding-right: 0.4em;

        &:after {
            content: '';
            display: block;
            width: 1000px;
            position: absolute;
            top: 1.2em;
            border-top: 1px solid @black;
        }

        &:after {
          left: 100%;
        }
    }
}

/*
  Table Styles
 ========================================================================== */
table {
    margin: 1em 0;
    padding: 0;
    font-size: .75em;
    .avenir-next;
    table-layout: fixed;
    width: 100%;
}

th,
td {
    padding: 15px;
    line-height: 20px;
    border: 1px solid @80_gray;
}

th {
    font-family: "Avenir Next Demi", Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: left;
}

/* make tables horizontally scroll on small screens */
@media only screen and ( max-width: 480px ) {
    .table-wrap {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch; // smoother scrolling
    }
}

/*
  Code Styles
 ========================================================================== */

pre {
    font-size: 0.875em;
    font-family: Consolas, monaco, monospace;
    margin: 0 auto;
    max-width: 600px;
    padding: 10px;
    background-color: @bg_gray;
    overflow-x: scroll;
    word-wrap: normal;
    white-space: pre;
}

/*
  there's some wonkiness going on with the pre tag and responsiveness
  this is a quick solution */

@media only screen and ( min-width: 1300px ){
  pre {
    max-width: 680px;
  }
}

@media only screen and ( max-width: 1300px ){
  pre {
    max-width: 600px;
  }
}

@media only screen and ( max-width: 1100px ){
  pre {
    max-width: 500px;
  }
}

/*
  Small screens
 ==============
*/

@media only screen and ( max-width: 480px ) {

    .reg-text {
        margin-top: 20px;

        ol {
            padding: 0;
        }
    }

    .main-content,
    .secondary-content,
    .about-content,
    .landing-content {
        font-size: 0.875em;
    }

    .section-number,
    .appendix-heading,
    .supplement-section h3 {
        font-size: 1.571428571em;
    }
}

@media only screen and ( max-width: 600px ) {

    .main-content {

        ol {
            list-style-position: inside;
        }
    }
}

@media only screen and ( max-width: 780px ) {

    /*
    Typography
    ========================
    */

    .section-number {
        text-indent: 0;
    }

    /*
    Main Content
    =====================
    */

    .level-1 > li:after {
        margin-left: -5em;
    }

    h1 .title {
        display: none;
    }

     /*
    Appendix Content
    =====================
    */

    .appendix-section .stripped-marker {
      display: inline-block;
      float: left;
      margin-left: 0;
      width: auto;
      padding-right: 4px;
    }

    .appendix-section ol {
        padding: 0;
    }
}

@media only screen and ( max-width: 1100px ) {

    .level-1 > li:after {
        margin-left: -10em;
    }
}


Changed stylesheets to styles

Changed stylesheets to styles

@import "ui-variables";
@import "octicon-utf-codes";

@faviconsize: 16px;

.octicon-mixin() {
  font-family: 'Octicons Regular';
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
}

.tab-bar .tab {
  &.live {
    .title:after {
      .octicon-mixin();
      content: @sync;
      position: absolute;
      display: block;
      top: 0;
      left: @faviconsize;
      width: @faviconsize;
      height: @faviconsize;
      font-size: @faviconsize;
      line-height: 1;
      color: #44f;
      text-shadow: 0 0 1px rgba(0,0,0,.66);
    }
  }
  .tab-favicon {
    position: absolute;
    left:   .5em;
    top:    50%;
    width:  @faviconsize;
    height: @faviconsize;
    margin-top: @faviconsize / -2;
  }
}

atom-workspace .browser-toolbar {
  display:    flex;
  position:   relative;
  height:     34px;
  font-size:  14px;
  background-image: -webkit-linear-gradient(top, @app-background-color,
                                                    @tab-bar-background-color);
  box-shadow: inset 0 -8px 8px -4px rgba(0, 0, 0, 0.15);

  .nav-btns{
    display: inline-block;
    position: relative;
    margin-top: 0.2em;
    height: 1.1em;
    line-height: 1.3em;
    line-height: 0.9;

    .octicon {
      .octicon-mixin();
      font-size: 1.7em;
      display: inline-block;
      padding-left:  .2em;
      padding-right: .2em;
      color: @text-color;
      opacity:       .8;
      margin-left: 0.1em;
      border:1px solid transparent;
      border-radius: 0.2em;
    }
    .octicon.browser-btn:hover {
      border: 1px solid @button-border-color;
      background-color: @button-background-color-hover;
    }
    .octicon.octicon-globe              {&:before{content: @globe}; color:#44f}
    .octicon.octicon-arrow-left         {&:before{content: @arrow-left}}
    .octicon.octicon-arrow-right        {&:before{content: @arrow-right}}
    .octicon.octicon-sync               {&:before{content: @sync}}
    .octicon.octicon-bug                {&:before{content: @bug}}
    .octicon.octicon-file-symlink-file  {&:before{content: @file-symlink-file}}
  }
  .nav-btns.left {
    order: 1;
  }
  .nav-btns .disabled {
    color:gray;
  }
  .omnibox-container {
    flex: 1;
    order: 3;

    .omnibox {
      position: relative;
      margin-left: .4em;
      margin-right: .4em;

      input {
        position:   relative;
        top:            .3em;
        height:        1.7em;
        width:          100%;
        padding-left:  0.3em;
        padding-right: 0.2em;
        font-size:      14px;
        box-shadow:     none;
        border:        1px solid @input-border-color;
        color:          @text-color;
        background-color: transparent;
      }
      input::selection {
        background-color: @background-color-selected;
      }
      input:focus {
        background-color: @input-background-color;
      }
    }
  }
  .nav-btns.right {
    order: 4;
  }
}

atom-workspace .browser-page webview {
  width:  100%;
  height: 100%;
  border: none;
  margin: 5px;
}

error: pathspec 'styles/web-browser.less' did not match any file(s) known to git


GRID - .col-XYZ-0 - ability to hide/show column per resolution or for print styles

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/wUFr/LUI.git/'


[maint] Adding styles for more input types Simplified some of the LESS code as well.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/anthonyfuentes/hubzero-cms.git/'


Adding styles for textarea elements.

Adding styles for textarea elements.

textarea.vui-input {
	line-height: 1.25em;
	overflow: auto;
	width: 100%;
}

error: pathspec 'textArea.less' did not match any file(s) known to git


Close comment

fatal: remote error: upload-pack: not our ref 604dd38393a936775a87d89022f43bc5552bbaea
fatal: the remote end hung up unexpectedly


Added missing normalize.less

Added missing normalize.less

/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
/* For cases where we use HTML5 video directly through <video> tags. */
video {
  width: 100% !important;
  height: auto !important;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
	display: none;
	height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */
[hidden] {
	display: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *	`em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *	user zoom.
 */
html {
	font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
	-ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */
html,
button,
input,
select,
textarea {
	font-family: sans-serif;
}

/**
 * Address margins handled incorrectly in IE 6/7.
 */
body {
	margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
	outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
	outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

h2 {
	font-size: 1.5em;
	margin: 0.83em 0;
}

h3 {
	font-size: 1.17em;
	margin: 1em 0;
}

h4 {
	font-size: 1em;
	margin: 1.33em 0;
}

h5 {
	font-size: 0.83em;
	margin: 1.67em 0;
}

h6 {
	font-size: 0.67em;
	margin: 2.33em 0;
}

/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */
abbr[title] {
	border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */
b,
strong {
	font-weight: bold;
}

blockquote {
	margin: 1em 40px;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
	font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 * add better looking defaults
 */
hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

/**
 * Address styling not present in IE 6/7/8/9.
 */
mark {
	background: #ff0;
	color: #000;
}

/**
 * Address margins set differently in IE 6/7.
 */
p,
pre {
	margin: 1em 0;
}

/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	_font-family: 'courier new', monospace;
	font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/**
 * Address CSS quotes not supported in IE 6/7.
 */
q {
	quotes: none;
}

/**
 * Address `quotes` property not supported in Safari 4.
 */
q:before,
q:after {
	content: '';
	content: none;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */
/**
 * Address margins set differently in IE 6/7.
 */
dl,
menu,
ol,
ul {
	margin: 1em 0;
}

dd {
	margin: 0 0 0 40px;
}

/**
 * Address paddings set differently in IE 6/7.
 */
menu,
ol,
ul {
	padding: 0 0 0 40px;
}

/**
 * Correct list images handled incorrectly in IE 7.
 */
nav ul,
nav ol {
	list-style: none;
	list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */
img {
	border: 0; /* 1 */
	-ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
	overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */
figure {
	margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Correct margin displayed oddly in IE 6/7.
 */
form {
	margin: 0;
}

/**
 * Remove default fieldset styles.
 */
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */
legend {
	border: 0; /* 1 */
	padding: 0;
	white-space: normal; /* 2 */
	*margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *	and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
	font-size: 100%; /* 1 */
	margin: 0; /* 2 */
	vertical-align: baseline; /* 3 */
	*vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
	line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
	text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *	and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *	`input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *	Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
	*overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
	cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *	Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
	*height: 13px; /* 3 */
	*width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *	(include `-moz` to future-proof).
 */
input[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box; /* 2 */
	box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 * 3. Allow only vertical resizing of textareas.
 */
textarea {
	overflow: auto; /* 1 */
	vertical-align: top; /* 2 */
	resize: vertical;
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

error: pathspec 'src/less/normalize.less' did not match any file(s) known to git


Create 08-inside-content.less

Create 08-inside-content.less

error: pathspec 'less/rocssti-en/08-inside-content.less' did not match any file(s) known to git


Create 08-inside-content.less

Create 08-inside-content.less

fatal: unable to access 'https://github.com/nico3333fr/ROCSSTI.git/': The requested URL returned error: 403


Create ekko-lightbox.less

Create ekko-lightbox.less

fatal: unable to access 'https://github.com/AokiCE/aokice.github.io.git/': The requested URL returned error: 403


Progress bar now animates correctly when no width set

 /*
 * # Semantic - Progress Bar
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'element';
@element : 'progress';

@import '../../semantic.config';

.ui.progress {
  border: 1px solid rgba(0, 0, 0, 0.1);

  width: 100%;
  height: 35px;

  background-color: #FAFAFA;
  padding: 5px;
  border-radius: 0.3125em;

}

.ui.progress .bar {
  display: inline-block;
  width: 0%;
  height: 100%;

  background-color: #CCCCCC;
  border-radius: 3px;

  transition:
    width 1s ease-in-out,
    background-color 1s ease-out
  ;
}

/*******************************
            States
*******************************/

/*--------------
  Successful
---------------*/

.ui.successful.progress .bar {
  background-color: @positiveColor !important;
}
.ui.successful.progress .bar,
.ui.successful.progress .bar::after {
  animation: none !important;
}

.ui.warning.progress .bar {
  background-color: @yellow !important;
}
.ui.warning.progress .bar,
.ui.warning.progress .bar::after {
  animation: none !important;
}

/*--------------
     Failed
---------------*/

.ui.failed.progress .bar {
  background-color: @negativeColor !important;
}
.ui.failed.progress .bar,
.ui.failed.progress .bar::after {
  animation: none !important;
}

/*--------------
     Active
---------------*/

.ui.active.progress .bar {
  position: relative;
}
.ui.active.progress .bar::after {
  content: '';
  opacity: 0;

  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #FFFFFF;

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;

  animation: progress-active 2s ease-out infinite;
}
@keyframes progress-active {
  0% {
    opacity: 0;
    width: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    width: 100%;
  }
}

/*--------------
    Disabled
---------------*/

.ui.disabled.progress {
  opacity: 0.35;
}
.ui.disabled.progress .bar,
.ui.disabled.progress .bar::after {
  animation: none !important;
}

/*******************************
           Variations
*******************************/

/*--------------
    Attached
---------------*/

/* bottom attached */
.ui.progress.attached {
  position: relative;
  border: none;
}
.ui.progress.attached,
.ui.progress.attached .bar {
  display: block;
  height: 3px;
  padding: 0px;
  overflow: hidden;
  border-radius: 0em 0em 0.3125em 0.3125em;
}
.ui.progress.attached .bar {
  border-radius: 0em;
}

/* top attached */
.ui.progress.top.attached,
.ui.progress.top.attached .bar {
  top: 0px;
  border-radius: 0.3125em 0.3125em 0em 0em;
}
.ui.progress.top.attached .bar {
  border-radius: 0em;
}

/*--------------
     Colors
---------------*/

.ui.blue.progress .bar {
  background-color: @blue;
}
.ui.black.progress .bar {
  background-color: @black;
}
.ui.green.progress .bar {
  background-color: @green;
}
.ui.red.progress .bar {
  background-color: @red;
}
.ui.purple.progress .bar {
  background-color: @purple;
}
.ui.teal.progress .bar {
  background-color: @teal;
}

/*--------------
    Striped
---------------*/

.ui.progress.striped .bar {
  background-size: 30px 30px;
  background-image:
    linear-gradient(
      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
      transparent 75%, transparent
    )
  ;
}

.ui.progress.active.striped .bar:after {
  animation: none;
}
.ui.progress.active.striped .bar {
  animation: progress-striped 3s linear infinite;
}
@keyframes progress-striped {
  0% {
    background-position: 0px 0;
  }
  100% {
    background-position: 60px 0;
  }
}

/*--------------
     Sizes
---------------*/

.ui.small.progress .bar {
  height: 14px;
}

 /*
 * # Semantic - Progress Bar
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'element';
@element : 'progress';

@import '../../semantic.config';

.ui.progress {
  border: 1px solid rgba(0, 0, 0, 0.1);

  width: 100%;
  height: 35px;

  background-color: #FAFAFA;
  padding: 5px;
  border-radius: 0.3125em;

}

.ui.progress .bar {
  display: inline-block;
  height: 100%;

  background-color: #CCCCCC;
  border-radius: 3px;

  transition:
    width 1s ease-in-out,
    background-color 1s ease-out
  ;
}

/*******************************
            States
*******************************/

/*--------------
  Successful
---------------*/

.ui.successful.progress .bar {
  background-color: @positiveColor !important;
}
.ui.successful.progress .bar,
.ui.successful.progress .bar::after {
  animation: none !important;
}

.ui.warning.progress .bar {
  background-color: @yellow !important;
}
.ui.warning.progress .bar,
.ui.warning.progress .bar::after {
  animation: none !important;
}

/*--------------
     Failed
---------------*/

.ui.failed.progress .bar {
  background-color: @negativeColor !important;
}
.ui.failed.progress .bar,
.ui.failed.progress .bar::after {
  animation: none !important;
}

/*--------------
     Active
---------------*/

.ui.active.progress .bar {
  position: relative;
}
.ui.active.progress .bar::after {
  content: '';
  opacity: 0;

  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #FFFFFF;

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;

  animation: progress-active 2s ease-out infinite;
}
@keyframes progress-active {
  0% {
    opacity: 0;
    width: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    width: 100%;
  }
}

/*--------------
    Disabled
---------------*/

.ui.disabled.progress {
  opacity: 0.35;
}
.ui.disabled.progress .bar,
.ui.disabled.progress .bar::after {
  animation: none !important;
}

/*******************************
           Variations
*******************************/

/*--------------
    Attached
---------------*/

/* bottom attached */
.ui.progress.attached {
  position: relative;
  border: none;
}
.ui.progress.attached,
.ui.progress.attached .bar {
  display: block;
  height: 3px;
  padding: 0px;
  overflow: hidden;
  border-radius: 0em 0em 0.3125em 0.3125em;
}
.ui.progress.attached .bar {
  border-radius: 0em;
}

/* top attached */
.ui.progress.top.attached,
.ui.progress.top.attached .bar {
  top: 0px;
  border-radius: 0.3125em 0.3125em 0em 0em;
}
.ui.progress.top.attached .bar {
  border-radius: 0em;
}

/*--------------
     Colors
---------------*/

.ui.blue.progress .bar {
  background-color: @blue;
}
.ui.black.progress .bar {
  background-color: @black;
}
.ui.green.progress .bar {
  background-color: @green;
}
.ui.red.progress .bar {
  background-color: @red;
}
.ui.purple.progress .bar {
  background-color: @purple;
}
.ui.teal.progress .bar {
  background-color: @teal;
}

/*--------------
    Striped
---------------*/

.ui.progress.striped .bar {
  background-size: 30px 30px;
  background-image:
    linear-gradient(
      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
      transparent 75%, transparent
    )
  ;
}

.ui.progress.active.striped .bar:after {
  animation: none;
}
.ui.progress.active.striped .bar {
  animation: progress-striped 3s linear infinite;
}
@keyframes progress-striped {
  0% {
    background-position: 0px 0;
  }
  100% {
    background-position: 60px 0;
  }
}

/*--------------
     Sizes
---------------*/

.ui.small.progress .bar {
  height: 14px;
}


Ordering css properties

Ordering css properties

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/studiomotio/www1.git/'


Create style.less

Create style.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/mathdoodle/stemcstudio-example.git/'


add floatbox.less to CM

add floatbox.less to CM

.floatbox-body {
	.background-color(@colorBg);
	.border(lighten(@colorFg, 20));
	.box-shadow(0 0 15px @colorFg);
}

.floatbox-controls {
	right: 1px;
	top: 1px;
	.background-color(@colorBg);
	border-radius: 11px;
}

.floatbox-controls .icon-close {
	margin: 4px;
	float: right;
	color: @colorFgIcon;

	&:hover {
		color: @colorFgIconHover;
	}
}

error: pathspec 'layout/default/css/jquery.floatbox.less' did not match any file(s) known to git


[TASK] Add mini section styling

[TASK] Add mini section styling

//
// Section
// --------------------------------------------------
.section {
    padding-top: 2em;
    padding-bottom: 2em;
    @media (min-width: @screen-sm) {
        padding-top: 3em;
        padding-bottom: 3em;
    }
    @media (min-width: @screen-md) {
        padding-top: 4em;
        padding-bottom: 4em;
    }
    @media (min-width: @screen-lg) {
        padding-top: 5em;
        padding-bottom: 5em;
    }
}
.section-mini {
    padding-top: 1em;
    padding-bottom: 1em;
}
.section-small {
    padding-top: 2em;
    padding-bottom: 2em;
    @media (min-width: @screen-sm) {
        padding-top: 3em;
        padding-bottom: 3em;
    }
}
.make-section(@name, @background, @color, @link-color, @link-color-hover) {
    .@{name} {
        color: @color;
        background-color: @background;
        a:not(.btn) {
            color: @link-color;
            &:focus,
            &:hover {
                color: @link-color-hover;
            }
        }
    }
    .@{name} + .@{name} {
        border-top: 1px solid darken(@background, 5%);
    }
}
.make-section(section-primary, @section-primary-bg, @section-primary-color, @section-primary-link-color, @section-primary-link-hover-color);
.make-section(section-light, @section-light-bg, @section-light-color, @section-light-link-color, @section-light-link-hover-color);
.make-section(section-dark, @section-dark-bg, @section-dark-color, @section-dark-link-color, @section-dark-link-hover-color);

//
// Section
// --------------------------------------------------
.section {
    padding-top: 2em;
    padding-bottom: 2em;
    @media (min-width: @screen-sm) {
        padding-top: 3em;
        padding-bottom: 3em;
    }
    @media (min-width: @screen-md) {
        padding-top: 4em;
        padding-bottom: 4em;
    }
    @media (min-width: @screen-lg) {
        padding-top: 5em;
        padding-bottom: 5em;
    }
}
.section-small {
    padding-top: 2em;
    padding-bottom: 2em;
    @media (min-width: @screen-sm) {
        padding-top: 3em;
        padding-bottom: 3em;
    }
}
.make-section(@name, @background, @color, @link-color, @link-color-hover) {
    .@{name} {
        color: @color;
        background-color: @background;
        a:not(.btn) {
            color: @link-color;
            &:focus,
            &:hover {
                color: @link-color-hover;
            }
        }
    }
    .@{name} + .@{name} {
        border-top: 1px solid darken(@background, 5%);
    }
}
.make-section(section-primary, @section-primary-bg, @section-primary-color, @section-primary-link-color, @section-primary-link-hover-color);
.make-section(section-light, @section-light-bg, @section-light-color, @section-light-link-color, @section-light-link-hover-color);
.make-section(section-dark, @section-dark-bg, @section-dark-color, @section-dark-link-color, @section-dark-link-hover-color);


Changes in Panel color.

Changes in Panel color.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/BrightMahi/aacBuyerNew.git/'


Fix show the search input on small screens.

fatal: unable to access 'https://github.com/gmist/five-studio2.git/': The requested URL returned error: 403


add loading icon

add loading icon

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/td-ui/td-ui.github.io.git/'


initial commit

initial commit

@opd_blanc: #fff;
@opd_noir: #000;
@opd_bleu: #3366cc;
@opd_bleuet: #759be7;
@opd_bleuciel: #26c4f4;
@opd_bleuclair: #ccecff;
@opd_mauve: #9866cb;
@opd_rouge: #ff0000;
@opd_rosefonce: #e6148b;
@opd_rose: #fe6598;
@opd_orange: #fb7817;
@opd_jaune: #ffb408;
@opd_jauneclair: #ffffc0;
@opd_vert: #008200;
@opd_vertbouteille: #339800;
@opd_vertsapin: #11a48a;
@opd_marron: #9c3001;

error: pathspec 'colors.less' did not match any file(s) known to git


Delete icomoon.less

Delete icomoon.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/roxdubois/roxdubois.github.io.git/'


CONTACT-193 Fix overlay icon on imported contacts

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


Fix ribbon on small screens

Fix ribbon on small screens

fatal: unable to access 'https://github.com/cucumber/website.git/': The requested URL returned error: 403


fix app/add-on summary wrapping for mamo listing pages

fatal: unable to access 'https://github.com/Jobava/zamboni.git/': The requested URL returned error: 403


feat(addIconPage): fixing stylelint after merging patrick change

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/seekinternational/seek-asia-style-guide.git/'


added bookmarked class

added bookmarked class

fatal: unable to access 'https://github.com/Digipalvelutehdas/APIKA.git/': The requested URL returned error: 403


Comment out LESS include, resolving import error

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Digipalvelutehdas/APIKA.git/'


Fix #87: Expand checkbox label area

Fix #87: Expand checkbox label area

fatal: unable to access 'https://github.com/geoadmin/web-emapis.git/': The requested URL returned error: 403


padding on create event

padding on create event

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/kevinbrosamle/ticket-sherpa.git/'


Update static/vendors/bootstrap/less/forms.less

Signed-off-by: Bernard Ojengwa <fccb4cc00c1ba7e51bf5c2b5f77130b9fe8d917e@gmail.com>

//
// Forms
// --------------------------------------------------

// Normalize non-controls
//
// Restyle and baseline non-control form elements.

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
  // so we reset that to ensure it behaves more like a standard block element.
  // See https://github.com/twbs/bootstrap/issues/12359.
  min-width: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: @line-height-computed;
  font-size: (@font-size-base * 1.5);
  line-height: inherit;
  color: @legend-color;
  border: 0;
  border-bottom: 1px solid @legend-border-color;
}

label {
  display: inline-block;
  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
  margin-bottom: 5px;
  font-weight: bold;
}

// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.

// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
  .box-sizing(border-box);
}

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9; // IE8-9
  line-height: normal;
}

// Set the height of file controls to match text inputs
input[type="file"] {
  display: block;
}

// Make range inputs behave like textual form controls
input[type="range"] {
  display: block;
  width: 100%;
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
  height: auto;
}

// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  .tab-focus();
}

// Adjust output element
output {
  display: block;
  padding-top: (@padding-base-vertical + 1);
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @input-color;
}

// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]

.form-control {
  display: block;
  width: 100%;
  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: @padding-base-vertical @padding-base-horizontal;
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @input-color;
  background-color: @input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid @input-border;
  border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");

  // Customize the `:focus` state to imitate native WebKit styles.
  .form-control-focus();

  // Placeholder
  .placeholder();

  // Disabled and read-only inputs
  //
  // HTML5 says that controls under a fieldset > legend:first-child won't be
  // disabled if the fieldset is disabled. Due to implementation difficulty, we
  // don't honor that edge case; we style them as disabled anyway.
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    background-color: @input-bg-disabled;
    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
  }

  &[disabled],
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }

  // Reset height for `textarea`s
  textarea& {
    height: auto;
  }
}

// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.

input[type="search"] {
  -webkit-appearance: none;
}

// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    line-height: @input-height-base;

    &.input-sm,
    .input-group-sm & {
      line-height: @input-height-small;
    }

    &.input-lg,
    .input-group-lg & {
      line-height: @input-height-large;
    }
  }
}

// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.form-group {
  margin-bottom: @form-group-margin-bottom;
}

// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;

  label {
    min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
  }
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
  margin-top: 4px \9;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}

// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px; // space out consecutive inline controls
}

// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"] {
  &[disabled],
  &.disabled,
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
  &.disabled,
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
  &.disabled,
  fieldset[disabled] & {
    label {
      cursor: @cursor-disabled;
    }
  }
}

// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.

.form-control-static {
  // Size it appropriately next to real form controls
  padding-top: (@padding-base-vertical + 1);
  padding-bottom: (@padding-base-vertical + 1);
  // Remove default margin from `p`
  margin-bottom: 0;
  min-height: (@line-height-computed + @font-size-base);

  &.input-lg,
  &.input-sm {
    padding-left: 0;
    padding-right: 0;
  }
}

// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.

.input-sm {
  .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
}
.form-group-sm {
  .form-control {
    .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
  }
  .form-control-static {
    height: @input-height-small;
    padding: @padding-small-vertical @padding-small-horizontal;
    font-size: @font-size-small;
    line-height: @line-height-small;
    min-height: (@line-height-computed + @font-size-small);
  }
}

.input-lg {
  .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
}
.form-group-lg {
  .form-control {
    .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
  }
  .form-control-static {
    height: @input-height-large;
    padding: @padding-large-vertical @padding-large-horizontal;
    font-size: @font-size-large;
    line-height: @line-height-large;
    min-height: (@line-height-computed + @font-size-large);
  }
}

// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.

.has-feedback {
  // Enable absolute positioning
  position: relative;

  // Ensure icons don't overlap text
  .form-control {
    padding-right: (@input-height-base * 1.25);
  }
}
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2; // Ensure icon is above input groups
  display: block;
  width: @input-height-base;
  height: @input-height-base;
  line-height: @input-height-base;
  text-align: center;
  pointer-events: none;
}
.input-lg + .form-control-feedback {
  width: @input-height-large;
  height: @input-height-large;
  line-height: @input-height-large;
}
.input-sm + .form-control-feedback {
  width: @input-height-small;
  height: @input-height-small;
  line-height: @input-height-small;
}

// Feedback states
.has-success {
  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
.has-warning {
  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
.has-error {
  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}

// Reposition feedback icon if input has visible label above
.has-feedback label {

  & ~ .form-control-feedback {
     top: (@line-height-computed + 5); // Height of the `label` and its margin
  }
  &.sr-only ~ .form-control-feedback {
     top: 0;
  }
}

// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.

.help-block {
  display: block; // account for any element using help-block
  margin-top: 5px;
  margin-bottom: 10px;
  color: lighten(@text-color, 25%); // lighten the text some for contrast
}

// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }

    // Make static controls behave like regular ones
    .form-control-static {
      display: inline-block;
    }

    .input-group {
      display: inline-table;
      vertical-align: middle;

      .input-group-addon,
      .input-group-btn,
      .form-control {
        width: auto;
      }
    }

    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    .control-label {
      margin-bottom: 0;
      vertical-align: middle;
    }

    // Remove default margin on radios/checkboxes that were used for stacking, and
    // then undo the floating of radios and checkboxes to match.
    .radio,
    .checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;

      label {
        padding-left: 0;
      }
    }
    .radio input[type="radio"],
    .checkbox input[type="checkbox"] {
      position: relative;
      margin-left: 0;
    }

    // Re-override the feedback icon.
    .has-feedback .form-control-feedback {
      top: 0;
    }
  }
}

// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.

.form-horizontal {

  // Consistent vertical alignment of radios and checkboxes
  //
  // Labels also get some reset styles, but that is scoped to a media query below.
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: (@padding-base-vertical + 1); // Default padding plus a border
  }
  // Account for padding we're adding to ensure the alignment and of help text
  // and other content below items
  .radio,
  .checkbox {
    min-height: (@line-height-computed + (@padding-base-vertical + 1));
  }

  // Make form groups behave like rows
  .form-group {
    .make-row();
  }

  // Reset spacing and right align labels, but scope to media queries so that
  // labels on narrow viewports stack the same as a default form example.
  @media (min-width: @screen-sm-min) {
    .control-label {
      text-align: right;
      margin-bottom: 0;
      padding-top: (@padding-base-vertical + 1); // Default padding plus a border
    }
  }

  // Validation states
  //
  // Reposition the icon because it's now within a grid column and columns have
  // `position: relative;` on them. Also accounts for the grid gutter padding.
  .has-feedback .form-control-feedback {
    right: (@grid-gutter-width / 2);
  }

  // Form group sizes
  //
  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
  // inputs and labels within a `.form-group`.
  .form-group-lg {
    @media (min-width: @screen-sm-min) {
      .control-label {
        padding-top: ((@padding-large-vertical * @line-height-large) + 1);
      }
    }
  }
  .form-group-sm {
    @media (min-width: @screen-sm-min) {
      .control-label {
        padding-top: (@padding-small-vertical + 1);
      }
    }
  }
}

error: pathspec 'static/vendors/bootstrap/less/forms.less' did not match any file(s) known to git


removed left toggle button from side menu

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/amazingBastard/sva-accreditation.git/'


cleanup

cleanup

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/aoimedia/uikit.git/'


OR-1164 add min-width to img in the autocompleted attendees. It\'s needed in Firefox.


Match actual extension

Match actual extension

Update .icon-tab() and .icon-tree() to match the extension to the end of the data-name property.

@import "ui-variables";

.icon-tab( @extension: ''; @type: ''; @font: 20px; @top: 6px; @right: -3px; @left: -5px; @offset: -6px) {

  .tab-bar .tab .title[data-name$="@{extension}"] {
    position: relative;
    display: inline-block;
    top: @offset;
    padding: 0;

    &:before {
      font-family: icomoon;
      content: "@{icon-@{type}}";
      font-size: @font;
      position: relative;
      top: @top;
      left: @left;
      margin-right: @right;
      color: ~"@{color-@{type}}";
    }
  }

  .tab-bar .tab.active .title[data-name$="@{extension}"] {
    top: @offset;
  }

}

.icon-tree( @extension: ''; @type: ''; @font: 20px; @top: 6px; @right: 0px; @left: -5px; @offset: -6px) {

  .name.icon[data-name$="@{extension}"] {

    position: relative;
    display: inline-block;
    top: @offset;
    padding: 0;

    &.icon-file-text, &.icon-file-media, &.icon-book {
      &:before {
        font-family: icomoon;
        content: "@{icon-@{type}}";
        font-size: @font;
        position: relative;
        top: @top;
        left: @left;
        margin-right: @right;
        color: ~"@{color-@{type}}";
      }
    }

  }

}

// Pattern matching; ish is cray.
// http://lesscss.org/#-pattern-matching-and-guard-expressions
.text(normal) {
  font-weight: normal;
  color: @text-color;
  text-shadow: none;
}
.text(subtle) {
  font-weight: normal;
  color: @text-color-subtle;
  text-shadow: none;
}
.text(highlight) {
  font-weight: normal;
  color: @text-color-highlight;
  text-shadow: 0 1px 0 rgba(0,0,0, .5);
}
.text(selected) {
  .text(highlight)
}

.text(info) {
  color: @text-color-info;
  text-shadow: none;
}
.text(success) {
  color: @text-color-success;
  text-shadow: none;
}
.text(warning) {
  color: @text-color-warning;
  text-shadow: none;
}
.text(error) {
  color: @text-color-error;
  text-shadow: none;
}

@import "ui-variables";

.icon-tab( @extension: ''; @type: ''; @font: 20px; @top: 6px; @right: -3px; @left: -5px; @offset: -6px) {

  .tab-bar .tab .title[data-name*="@{extension}"] {
    position: relative;
    display: inline-block;
    top: @offset;
    padding: 0;

    &:before {
      font-family: icomoon;
      content: "@{icon-@{type}}";
      font-size: @font;
      position: relative;
      top: @top;
      left: @left;
      margin-right: @right;
      color: ~"@{color-@{type}}";
    }
  }

  .tab-bar .tab.active .title[data-name*="@{extension}"] {
    top: @offset;
  }

}

.icon-tree( @extension: ''; @type: ''; @font: 20px; @top: 6px; @right: 0px; @left: -5px; @offset: -6px) {

  .name.icon[data-name*="@{extension}"] {

    position: relative;
    display: inline-block;
    top: @offset;
    padding: 0;

    &.icon-file-text, &.icon-file-media, &.icon-book {
      &:before {
        font-family: icomoon;
        content: "@{icon-@{type}}";
        font-size: @font;
        position: relative;
        top: @top;
        left: @left;
        margin-right: @right;
        color: ~"@{color-@{type}}";
      }
    }

  }

}

// Pattern matching; ish is cray.
// http://lesscss.org/#-pattern-matching-and-guard-expressions
.text(normal) {
  font-weight: normal;
  color: @text-color;
  text-shadow: none;
}
.text(subtle) {
  font-weight: normal;
  color: @text-color-subtle;
  text-shadow: none;
}
.text(highlight) {
  font-weight: normal;
  color: @text-color-highlight;
  text-shadow: 0 1px 0 rgba(0,0,0, .5);
}
.text(selected) {
  .text(highlight)
}

.text(info) {
  color: @text-color-info;
  text-shadow: none;
}
.text(success) {
  color: @text-color-success;
  text-shadow: none;
}
.text(warning) {
  color: @text-color-warning;
  text-shadow: none;
}
.text(error) {
  color: @text-color-error;
  text-shadow: none;
}