Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert CSS to LESS #27

Closed
DerKnerd opened this issue Feb 17, 2014 · 12 comments
Closed

Convert CSS to LESS #27

DerKnerd opened this issue Feb 17, 2014 · 12 comments

Comments

@DerKnerd
Copy link

You should make the code available as LESS files, if you need help, just write me.
@gasolin
Copy link
Contributor

gasolin commented Feb 18, 2014

@DerKnerd I was wondering if it's could be done in BB as well.
https://bugzilla.mozilla.org/show_bug.cgi?id=952427

We have some discussion there https://groups.google.com/forum/#!topic/mozilla.dev.gaia/AItg2nXQaTM
The followup discussion is within this thread https://groups.google.com/forum/#!searchin/mozilla.dev.gaia/Proposal$20to$20enhance$20Building$20Block/mozilla.dev.gaia/SBEG0v5pFgg/uczgpwX2tzgJ

Seems you have more knowledge of LESS, can you address some benefits to help us clarify the advantage of adopting LESS to Building Blocks?

@DerKnerd
Copy link
Author

@gasolin I'll write you a LESS version of buttons.css later, but short, the biggest advantage is, that you only need to change one variable and all values change. An example would be the orange, if a company or a project uses a different brandcolor, like we do, you just need to change one value and the rest automatically changes. Another example is, I noticed that the buttons all have a very similar schema and with LESS you can write a mixin that creates the style for the buttons. And yeah I could do this, but it will take some time and I can't promise that it will be just as awesome as bootstrap, I just love you guys, but I'll do my best 😄

@DerKnerd
Copy link
Author

So, here is the are the LESS files
variables.less

@default-background-color: #008aaa;
@default-color: #333;
@recommend-background-color: #00caf2;
@recommend-border-color: #008eab;
@danger-background-color: #b70404;
@danger-color: #fff;
@danger-border-color: #820000;
@danger-background-color-active: #890707;
@default-disabled-background-color: #e7e7e7;
@default-disabled-color: #c7c7c7;
@danger-disabled-background-color: #c68484;
@danger-disabled-color: #a56464;
@dark-disabled-background: #5f5f5f;
@dark-disabled-color: #4d4d4d;

mixins.less

.button-active(@background-color, @color) {
    border-color: @background-color;
    background: @background-color;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    color: @color;
}

.button-active-image(@background-color, @background-image) {
    background-image: @background-image;
    background-color: @background-color;
}

.button-type(@background-color, @color, @border-color, @background-color-active, @background-image) {
    background-image: @background-image;
    background-color: @background-color;
    color: @color;
    text-shadow: none;
    border-color: @border-color;
    /* Button Press */
    &:active {
        .button-active(@background-color-active, @color);
    }
}

.button-type(@background-color, @color, @border-color, @background-color-active, @background-image, @background-image-active) {
    background-image: @background-image;
    background-color: @background-color;
    color: @color;
    text-shadow: none;
    border-color: @border-color;
    /* Button Press */
    &:active {
        .button-active-image(@background-color-active, @background-image-active);
    }
}

.disable-button(@disabled-background-color, @disabled-color) {
    background: @disabled-background-color;
    border-color: @disabled-color;
    color: @disabled-color;
    text-shadow: none;
    pointer-events: none;
}

buttons.less

@import "variables.less";
@import "mixins.less";
/* ----------------------------------
 * Buttons
 * ---------------------------------- */

.button::-moz-focus-inner,
a[role="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    outline: none;
    margin-top: -0.2rem; /* To fix line-height bug (697451) */
}

button,
a[role="button"],
.button {
    width: 100%;
    height: 3.8rem;
    margin: 0 0 1rem;
    padding: 0 1.5rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom / auto 100%;
    border: 0.1rem solid #a6a6a6;
    border-radius: 0.2rem;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 3.8rem;
    color: @default-color;
    text-align: center;
    text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
    text-decoration: none;
    outline: none;
    /* Press (default & recommend) */
    &:active {
        .button-active(@default-background-color, @default-color);
    }
    /* Recommend */
    &.recommend {
        .button-type(@recommend-background-color, @default-color, @recommend-border-color, @default-background-color, url(buttons/images/ui/recommend.png), url(buttons/images/ui/danger-press.png));
    }
    /* Danger */
    &.danger,
    &.danger[role="button"] {
        .button-type(@danger-background-color, @danger-color, @danger-border-color, @danger-background-color-active, url(buttons/images/ui/danger.png),url(buttons/images/ui/danger-press.png));
    }
    /* Disabled (default & recommend) */
    &[disabled],
    &[aria-disabled="true"] {
        &.recommend {
            .disable-button(@default-disabled-background-color, @default-disabled-color);
        }
        /* Danger disabled */
        &.danger {
            .disable-button(@danger-disabled-background-color, @danger-disabled-color);
        }
    }
}
/* Disabled with dark background */
.dark {
    button[disabled],
    .button[aria-disabled="true"],
    a[role="button"][aria-disabled="true"] {
        background: @dark-disabled-background;
        color: @dark-disabled-color;
        border-color: @dark-disabled-color;
        text-shadow: none;
        pointer-events: none;
    }
}
/* ----------------------------------
 * Buttons inside lists
 * ---------------------------------- */
