add extjs 6.0.1 sources

[extjs.git] / extjs / modern / theme-blackberry / sass / src / Button.scss

//// Toolbar icons used with permission from Drew Wilson\r
//// http://pictos.drewwilson.com/\r
//// Pictos icons are (c) 2010 Drew Wilson\r
\r
/**\r
 * @class Ext.Button\r
 */\r
\r
$button-border-radius: 5px;\r
\r
.x-button {\r
    border: 0px;\r
    height: 35px;\r
    padding: 0 3px;\r
    position: relative;\r
    background: transparent;\r
    overflow: visible;\r
    @include background(linear-gradient(color-stops(lighten($highlight-color, 5%), $highlight-color)));\r
\r
    .x-button-label {\r
        color: #323232;\r
    }\r
\r
    &.tabmenu {\r
        width: 61px;\r
        margin-left: 0;\r
\r
        .x-button-icon:after {\r
            content: '';\r
            position: absolute;\r
            top: 0;\r
            left: 0;\r
            right: 0;\r
            bottom: 0;\r
            background-size: 32px !important;\r
            background-repeat: no-repeat;\r
            background-image: url('#{$bb-icons-path}/ic_overflow_tab.png');\r
        }\r
    }\r
}\r
\r
.x-button-pressed,\r
.x-button-pressing {\r
  background: #646464;\r
}\r
\r
.x-button-icon {\r
    width: 40px;\r
    height: 40px;\r
    background-size: 36px;\r
    background-position: bottom center;\r
\r
    &:after {\r
        display: block;\r
        position: absolute;\r
        top: 0;\r
        right: 0;\r
        bottom: 0;\r
        left: 0;\r
        width: 100%;\r
        height: 100%;\r
        background-size: 42px;\r
        background-position: 50%;\r
        background-repeat: no-repeat\r
    }\r
}\r
\r
.x-button-round,\r
.x-button-decline-round,\r
.x-button-confirm-round {\r
    @include border-radius(20px);\r
\r
    &:before {\r
        @include border-radius(19px);\r
    }\r
}\r
\r
.x-button-label {\r
    position: relative;\r
    font-size: 14px;\r
    padding: 0 5px;\r
}\r
\r
.x-badge {\r
    right: 5px;\r
}\r
\r
// Toolbar buttons\r
\r
.x-toolbar {\r
    .x-button {\r
        margin: 0 5px;\r
        padding: 0 10px;\r
    }\r
}\r
\r
// Back button\r
\r
.x-toolbar .x-button-back,\r
.x-toolbar .x-button-forward {\r
    height: 100%;\r
    margin: 0 !important;\r
    border: 0;\r
    @include border-radius(0);\r
    @include box-shadow(none);\r
    background: transparent;\r
    background-image: none;\r
    @include st-box-orient(vertical);\r
    min-width: 4em;\r
\r
    .x-button-icon {\r
        margin: 0 auto;\r
        display: block;\r
        height: 42px;\r
        background-image: url('#{$bb-icons-path}/ic_previous.png');\r
        background-size: 30px;\r
        background-position: 35% center;\r
        min-width: 30px;\r
\r
        &:before {\r
            content: '';\r
        }\r
    }\r
\r
    &:before {\r
        background: transparent;\r
        background-image: none;\r
    }\r
\r
    &.x-button-pressed,\r
		&.x-button-pressing {\r
        background: transparent;\r
        background-image: none;\r
\r
        &:before {\r
            background: transparent;\r
            background-image: none;\r
        }\r
    }\r
\r
		.x-button-label {\r
            display: none;\r
		}\r
\r
    .x-landscape & {\r
        .x-button-icon {\r
            margin-top: 8px;\r
            background-position: center 4px;\r
        }\r
    }\r
}\r
\r
.x-toolbar .x-button-back {\r
    padding: 0 30px 0 14px;\r
\r
    &:before {\r
        @include rotate(10deg);\r
        position: absolute;\r
        right: 0px;\r
        top: 5px;\r
        bottom: 5px;\r
        border-color: #0f76c2;\r
        border-width: 0 2px 0 0;\r
        border-style: solid;\r
        @include border-radius(0);\r
        content: '';\r
    }\r
}\r
\r
.x-toolbar .x-button-forward {\r
    padding: 0 14px 0 20px;\r
\r
    &:before {\r
        @include rotate(-6deg);\r
        left: 5px;\r
        top: -5px;\r
        bottom: -5px;\r
        border-color: $base-color;\r
        border-width: 0 0 0 2px;\r
        @include border-radius(0);\r
    }\r
\r
    .x-button-icon {\r
        background-image: url('#{$bb-icons-path}/ic_next.png');\r
        background-position: center center;\r
    }\r
}\r
\r
// Badges\r
\r
.x-hasbadge {\r
    overflow: visible;\r
}\r
\r
.x-badge {\r
    background-color: #0092CC;\r
}\r
\r
// Icons\r
\r
.x-button-icon {\r
    width: 1.5em;\r
    height: 1.5em;\r
\r
    &:before {\r
        color: #323232;\r
        font-size: 24px;\r
        line-height: .9em;\r
    }\r
}\r
\r
@if $include-default-icons {\r
    @include icon('calendar');\r
    @include icon('action');\r
    @include icon('add');\r
    @include icon('arrow_down');\r
    @include icon('arrow_left');\r
    @include icon('arrow_right');\r
    @include icon('arrow_up');\r
    @include icon('compose');\r
    @include icon('delete');\r
    @include icon('organize');\r
    @include icon('refresh');\r
    @include icon('reply');\r
    @include icon('search');\r
    @include icon('settings');\r
    @include icon('star');\r
    @include icon('trash');\r
    @include icon('maps');\r
    @include icon('locate');\r
    @include icon('home');\r
    @include icon('bookmarks');\r
    @include icon('download');\r
    @include icon('favorites');\r
    @include icon('info');\r
    @include icon('more');\r
    @include icon('time');\r
    @include icon('user');\r
    @include icon('team');\r
    @include icon('list');\r
}\r