li button,
li a[role="button"],
li .button {
    position: relative;
    background: @default-disabled-background-color;
    text-align: left;
    /* For hacking box-shadows we need overflow:visible; so we lose text-overflows...*/
    white-space: normal;
    overflow: visible;
    /* Hacking box-shadow */
    &:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 0.2rem;
        background: url( buttons/images/ui/shadow.png) repeat-x left bottom / auto 100%;
    }
    /* Press */
    &:active:after {
        opacity: 0;
    }
    /* Disabled */
    &[disabled]:after,
    &[aria-disabled="true"]:after {
        background: none;
    }
    /* Icons */
    &.icon {
        padding-right: 3rem;

        &:before {
            content: "";
            width: 3rem;
            height: 3rem;
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -1.5rem;
            background: transparent no-repeat center center / 100% auto;
            pointer-events: none;
        }
    }

    &.icon-view {
        &:before {
            background: url(buttons/images/icons/view.png) no-repeat 1.6rem 0 / 1rem 9rem;
        }

        &:active:before {
            background-position: 1.6rem -3rem;
        }
    }

        &.icon-view:disabled:before,
        &[role="button"][aria-disabled="true"].icon-view:before {
            background-position: 1.6rem -6rem;
        }

    &.icon-dialog {
        font-size: 1.7rem;

        &:before {
            background: url(buttons/images/icons/dialog.png) no-repeat 1.6rem 0 / 1rem 9rem;
            top: 100%;
            margin-top: -2.4rem;
        }

        &:active:before {
            background-position: 1.6rem -3rem;
        }
    }

    .icon-dialog:disabled:before,
    &[aria-disabled="true"].icon-dialog:before {
        background-position: 1.6rem -6rem;
    }
}
/* ----------------------------------
 * Buttons inside lists, compact mode
 * ---------------------------------- */
ul.compact,
ol.compact {
    padding: 0 1.5rem 1.5rem 1.5rem;

    li {
        padding: 1.5rem 0 0.5rem 0;
        border-bottom: solid #bdbdbd 0.1rem;
        display: block;
        overflow: hidden;

        label {
            padding: 0 1.5rem 1rem 1.5rem;
            color: @default-color;
            font-weight: normal;
            font-size: 1.6rem;
            line-height: 1.8rem;
            display: block;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }
}
/* Inputs inside of .button */
.button input,
body[role="application"] .button input {
    border: 0;
    background: none;
}
/* Hides dropdown arrow until bug #649849 is fixed */
.button.icon select {
    width: 130%;
}
/******************************************************************************
 * Right-To-Left layout
 */
html[dir="rtl"] li button,
html[dir="rtl"] li a[role="button"],
html[dir="rtl"] li .button {
    text-align: right;

    &:after {
        background-position: right bottom;
    }

    &.icon {
        padding-left: 3rem;
        padding-right: 1rem;

        &:before {
            left: -1rem;
            right: inherit;
        }
    }

    .icon-view:before {
        background-image: url(buttons/images/icons/view_rtl.png);
        background-position: 1.6rem 0;
    }

    .icon-dialog:before {
        background-image: url(buttons/images/icons/dialog_rtl.png);
        background-position: 1.6rem 0;
    }
}

That is the generated CSS

/* ----------------------------------
 * Buttons
 * ---------------------------------- */
.button::-moz-focus-inner,
a[role="button"]::-moz-focus-inner,
button::-moz-focus-inner {
  border: none;
  outline: none;
  margin-top: -0.2rem;
  /* To fix line-height bug (697451) */

}
button,
a[role="button"],
.button {
  width: 100%;
  height: 3.8rem;
  margin: 0 0 1rem;
  padding: 0 1.5rem;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom / auto 100%;
  border: 0.1rem solid #a6a6a6;
  border-radius: 0.2rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 3.8rem;
  color: #333333;
  text-align: center;
  text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.3);
  text-decoration: none;
  outline: none;
  /* Press (default & recommend) */

  /* Recommend */

  /* Danger */

  /* Disabled (default & recommend) */

}
button:active,
a[role="button"]:active,
.button:active {
  border-color: #008aaa;
  background: #008aaa;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  color: #333333;
}
button.recommend,
a[role="button"].recommend,
.button.recommend {
  background-image: url(buttons/images/ui/recommend.png);
  background-color: #00caf2;
  color: #333333;
  text-shadow: none;
  border-color: #008eab;
  /* Button Press */

}
button.recommend:active,
a[role="button"].recommend:active,
.button.recommend:active {
  background-image: url(buttons/images/ui/danger-press.png);
  background-color: #008aaa;
}
button.danger,
a[role="button"].danger,
.button.danger,
button.danger[role="button"],
a[role="button"].danger[role="button"],
.button.danger[role="button"] {
  background-image: url(buttons/images/ui/danger.png);
  background-color: #b70404;
  color: #ffffff;
  text-shadow: none;
  border-color: #820000;
  /* Button Press */

}
button.danger:active,
a[role="button"].danger:active,
.button.danger:active,
button.danger[role="button"]:active,
a[role="button"].danger[role="button"]:active,
.button.danger[role="button"]:active {
  background-image: url(buttons/images/ui/danger-press.png);
  background-color: #890707;
}
button[disabled],
a[role="button"][disabled],
.button[disabled],
button[aria-disabled="true"],
a[role="button"][aria-disabled="true"],
.button[aria-disabled="true"] {
  /* Danger disabled */

}
button[disabled].recommend,
a[role="button"][disabled].recommend,
.button[disabled].recommend,
button[aria-disabled="true"].recommend,
a[role="button"][aria-disabled="true"].recommend,
.button[aria-disabled="true"].recommend {
  background: #e7e7e7;
  border-color: #c7c7c7;
  color: #c7c7c7;
  text-shadow: none;
  pointer-events: none;
}
button[disabled].danger,
a[role="button"][disabled].danger,
.button[disabled].danger,
button[aria-disabled="true"].danger,
a[role="button"][aria-disabled="true"].danger,
.button[aria-disabled="true"].danger {
  background: #c68484;
  border-color: #a56464;
  color: #a56464;
  text-shadow: none;
  pointer-events: none;
}
/* Disabled with dark background */
.dark button[disabled],
.dark .button[aria-disabled="true"],
.dark a[role="button"][aria-disabled="true"] {
  background: #5f5f5f;
  color: #4d4d4d;
  border-color: #4d4d4d;
  text-shadow: none;
  pointer-events: none;
}
/* ----------------------------------
 * Buttons inside lists
 * ---------------------------------- */
li button,
li a[role="button"],
li .button {
  position: relative;
  background: #e7e7e7;
  text-align: left;
  /* For hacking box-shadows we need overflow:visible; so we lose text-overflows...*/

  white-space: normal;
  overflow: visible;
  /* Hacking box-shadow */

  /* Press */

  /* Disabled */

  /* Icons */

}
li button:after,
li a[role="button"]:after,
li .button:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.2rem;
  background: url(buttons/images/ui/shadow.png) repeat-x left bottom / auto 100%;
}
li button:active:after,
li a[role="button"]:active:after,
li .button:active:after {
  opacity: 0;
}
li button[disabled]:after,
li a[role="button"][disabled]:after,
li .button[disabled]:after,
li button[aria-disabled="true"]:after,
li a[role="button"][aria-disabled="true"]:after,
li .button[aria-disabled="true"]:after {
  background: none;
}
li button.icon,
li a[role="button"].icon,
li .button.icon {
  padding-right: 3rem;
}
li button.icon:before,
li a[role="button"].icon:before,
li .button.icon:before {
  content: "";
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -1.5rem;
  background: transparent no-repeat center center / 100% auto;
  pointer-events: none;
}
li button.icon-view:before,
li a[role="button"].icon-view:before,
li .button.icon-view:before {
  background: url(buttons/images/icons/view.png) no-repeat 1.6rem 0rem 9rem;
}
li button.icon-view:active:before,
li a[role="button"].icon-view:active:before,
li .button.icon-view:active:before {
  background-position: 1.6rem -3rem;
}
li button.icon-view:disabled:before,
li a[role="button"].icon-view:disabled:before,
li .button.icon-view:disabled:before,
li button[role="button"][aria-disabled="true"].icon-view:before,
li a[role="button"][role="button"][aria-disabled="true"].icon-view:before,
li .button[role="button"][aria-disabled="true"].icon-view:before {
  background-position: 1.6rem -6rem;
}
li button.icon-dialog,
li a[role="button"].icon-dialog,
li .button.icon-dialog {
  font-size: 1.7rem;
}
li button.icon-dialog:before,
li a[role="button"].icon-dialog:before,
li .button.icon-dialog:before {
  background: url(buttons/images/icons/dialog.png) no-repeat 1.6rem 0rem 9rem;
  top: 100%;
  margin-top: -2.4rem;
}
li button.icon-dialog:active:before,
li a[role="button"].icon-dialog:active:before,
li .button.icon-dialog:active:before {
  background-position: 1.6rem -3rem;
}
li button .icon-dialog:disabled:before,
li a[role="button"] .icon-dialog:disabled:before,
li .button .icon-dialog:disabled:before,
li button[aria-disabled="true"].icon-dialog:before,
li a[role="button"][aria-disabled="true"].icon-dialog:before,
li .button[aria-disabled="true"].icon-dialog:before {
  background-position: 1.6rem -6rem;
}
/* ----------------------------------
 * Buttons inside lists, compact mode
 * ---------------------------------- */
ul.compact,
ol.compact {
  padding: 0 1.5rem 1.5rem 1.5rem;
}
ul.compact li,
ol.compact li {
  padding: 1.5rem 0 0.5rem 0;
  border-bottom: solid #bdbdbd 0.1rem;
  display: block;
  overflow: hidden;
}
ul.compact li label,
ol.compact li label {
  padding: 0 1.5rem 1rem 1.5rem;
  color: #333333;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 1.8rem;
  display: block;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Inputs inside of .button */
.button input,
body[role="application"] .button input {
  border: 0;
  background: none;
}
/* Hides dropdown arrow until bug #649849 is fixed */
.button.icon select {
  width: 130%;
}
/******************************************************************************
 * Right-To-Left layout
 */
html[dir="rtl"] li button,
html[dir="rtl"] li a[role="button"],
html[dir="rtl"] li .button {
  text-align: right;
}
html[dir="rtl"] li button:after,
html[dir="rtl"] li a[role="button"]:after,
html[dir="rtl"] li .button:after {
  background-position: right bottom;
}
html[dir="rtl"] li button.icon,
html[dir="rtl"] li a[role="button"].icon,
html[dir="rtl"] li .button.icon {
  padding-left: 3rem;
  padding-right: 1rem;
}
html[dir="rtl"] li button.icon:before,
html[dir="rtl"] li a[role="button"].icon:before,
html[dir="rtl"] li .button.icon:before {
  left: -1rem;
  right: inherit;
}
html[dir="rtl"] li button .icon-view:before,
html[dir="rtl"] li a[role="button"] .icon-view:before,
html[dir="rtl"] li .button .icon-view:before {
  background-image: url(buttons/images/icons/view_rtl.png);
  background-position: 1.6rem 0;
}
html[dir="rtl"] li button .icon-dialog:before,
html[dir="rtl"] li a[role="button"] .icon-dialog:before,
html[dir="rtl"] li .button .icon-dialog:before {
  background-image: url(buttons/images/icons/dialog_rtl.png);
  background-position: 1.6rem 0;
}

In my firefox OS simulator it just works fine 😄

Here is the buttons.less with another class called success also I updated the variables.less and the mixins.less
variables.less

@default-background-color: #008aaa;
@default-color: #333;
@default-disabled-background-color: #e7e7e7;
@default-disabled-color: #c7c7c7;

@recommend-background-color: #00caf2;
@recommend-border-color: #008eab;

@danger-background-color: #b70404;
@danger-color: #fff;
@danger-border-color: #820000;
@danger-background-color-active: #890707;
@danger-disabled-background-color: #c68484;
@danger-disabled-color: #a56464;

@success-background-color: green;
@success-color: #fff;
@success-border-color: darken(green, 15%);
@success-background-color-active: darken(green, 20%);
@success-disabled-background-color: lighten(green, 15%);
@success-disabled-color: lighten(green, 20%);

@dark-disabled-background: #5f5f5f;
@dark-disabled-color: #4d4d4d;

mixins.less

.button-active(@background-color, @color) {
    border-color: @background-color;
    background: @background-color;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    color: @color;
}

.button-active-image(@background-color, @background-image) {
    background-image: @background-image;
    background-color: @background-color;
}

.button-type(@background-color, @color, @border-color, @background-color-active) {
    background-color: @background-color;
    color: @color;
    text-shadow: none;
    border-color: @border-color;
    /* Button Press */
    &:active {
        .button-active(@background-color-active, @color);
    }
}

.button-type(@background-color, @color, @border-color, @background-color-active, @background-image) {
    background-image: @background-image;
    background-color: @background-color;
    color: @color;
    text-shadow: none;
    border-color: @border-color;
    /* Button Press */
    &:active {
        .button-active(@background-color-active, @color);
    }
}

.button-type(@background-color, @color, @border-color, @background-color-active, @background-image, @background-image-active) {
    background-image: @background-image;
    background-color: @background-color;
    color: @color;
    text-shadow: none;
    border-color: @border-color;
    /* Button Press */
    &:active {
        .button-active-image(@background-color-active, @background-image-active);
    }
}

.disable-button(@disabled-background-color, @disabled-color) {
    background: @disabled-background-color;
    border-color: @disabled-color;
    color: @disabled-color;
    text-shadow: none;
    pointer-events: none;
}

buttons.less

@import "variables.less";
@import "mixins.less";
/* ----------------------------------
 * Buttons
 * ---------------------------------- */

.button::-moz-focus-inner,
a[role="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    outline: none;
    margin-top: -0.2rem; /* To fix line-height bug (697451) */
}

button,
a[role="button"],
.button {
    width: 100%;
    height: 3.8rem;
    margin: 0 0 1rem;
    padding: 0 1.5rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom / auto 100%;
    border: 0.1rem solid #a6a6a6;
    border-radius: 0.2rem;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 3.8rem;
    color: @default-color;
    text-align: center;
    text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
    text-decoration: none;
    outline: none;
    /* Press (default & recommend) */
    &:active {
        .button-active(@default-background-color, @default-color);
    }
    /* Recommend */
    &.recommend {
        .button-type(@recommend-background-color, @default-color, @recommend-border-color, @default-background-color, url(buttons/images/ui/recommend.png), url(buttons/images/ui/danger-press.png));
    }
    /* Danger */
    &.danger,
    &.danger[role="button"] {
        .button-type(@danger-background-color, @danger-color, @danger-border-color, @danger-background-color-active, url(buttons/images/ui/danger.png),url(buttons/images/ui/danger-press.png));
    }
    /* Danger */
    &.success,
    &.success[role="button"] {
        .button-type(@success-background-color, @default-color, @success-border-color, @success-background-color-active);
    }
    /* Disabled (default & recommend) */
    &[disabled],
    &[aria-disabled="true"] {
        &.recommend {
            .disable-button(@default-disabled-background-color, @default-disabled-color);
        }
        /* Danger disabled */
        &.danger {
            .disable-button(@danger-disabled-background-color, @danger-disabled-color);
        }
    }
}
/* Disabled with dark background */
.dark {
    button[disabled],
    .button[aria-disabled="true"],
    a[role="button"][aria-disabled="true"] {
        background: @dark-disabled-background;
        color: @dark-disabled-color;
        border-color: @dark-disabled-color;
        text-shadow: none;
        pointer-events: none;
    }
}
/* ----------------------------------
 * Buttons inside lists
 * ---------------------------------- */
li button,
li a[role="button"],
li .button {
    position: relative;
    background: @default-disabled-background-color;
    text-align: left;
    /* For hacking box-shadows we need overflow:visible; so we lose text-overflows...*/
    white-space: normal;
    overflow: visible;
    /* Hacking box-shadow */
    &:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 0.2rem;
        background: url( buttons/images/ui/shadow.png) repeat-x left bottom / auto 100%;
    }
    /* Press */
    &:active:after {
        opacity: 0;
    }
    /* Disabled */
    &[disabled]:after,
    &[aria-disabled="true"]:after {
        background: none;
    }
    /* Icons */
    &.icon {
        padding-right: 3rem;

        &:before {
            content: "";
            width: 3rem;
            height: 3rem;
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -1.5rem;
            background: transparent no-repeat center center / 100% auto;
            pointer-events: none;
        }
    }

    &.icon-view {
        &:before {
            background: url(buttons/images/icons/view.png) no-repeat 1.6rem 0 / 1rem 9rem;
        }

        &:active:before {
            background-position: 1.6rem -3rem;
        }
    }

        &.icon-view:disabled:before,
        &[role="button"][aria-disabled="true"].icon-view:before {
            background-position: 1.6rem -6rem;
        }

    &.icon-dialog {
        font-size: 1.7rem;

        &:before {
            background: url(buttons/images/icons/dialog.png) no-repeat 1.6rem 0 / 1rem 9rem;
            top: 100%;
            margin-top: -2.4rem;
        }

        &:active:before {
            background-position: 1.6rem -3rem;
        }
    }

    .icon-dialog:disabled:before,
    &[aria-disabled="true"].icon-dialog:before {
        background-position: 1.6rem -6rem;
    }
}
/* ----------------------------------
 * Buttons inside lists, compact mode
 * ---------------------------------- */
ul.compact,
ol.compact {
    padding: 0 1.5rem 1.5rem 1.5rem;

    li {
        padding: 1.5rem 0 0.5rem 0;
        border-bottom: solid #bdbdbd 0.1rem;
        display: block;
        overflow: hidden;

        label {
            padding: 0 1.5rem 1rem 1.5rem;
            color: @default-color;
            font-weight: normal;
            font-size: 1.6rem;
            line-height: 1.8rem;
            display: block;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }
}
/* Inputs inside of .button */
.button input,
body[role="application"] .button input {
    border: 0;
    background: none;
}
/* Hides dropdown arrow until bug #649849 is fixed */
.button.icon select {
    width: 130%;
}
/******************************************************************************
 * Right-To-Left layout
 */
html[dir="rtl"] li button,
html[dir="rtl"] li a[role="button"],
html[dir="rtl"] li .button {
    text-align: right;

    &:after {
        background-position: right bottom;
    }

    &.icon {
        padding-left: 3rem;
        padding-right: 1rem;

        &:before {
            left: -1rem;
            right: inherit;
        }
    }

    .icon-view:before {
        background-image: url(buttons/images/icons/view_rtl.png);
        background-position: 1.6rem 0;
    }

    .icon-dialog:before {
        background-image: url(buttons/images/icons/dialog_rtl.png);
        background-position: 1.6rem 0;
    }
}

buttons.css

/* ----------------------------------
 * Buttons
 * ---------------------------------- */
.button::-moz-focus-inner,
a[role="button"]::-moz-focus-inner,
button::-moz-focus-inner {
  border: none;
  outline: none;
  margin-top: -0.2rem;
  /* To fix line-height bug (697451) */

}
button,
a[role="button"],
.button {
  width: 100%;
  height: 3.8rem;
  margin: 0 0 1rem;
  padding: 0 1.5rem;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom / auto 100%;
  border: 0.1rem solid #a6a6a6;
  border-radius: 0.2rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 3.8rem;
  color: #333333;
  text-align: center;
  text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.3);
  text-decoration: none;
  outline: none;
  /* Press (default & recommend) */

  /* Recommend */

  /* Danger */

  /* Danger */

  /* Disabled (default & recommend) */

}
button:active,
a[role="button"]:active,
.button:active {
  border-color: #008aaa;
  background: #008aaa;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  color: #333333;
}
button.recommend,
a[role="button"].recommend,
.button.recommend {
  background-image: url(buttons/images/ui/recommend.png);
  background-color: #00caf2;
  color: #333333;
  text-shadow: none;
  border-color: #008eab;
  /* Button Press */

}
button.recommend:active,
a[role="button"].recommend:active,
.button.recommend:active {
  background-image: url(buttons/images/ui/danger-press.png);
  background-color: #008aaa;
}
button.danger,
a[role="button"].danger,
.button.danger,
button.danger[role="button"],
a[role="button"].danger[role="button"],
.button.danger[role="button"] {
  background-image: url(buttons/images/ui/danger.png);
  background-color: #b70404;
  color: #ffffff;
  text-shadow: none;
  border-color: #820000;
  /* Button Press */

}
button.danger:active,
a[role="button"].danger:active,
.button.danger:active,
button.danger[role="button"]:active,
a[role="button"].danger[role="button"]:active,
.button.danger[role="button"]:active {
  background-image: url(buttons/images/ui/danger-press.png);
  background-color: #890707;
}
button.success,
a[role="button"].success,
.button.success,
button.success[role="button"],
a[role="button"].success[role="button"],
.button.success[role="button"] {
  background-color: #008000;
  color: #333333;
  text-shadow: none;
  border-color: #003400;
  /* Button Press */

}
button.success:active,
a[role="button"].success:active,
.button.success:active,
button.success[role="button"]:active,
a[role="button"].success[role="button"]:active,
.button.success[role="button"]:active {
  border-color: #001a00;
  background: #001a00;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  color: #333333;
}
button[disabled],
a[role="button"][disabled],
.button[disabled],
button[aria-disabled="true"],
a[role="button"][aria-disabled="true"],
.button[aria-disabled="true"] {
  /* Danger disabled */

}
button[disabled].recommend,
a[role="button"][disabled].recommend,
.button[disabled].recommend,
button[aria-disabled="true"].recommend,
a[role="button"][aria-disabled="true"].recommend,
.button[aria-disabled="true"].recommend {
  background: #e7e7e7;
  border-color: #c7c7c7;
  color: #c7c7c7;
  text-shadow: none;
  pointer-events: none;
}
button[disabled].danger,
a[role="button"][disabled].danger,
.button[disabled].danger,
button[aria-disabled="true"].danger,
a[role="button"][aria-disabled="true"].danger,
.button[aria-disabled="true"].danger {
  background: #c68484;
  border-color: #a56464;
  color: #a56464;
  text-shadow: none;
  pointer-events: none;
}
/* Disabled with dark background */
.dark button[disabled],
.dark .button[aria-disabled="true"],
.dark a[role="button"][aria-disabled="true"] {
  background: #5f5f5f;
  color: #4d4d4d;
  border-color: #4d4d4d;
  text-shadow: none;
  pointer-events: none;
}
/* ----------------------------------
 * Buttons inside lists
 * ---------------------------------- */
li button,
li a[role="button"],
li .button {
  position: relative;
  background: #e7e7e7;
  text-align: left;
  /* For hacking box-shadows we need overflow:visible; so we lose text-overflows...*/

  white-space: normal;
  overflow: visible;
  /* Hacking box-shadow */

  /* Press */

  /* Disabled */

  /* Icons */

}
li button:after,
li a[role="button"]:after,
li .button:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.2rem;
  background: url(buttons/images/ui/shadow.png) repeat-x left bottom / auto 100%;
}
li button:active:after,
li a[role="button"]:active:after,
li .button:active:after {
  opacity: 0;
}
li button[disabled]:after,
li a[role="button"][disabled]:after,
li .button[disabled]:after,
li button[aria-disabled="true"]:after,
li a[role="button"][aria-disabled="true"]:after,
li .button[aria-disabled="true"]:after {
  background: none;
}
li button.icon,
li a[role="button"].icon,
li .button.icon {
  padding-right: 3rem;
}
li button.icon:before,
li a[role="button"].icon:before,
li .button.icon:before {
  content: "";
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -1.5rem;
  background: transparent no-repeat center center / 100% auto;
  pointer-events: none;
}
li button.icon-view:before,
li a[role="button"].icon-view:before,
li .button.icon-view:before {
  background: url(buttons/images/icons/view.png) no-repeat 1.6rem 0rem 9rem;
}
li button.icon-view:active:before,
li a[role="button"].icon-view:active:before,
li .button.icon-view:active:before {
  background-position: 1.6rem -3rem;
}
li button.icon-view:disabled:before,
li a[role="button"].icon-view:disabled:before,
li .button.icon-view:disabled:before,
li button[role="button"][aria-disabled="true"].icon-view:before,
li a[role="button"][role="button"][aria-disabled="true"].icon-view:before,
li .button[role="button"][aria-disabled="true"].icon-view:before {
  background-position: 1.6rem -6rem;
}
li button.icon-dialog,
li a[role="button"].icon-dialog,
li .button.icon-dialog {
  font-size: 1.7rem;
}
li button.icon-dialog:before,
li a[role="button"].icon-dialog:before,
li .button.icon-dialog:before {
  background: url(buttons/images/icons/dialog.png) no-repeat 1.6rem 0rem 9rem;
  top: 100%;
  margin-top: -2.4rem;
}
li button.icon-dialog:active:before,
li a[role="button"].icon-dialog:active:before,
li .button.icon-dialog:active:before {
  background-position: 1.6rem -3rem;
}
li button .icon-dialog:disabled:before,
li a[role="button"] .icon-dialog:disabled:before,
li .button .icon-dialog:disabled:before,
li button[aria-disabled="true"].icon-dialog:before,
li a[role="button"][aria-disabled="true"].icon-dialog:before,
li .button[aria-disabled="true"].icon-dialog:before {
  background-position: 1.6rem -6rem;
}
/* ----------------------------------
 * Buttons inside lists, compact mode
 * ---------------------------------- */
ul.compact,
ol.compact {
  padding: 0 1.5rem 1.5rem 1.5rem;
}
ul.compact li,
ol.compact li {
  padding: 1.5rem 0 0.5rem 0;
  border-bottom: solid #bdbdbd 0.1rem;
  display: block;
  overflow: hidden;
}
ul.compact li label,
ol.compact li label {
  padding: 0 1.5rem 1rem 1.5rem;
  color: #333333;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 1.8rem;
  display: block;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Inputs inside of .button */
.button input,
body[role="application"] .button input {
  border: 0;
  background: none;
}
/* Hides dropdown arrow until bug #649849 is fixed */
.button.icon select {
  width: 130%;
}
/******************************************************************************
 * Right-To-Left layout
 */
html[dir="rtl"] li button,
html[dir="rtl"] li a[role="button"],
html[dir="rtl"] li .button {
  text-align: right;
}
html[dir="rtl"] li button:after,
html[dir="rtl"] li a[role="button"]:after,
html[dir="rtl"] li .button:after {
  background-position: right bottom;
}
html[dir="rtl"] li button.icon,
html[dir="rtl"] li a[role="button"].icon,
html[dir="rtl"] li .button.icon {
  padding-left: 3rem;
  padding-right: 1rem;
}
html[dir="rtl"] li button.icon:before,
html[dir="rtl"] li a[role="button"].icon:before,
html[dir="rtl"] li .button.icon:before {
  left: -1rem;
  right: inherit;
}
html[dir="rtl"] li button .icon-view:before,
html[dir="rtl"] li a[role="button"] .icon-view:before,
html[dir="rtl"] li .button .icon-view:before {
  background-image: url(buttons/images/icons/view_rtl.png);
  background-position: 1.6rem 0;
}
html[dir="rtl"] li button .icon-dialog:before,
html[dir="rtl"] li a[role="button"] .icon-dialog:before,
html[dir="rtl"] li .button .icon-dialog:before {
  background-image: url(buttons/images/icons/dialog_rtl.png);
  background-position: 1.6rem 0;
}

@DerKnerd
Copy link
Author

It still has a few bugs, I try to work it out, also you should remove the images and replace them with gradients.

@gasolin
Copy link
Contributor

gasolin commented Feb 19, 2014

@DerKnerd I was originally wondering if LESS could help us auto-generate vendor-prefix such as text-overflow or box-sizing https://github.com/csshat/lesshat/tree/master/mixins and colors. But not sure if mixin helps.

Your code is really helpful to make me think about the capability to let developer custom their own button type and more. thanks!

@DerKnerd
Copy link
Author

No problem :) Btw. Webessentials for Visual Studio has nice features about it. If you need more help just contact me ;) I think, that the guys from twbs could help ;)

@gasolin
Copy link
Contributor

gasolin commented Feb 20, 2014

more discussions about Apply CSS variable or LESS for building blocks https://groups.google.com/forum/#!topic/mozilla.dev.gaia/fkfVlOE-OjM

@DerKnerd
Copy link
Author

I don't have an account there, but it seems like they don't really understand the advantages of LESS or SASS...

@gasolin
Copy link
Contributor

gasolin commented Feb 21, 2014

I think @rnowm (Arnau) states that BB will go to web component instead of refactor or introduce pre-processor like LESS , ex: http://mozilla.github.io/brick/docs.html or http://www.polymer-project.org/

@gasolin gasolin mentioned this issue Feb 21, 2014
Closed
@rnowm
Copy link
Member

rnowm commented Feb 21, 2014

@DerKnerd thanks for your work with the LESS proposal.
As discussed in dev-gaia, I'm initially against pre-processors, but I will take a closer look to it.

@gasolin I hope one day we will move to Web components, but as that depends on the platform, we should probably continue with the refactor in https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks.
Please check headers examples here:
https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks/blob/v2/style/headers.css
and:
https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks/tree/v2/style/headers
And let me know what you think ;)

We could also replicate the LESS approach there in a branch and see the benefits.
Could you please also help us suggesting how should we should merge this external repository (Gaia-UI-Building-Blocks) into gaia (repo, submodules...) I know this has been discussed before in dev-gaia and maybe now is the right time to do it.

@gasolin
Copy link
Contributor

gasolin commented Apr 11, 2014

@rnowm I just got some time to check https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks/blob/v2/style/headers.css

It looks more structure. Though @import helps us write more structured css, @import in css does has some performance impact, so does CSS variables.
That's why we need pre-processor to let us able to write structured css without sacrifice the performance by squash them in a single minified file in production.

I noticed that the css selectors does not changed a lot in v2. Naming convention suggestion is filed in issue #32

@cctuan and I are planning to propose a summer of code project for student to make a better cross platform support for FirefoxOS UI, we'll mentor student to evaluate if LESS is a good way to go, and see what's we can help to improve and contribute back to BB and gaia.

@rnowm
Copy link
Member

rnowm commented Apr 12, 2014

@gasolin after we are done with Visual refresh I could use some time to review pre-processors and create a new demo for the headers.
BB has chanced a lot since we created https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks/blob/v2/style/headers.css
I love your idea for the summer of code :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gasolin @rnowm @DerKnerd