Delete variables.less

Delete variables.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/JimiPedros/JimiPedros.github.io.git/'


Fix select2 style with errors

Fix select2 style with errors

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/sonatra/sonatra-theme-gluon.git/'


Create _bootstrap-rtl.less

Create _bootstrap-rtl.less

// --------------------------------------------------
// Right-to-Left (RTL) Theme for Bootstrap 3.1.x
// Morteza Ansarinia <ansarinia@me.com>
// http://github.com/morteza/bootstrap-rtl
// --------------------------------------------------

// Core variables and mixins imported from the latest original bootstrap
@import "../../bower_components/bootstrap/less/variables.less";
@import "../../bower_components/bootstrap-rtl/less/variables-rtl.less";

// Mixins
// --------------------------------------------------

// Utilities
@import "../../bower_components/bootstrap/less/mixins/hide-text.less";
@import "../../bower_components/bootstrap/less/mixins/opacity.less";
@import "../../bower_components/bootstrap/less/mixins/image.less";
@import "../../bower_components/bootstrap/less/mixins/labels.less";
@import "../../bower_components/bootstrap/less/mixins/reset-filter.less";
@import "../../bower_components/bootstrap/less/mixins/resize.less";
@import "../../bower_components/bootstrap/less/mixins/responsive-visibility.less";
@import "../../bower_components/bootstrap/less/mixins/size.less";
@import "../../bower_components/bootstrap/less/mixins/tab-focus.less";
@import "../../bower_components/bootstrap/less/mixins/text-emphasis.less";
@import "../../bower_components/bootstrap/less/mixins/text-overflow.less";
@import "../../bower_components/bootstrap/less/mixins/vendor-prefixes.less";

// Components
@import "../../bower_components/bootstrap/less/mixins/alerts.less";
@import "../../bower_components/bootstrap/less/mixins/buttons.less";
@import "../../bower_components/bootstrap/less/mixins/panels.less";
@import "../../bower_components/bootstrap-rtl/less/mixins/pagination-rtl.less"; // RTL
@import "../../bower_components/bootstrap/less/mixins/list-group.less";
@import "../../bower_components/bootstrap/less/mixins/nav-divider.less";
@import "../../bower_components/bootstrap/less/mixins/forms.less";
@import "../../bower_components/bootstrap/less/mixins/progress-bar.less";
@import "../../bower_components/bootstrap/less/mixins/table-row.less";

// Skins
@import "../../bower_components/bootstrap/less/mixins/background-variant.less";
@import "../../bower_components/bootstrap/less/mixins/border-radius.less";
@import "../../bower_components/bootstrap-rtl/less/mixins/gradients-rtl.less"; // RTL

// Layout
@import "../../bower_components/bootstrap/less/mixins/clearfix.less";
@import "../../bower_components/bootstrap/less/mixins/center-block.less";
@import "../../bower_components/bootstrap/less/mixins/nav-vertical-align.less";
@import "../../bower_components/bootstrap-rtl/less/mixins/grid-framework-rtl.less"; // RTL
@import "../../bower_components/bootstrap-rtl/less/mixins/grid-rtl.less"; // RTL

// Reset and dependencies
@import "../../bower_components/bootstrap-rtl/less/normalize-rtl.less";
//@import "print.less";
//@import "glyphicons.less";

// Core CSS
//@import "scaffolding.less";
@import "../../bower_components/bootstrap-rtl/less/type-rtl.less";
//@import "code.less";
@import "../../bower_components/bootstrap-rtl/less/grid-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/tables-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/forms-rtl.less";
//@import "buttons.less";

// Components
//@import "component-animations.less";
@import "../../bower_components/bootstrap-rtl/less/dropdowns-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/button-groups-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/input-groups-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/navs-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/navbar-rtl.less";
//@import "breadcrumbs.less";
@import "../../bower_components/bootstrap-rtl/less/pagination-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/pager-rtl.less";
//@import "labels.less";
@import "../../bower_components/bootstrap-rtl/less/badges-rtl.less";
//@import "jumbotron.less";
//@import "thumbnails.less";
@import "../../bower_components/bootstrap-rtl/less/alerts-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/progress-bars-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/media-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/list-group-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/panels-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/responsive-embed-rtl.less";
//@import "wells.less";
@import "../../bower_components/bootstrap-rtl/less/close-rtl.less";

// Components w/ JavaScript
@import "../../bower_components/bootstrap-rtl/less/modals-rtl.less";
//@import "tooltip.less";
@import "../../bower_components/bootstrap-rtl/less/popovers-rtl.less";
@import "../../bower_components/bootstrap-rtl/less/carousel-rtl.less";

// Utility classes
@import "../../bower_components/bootstrap-rtl/less/utilities-rtl.less";
//@import "responsive-utilities.less";

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


Vary padding, text overlay Z index

Vary padding, text overlay Z index

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/theworkers/HLTheme.git/'


update styles

update styles

fatal: unable to access 'https://github.com/PatLillis/brackets-show-whitespace-vs.git/': The requested URL returned error: 403


darken and desat disabled buttons (#8722)

.bk-btn {
  height: 100%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;

  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  border: 1px solid transparent;
  border-radius: @border-radius;
  outline: 0;

  .no-user-select();

  &:hover, &:focus {
    text-decoration: none;
  }

  &:active, &.bk-active {
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }

  &[disabled] {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.65;
    box-shadow: none;
  }
}

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:hover {
    background-color: darken(@background, 4%);
    border-color: darken(@border, 8%);
  }

  &.bk-active {
    background-color: darken(@background, 8%);
    border-color: darken(@border, 12%);
  }

  &[disabled] {
    &, &:hover, &:focus, &:active, &.bk-active {
      background-color: darken(desaturate(@background, 30%), 10%);
      border-color: @border;
    }
  }
}

.bk-btn-default {
  @btn-default-color:  #333;
  @btn-default-bg:     #fff;
  @btn-default-border: #ccc;
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}

.bk-btn-primary {
  @btn-primary-color:  #fff;
  @btn-primary-bg:     #428bca;
  @btn-primary-border: darken(@btn-primary-bg, 5%);
  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}

.bk-btn-success {
  @btn-success-color:  #fff;
  @btn-success-bg:     #5cb85c;
  @btn-success-border: darken(@btn-success-bg, 5%);
  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}

.bk-btn-info {
  @btn-info-color:     #fff;
  @btn-info-bg:        #5bc0de;
  @btn-info-border:    darken(@btn-info-bg, 5%);
  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}

.bk-btn-warning {
  @btn-warning-color:  #fff;
  @btn-warning-bg:     #f0ad4e;
  @btn-warning-border: darken(@btn-warning-bg, 5%);
  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}

.bk-btn-danger {
  @btn-danger-color:   #fff;
  @btn-danger-bg:      #d9534f;
  @btn-danger-border:  darken(@btn-danger-bg, 5%);
  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}

.bk-btn-group {
  height: 100%;

  .flex();
  .flex-wrap(nowrap);
  .align-items(center);
  .flex-direction(row);

  & > .bk-btn {
    .flex-grow(1);
  }

  & > .bk-btn + .bk-btn {
    margin-left: -1px;
  }

  & > .bk-btn:first-child:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

  & > .bk-btn:not(:first-child):last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  & > .bk-btn:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  .bk-dropdown-toggle {
    .item-flex(0, 0, 0);
    padding: @padding-vertical (@padding-horizontal/2);
  }
}

.bk-btn {
  height: 100%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;

  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  border: 1px solid transparent;
  border-radius: @border-radius;
  outline: 0;

  .no-user-select();

  &:hover, &:focus {
    text-decoration: none;
  }

  &:active, &.bk-active {
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }

  &[disabled] {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.65;
    box-shadow: none;
  }
}

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:hover {
    background-color: darken(@background, 4%);
    border-color: darken(@border, 8%);
  }

  &.bk-active {
    background-color: darken(@background, 8%);
    border-color: darken(@border, 12%);
  }

  &[disabled] {
    &, &:hover, &:focus, &:active, &.bk-active {
      background-color: @background;
      border-color: @border;
    }
  }
}

.bk-btn-default {
  @btn-default-color:  #333;
  @btn-default-bg:     #fff;
  @btn-default-border: #ccc;
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}

.bk-btn-primary {
  @btn-primary-color:  #fff;
  @btn-primary-bg:     #428bca;
  @btn-primary-border: darken(@btn-primary-bg, 5%);
  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}

.bk-btn-success {
  @btn-success-color:  #fff;
  @btn-success-bg:     #5cb85c;
  @btn-success-border: darken(@btn-success-bg, 5%);
  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}

.bk-btn-info {
  @btn-info-color:     #fff;
  @btn-info-bg:        #5bc0de;
  @btn-info-border:    darken(@btn-info-bg, 5%);
  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}

.bk-btn-warning {
  @btn-warning-color:  #fff;
  @btn-warning-bg:     #f0ad4e;
  @btn-warning-border: darken(@btn-warning-bg, 5%);
  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}

.bk-btn-danger {
  @btn-danger-color:   #fff;
  @btn-danger-bg:      #d9534f;
  @btn-danger-border:  darken(@btn-danger-bg, 5%);
  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}

.bk-btn-group {
  height: 100%;

  .flex();
  .flex-wrap(nowrap);
  .align-items(center);
  .flex-direction(row);

  & > .bk-btn {
    .flex-grow(1);
  }

  & > .bk-btn + .bk-btn {
    margin-left: -1px;
  }

  & > .bk-btn:first-child:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

  & > .bk-btn:not(:first-child):last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  & > .bk-btn:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  .bk-dropdown-toggle {
    .item-flex(0, 0, 0);
    padding: @padding-vertical (@padding-horizontal/2);
  }
}


Signed-off-by: Ge-yuan-jun <daydaygyj@gmail.com>

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/XUEJS/xue-project.git/'


fixed vertical align issues on xs

fixed vertical align issues on xs

///*
// * Tabs component theme overrides
// *------------------------------------------------------------------------------------------
// */

//============== update to Dell-bootstrap-ui
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    width: 100%;
    margin-left: 0;
}

/*
  font-family: icon-ui;
  font-size: 16px;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;

.icon-ui-arrowright:before {
  content: "\e601";
}

  */

@media (min-width: 520px) and (max-width: @screen-xs-max) {
    .nav-tabs {
        display: block;
        width: 107%;
        margin-left: -15px;
        margin-right: -15px;
        > li {
            background: @white;
            width: 105%;
            border: 1px solid @nav-tabs-border-color;
            margin-bottom: -1px;
            margin-left: -1px;
            height: auto;
            padding-right: 4%;

            &:first-child {
                margin-left: -1px;
                border-top: 1px solid @nav-tabs-border-color;
            }
            &:last-child {
                margin-left: -1px;
                border-bottom: 1px solid @nav-tabs-border-color;
            }
            &:hover {
                background: @dell-highlight-blue;
                color: @dell-blue;
            }
            &.active {
                background: @white;
                border-bottom-color: transparent;
                overflow: hidden;
                > a,
                > a:hover,
                > a:focus {
                    border-color: transparent;
                    width: 100%;
                    margin-left: -1px;
                    margin-bottom: -1px !important;
                    border-top: none;
                    padding: 10px 15px;
                    color: @dell-blue;

                }
                a:hover {
                    background: @dell-highlight-blue;
                }
                &:last-child {
                    margin-left: -1px;
                    margin-bottom: 0;
                }
            }
            > a {
                text-align: left !important;
                border: none;
                background: none;
                &:hover,
                &:focus {
                    border-color: transparent;
                    background: none;
                    color: @dell-blue;
                }
            }
        }

        &.nav-justified {
            width: 107%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }

                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }

        &.nav-centered {
            width: 107%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }

                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }
    }
}

@media (min-width: 100px) and (max-width: 520px) {
    .nav-tabs {
        display: block;
        width: 112%;
        margin-left: -15px;
        margin-right: -15px;

        > li {
            background: @white;
            width: 103%;
            border: 1px solid @nav-tabs-border-color;
            margin-bottom: -1px;
            margin-left: -1px;
            height: auto;
            padding-right: 5%;
            &:first-child {
                margin-left: -1px;
                border-top: 1px solid @nav-tabs-border-color;
            }
            &:last-child {
                margin-left: -1px;
                border-bottom: 1px solid @nav-tabs-border-color;
            }
            &:hover {
                background: @dell-highlight-blue;
                color: @dell-blue;
            }
            &.active {
                background: @white;
                border-bottom-color: transparent;
                overflow: hidden;
                > a,
                > a:hover,
                > a:focus {
                    border-color: transparent;
                    width: 100%;
                    margin-left: -1px;
                    margin-bottom: -1px !important;
                    border-top: none;
                    padding: 10px 15px;
                    color: @dell-blue;
                }
                a:hover {
                    background: @dell-highlight-blue;
                }
                &:last-child {
                    margin-left: -1px;
                    margin-bottom: 0;
                }
            }
            > a {
                text-align: left !important;
                border: none;
                background: none;
                &:hover,
                &:focus {
                    border-color: transparent;
                    background: none;
                    color: @dell-blue;
                }
            }
        }

        &.nav-justified {
            width: 112%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }
                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }

        &.nav-centered {
            width: 112%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }
                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }
    }
}

.nav-tabs h4 {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.nav-center-rule {
    border-bottom: 1px solid #ccc;
    top: -11px;
    position: relative;
    z-index: -1;
}
ul.nav-center {
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

.tab-image {
    width: 100px;
    margin-top: 15px;
}

@media (max-width: @screen-md-max) {
    .tab-image {
        width: 80px;
        margin-top: 15px;
    }

}

@media (max-width: @screen-xs-max) {
    .nav-center-rule {
        border-bottom: none;
        bottom:0;
        position: relative;
    }
    .nav-center-container {
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .nav-tabs h4 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .row-offcanvas-right .nav-tabs > li> a > .icon-ui-arrowright {
        float:right;
    }

    .vertical-align {
        position: relative
    }

    .vertical-align-element {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
    .vertical-align-element-carat {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 2%;
    }

    .tab-image {
        width: 90px;
        margin-right: 20px;
        margin-top: 0;
        float: left !important;
        padding-bottom: 50px;

    }

    .block-of-text {
        min-height: 120px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .nav div.vertical-align {
        padding-right: 25px !important;
    }

}

    /*
     * Tab Off Canvas
     * --------------------------------------------------
     */
    @media screen and (max-width: 767px) {
        .row-offcanvas {
            position: relative;
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

        .row-offcanvas-right {
            right: 0;
            [data-toggle="offcanvas"] {
                text-align:left;
                padding: 10px;
                margin-bottom:10px;
                .icon-ui-arrowleft {
                    top: 2px;
                    position: relative;
                }
            }
        }

        .row-offcanvas-left {
            left: 0;
            [data-toggle="offcanvas"] {
                text-align:right;
                padding: 10px;
                margin-bottom:10px;
                .icon-ui-arrowright {
                    top: 2px;
                    position: relative;
                }
            }
        }
        .nav-tabs > li > a {
            position:relative;
            padding-right:25px;
            > .icon-ui-arrowright {
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
                right:2%;
            }

            > .icon-ui-arrowleft {
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
                left:2%;
            }
        }

        .row-offcanvas-right
        .sidebar-offcanvas {
            //        right: -50%; /* 6 columns */
            right: 108%;
            position: fixed;
            top: 0;
            width: 102%;
            left: -100%;
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

        .row-offcanvas-left
        .sidebar-offcanvas {
            left: -50%; /* 6 columns */
        }

        .row-offcanvas-left .tab-content {
            position: fixed;
            top: 0;
            left: 100%;
            width: 102%;
            background: @body-bg;
            height: 3000px;
            // animation goes here
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
            &.active {
                left: 0;
            }

        }

        .row-offcanvas-right .tab-content {
            position: fixed;
            top: 0;
            right: 100%;
            width: 102%;
            z-index:1000;

            // animation goes here
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
            &.active {
                right: 0;
            }
            .tab-pane {
                min-height: 3000px;
                background: @body-bg;
            }
        }
        .row-offcanvas .nav-centered + .tab-content {
            top: -11px;
        }

        .row-offcanvas-left.active {
            left: 50%; /* 6 columns */
        }
        .tab-content .row {
            margin-left: 15px;
            margin-right: 15px;
        }
        .offcanvas-back-btn {
            &.well {
                height: 45px;
                padding: 5px 20px 10px 30px;
            }
            &:before, {
                color: @dell-blue;
                font-family:    'icon-ui';
                content: none !important;
                position: absolute;
                left: 30px;
                padding-top: 7px;
            }
            > .btn-link {
                text-decoration: none;
            }
            .btn {
                padding: 6px 0 !important;
            }
            [class^=icon] {
                top: 2px;
                position: relative;
            }
        }
        .tab-image {
            padding-bottom: 10px;
        }
    }

.nav-centered {
    .nav-centered();
    .nav-tabs-centered();
}

// Nav variations
// --------------------------------------------------

// Justified nav links
// -------------------------

.nav-centered {
  width: 80%;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:1;

  > li {
    float: none;
    &.active {
        border-bottom-color: @body-bg;
    }
    > a {
      text-align: center;
      margin-bottom: 5px;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  + .tab-content {
    border-top: 1px solid @nav-tabs-justified-link-border-color;
    position:relative;
    z-index:0;
    top: -11px;
    padding-top: 10px;
    &.active {
        z-index:1000;

    }
  }

  @media (min-width: @screen-sm-min) {
    > li {
      display: table-cell;
      width: 1%;
      > a {
        margin-bottom: 0;
      }
    }
  }

  @media (max-width: @screen-xs-max) {
    > li {
        &.active {
            z-index:1;
            border-bottom-color: @dell-gray-stroke;
        }
        > a {
            padding-top:20px;
            display:table;
            cursor:pointer;

        }
    }
  }

}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-centered {
  border-bottom: 0;

  > li > a {
    // Override margin from .nav-tabs
    margin-right: 0;
    border-radius: @border-radius-base;
  }

  > .active > a,
  > .active > a:hover,
  > .active > a:focus {
    border: 1px solid @nav-tabs-justified-link-border-color;
  }

  @media (min-width: @screen-sm-min) {
    > li > a {
      //border-bottom: 1px solid @nav-tabs-justified-link-border-color;
      border-radius: @border-radius-base @border-radius-base 0 0;
    }
    > .active > a,
    > .active > a:hover,
    > .active > a:focus {
      border-bottom-color: @nav-tabs-justified-active-link-border-color;
    }
  }
}

///*
// * Tabs component theme overrides
// *------------------------------------------------------------------------------------------
// */

//============== update to Dell-bootstrap-ui
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    width: 100%;
    margin-left: 0;
}

/*
  font-family: icon-ui;
  font-size: 16px;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;

.icon-ui-arrowright:before {
  content: "\e601";
}

  */

@media (min-width: 520px) and (max-width: @screen-xs-max) {
    .nav-tabs {
        display: block;
        width: 107%;
        margin-left: -15px;
        margin-right: -15px;
        > li {
            background: @white;
            width: 105%;
            border: 1px solid @nav-tabs-border-color;
            margin-bottom: -1px;
            margin-left: -1px;
            height: auto;
            padding-right: 4%;

            &:first-child {
                margin-left: -1px;
                border-top: 1px solid @nav-tabs-border-color;
            }
            &:last-child {
                margin-left: -1px;
                border-bottom: 1px solid @nav-tabs-border-color;
            }
            &:hover {
                background: @dell-highlight-blue;
                color: @dell-blue;
            }
            &.active {
                background: @white;
                border-bottom-color: transparent;
                overflow: hidden;
                > a,
                > a:hover,
                > a:focus {
                    border-color: transparent;
                    width: 100%;
                    margin-left: -1px;
                    margin-bottom: -1px !important;
                    border-top: none;
                    padding: 10px 15px;
                    color: @dell-blue;

                }
                a:hover {
                    background: @dell-highlight-blue;
                }
                &:last-child {
                    margin-left: -1px;
                    margin-bottom: 0;
                }
            }
            > a {
                text-align: left !important;
                border: none;
                background: none;
                &:hover,
                &:focus {
                    border-color: transparent;
                    background: none;
                    color: @dell-blue;
                }
            }
        }

        &.nav-justified {
            width: 107%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }

                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }

        &.nav-centered {
            width: 107%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }

                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }
    }
}

@media (min-width: 100px) and (max-width: 520px) {
    .nav-tabs {
        display: block;
        width: 112%;
        margin-left: -15px;
        margin-right: -15px;

        > li {
            background: @white;
            width: 103%;
            border: 1px solid @nav-tabs-border-color;
            margin-bottom: -1px;
            margin-left: -1px;
            height: auto;
            padding-right: 5%;
            &:first-child {
                margin-left: -1px;
                border-top: 1px solid @nav-tabs-border-color;
            }
            &:last-child {
                margin-left: -1px;
                border-bottom: 1px solid @nav-tabs-border-color;
            }
            &:hover {
                background: @dell-highlight-blue;
                color: @dell-blue;
            }
            &.active {
                background: @white;
                border-bottom-color: transparent;
                overflow: hidden;
                > a,
                > a:hover,
                > a:focus {
                    border-color: transparent;
                    width: 100%;
                    margin-left: -1px;
                    margin-bottom: -1px !important;
                    border-top: none;
                    padding: 10px 15px;
                    color: @dell-blue;
                }
                a:hover {
                    background: @dell-highlight-blue;
                }
                &:last-child {
                    margin-left: -1px;
                    margin-bottom: 0;
                }
            }
            > a {
                text-align: left !important;
                border: none;
                background: none;
                &:hover,
                &:focus {
                    border-color: transparent;
                    background: none;
                    color: @dell-blue;
                }
            }
        }

        &.nav-justified {
            width: 112%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }
                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }

        &.nav-centered {
            width: 112%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }
                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }
    }
}

.nav-tabs h4 {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.nav-center-rule {
    border-bottom: 1px solid #ccc;
    top: -11px;
    position: relative;
    z-index: -1;
}
ul.nav-center {
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

.tab-image {
    width: 100px;
    margin-top: 15px;
}

@media (max-width: @screen-md-max) {
    .tab-image {
        width: 80px;
        margin-top: 15px;
    }

}

@media (max-width: @screen-xs-max) {
    .nav-center-rule {
        border-bottom: none;
        bottom:0;
        position: relative;
    }
    .nav-center-container {
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .nav-tabs h4 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .row-offcanvas-right .nav-tabs > li> a > .icon-ui-arrowright {
        float:right;
    }

    .vertical-align {
        position: relative
    }

    .vertical-align-element {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
    .vertical-align-element-carat {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 2%;
    }

    .tab-image {
        width: 90px;
        margin-right: 20px;
        margin-top: 0;
        float: left !important;
        padding-bottom: 50px;

    }

    .block-of-text {
        min-height: 120px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .nav div.vertical-align {
        padding-right: 25px !important;
    }

}

    /*
     * Tab Off Canvas
     * --------------------------------------------------
     */
    @media screen and (max-width: 767px) {
        .row-offcanvas {
            position: relative;
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

        .row-offcanvas-right {
            right: 0;
            [data-toggle="offcanvas"] {
                text-align:left;
                padding: 10px;
                margin-bottom:10px;
                .icon-ui-arrowleft {
                    top: 2px;
                    position: relative;
                }
            }
        }

        .row-offcanvas-left {
            left: 0;
            [data-toggle="offcanvas"] {
                text-align:right;
                padding: 10px;
                margin-bottom:10px;
                .icon-ui-arrowright {
                    top: 2px;
                    position: relative;
                }
            }
        }
        .nav-centered > li > a > .icon-ui-arrowright {
            top: -15px;
            position: relative;
        }

        .row-offcanvas-right
        .sidebar-offcanvas {
            //        right: -50%; /* 6 columns */
            right: 108%;
            position: fixed;
            top: 0;
            width: 102%;
            left: -100%;
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

        .row-offcanvas-left
        .sidebar-offcanvas {
            left: -50%; /* 6 columns */
        }

        .row-offcanvas-left .tab-content {
            position: fixed;
            top: 0;
            left: 100%;
            width: 102%;
            background: @body-bg;
            height: 3000px;
            // animation goes here
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
            &.active {
                left: 0;
            }

        }

        .row-offcanvas-right .tab-content {
            position: fixed;
            top: 0;
            right: 100%;
            width: 102%;
            z-index:1000;

            // animation goes here
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
            &.active {
                right: 0;
            }
            .tab-pane {
                min-height: 3000px;
                background: @body-bg;
            }
        }
        .row-offcanvas .nav-centered + .tab-content {
            top: -11px;
        }

        .row-offcanvas-left.active {
            left: 50%; /* 6 columns */
        }
        .tab-content .row {
            margin-left: 15px;
            margin-right: 15px;
        }
        .offcanvas-back-btn {
            &.well {
                height: 45px;
                padding: 5px 20px 10px 30px;
            }
            &:before, {
                color: @dell-blue;
                font-family:    'icon-ui';
                content: none !important;
                position: absolute;
                left: 30px;
                padding-top: 7px;
            }
            > .btn-link {
                text-decoration: none;
            }
            .btn {
                padding: 6px 0 !important;
            }
            [class^=icon] {
                top: 2px;
                position: relative;
            }
        }
        .tab-image {
            padding-bottom: 10px;
        }
    }

.nav-centered {
    .nav-centered();
    .nav-tabs-centered();
}

// Nav variations
// --------------------------------------------------

// Justified nav links
// -------------------------

.nav-centered {
  width: 80%;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:1;

  > li {
    float: none;
    &.active {
        border-bottom-color: @body-bg;
    }
    > a {
      text-align: center;
      margin-bottom: 5px;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  + .tab-content {
    border-top: 1px solid @nav-tabs-justified-link-border-color;
    position:relative;
    z-index:0;
    top: -11px;
    padding-top: 10px;
    &.active {
        z-index:1000;

    }
  }

  @media (min-width: @screen-sm-min) {
    > li {
      display: table-cell;
      width: 1%;
      > a {
        margin-bottom: 0;
      }
    }
  }

  @media (max-width: @screen-xs-max) {
    > li {
        &.active {
            z-index:1;
            border-bottom-color: @dell-gray-stroke;
        }
        > a {
            padding-top:20px;
            display:table;
            cursor:pointer;

        }
    }
  }

}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-centered {
  border-bottom: 0;

  > li > a {
    // Override margin from .nav-tabs
    margin-right: 0;
    border-radius: @border-radius-base;
  }

  > .active > a,
  > .active > a:hover,
  > .active > a:focus {
    border: 1px solid @nav-tabs-justified-link-border-color;
  }

  @media (min-width: @screen-sm-min) {
    > li > a {
      //border-bottom: 1px solid @nav-tabs-justified-link-border-color;
      border-radius: @border-radius-base @border-radius-base 0 0;
    }
    > .active > a,
    > .active > a:hover,
    > .active > a:focus {
      border-bottom-color: @nav-tabs-justified-active-link-border-color;
    }
  }
}


Fix vertical align of last panel cell in row

fatal: unable to access 'https://github.com/sonatra/sonatra-theme-gluon.git/': The requested URL returned error: 403


Delete rotated-flipped.less

Delete rotated-flipped.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/micklosm/ConstellationGallery-.git/'


fix inline images display

fix inline images display

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/MatTheCat/clean.git/'


Delete variables.less

Delete variables.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/miiiyamoto/jarsprout.git/'


OR-2543 FAB update size and position

OR-2543 FAB update size and position

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/'


Switch to https

Switch to https

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/jordond/resume-site.git/'


fix full screen sunburst layout

fix full screen sunburst layout

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/bmesuere/uni-test.git/'


Fix Comprehension Quiz answer alignment for long answers (BL-10581)

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


remove unneeded rules

remove unneeded rules

.yui3-charmtoken {
    .border-box;
    padding: 10px 20px;

    .charm-token {
        display: block;
        color: @bws-text;

        &.tiny {
            min-width: 200px;
            .charm-icon,
            .category-icon,
            .icon {
                width: 48px;
                height: 48px;
                margin-right: 12px;
                position: relative;
            }
            .charm-icon {
                background: transparent
                    url(/juju-ui/assets/images/charm_48.png)
                    left top no-repeat;
            }
            .badge-approved {
                width: 22px;
                height: 22px;
                margin-top: -6px;
                margin-left: -6px;
                background-image:
                    url(/juju-ui/assets/images/badge_approved_22.png);
                z-index: 10;
            }

            .title {
                display: block;
                margin-bottom: 5px;
                color: @bws-heading;
                font-family: @font-family;
                font-weight: normal;
                font-size: 11pt;
            }
            .metadata,
            .description {
                display: none;
            }
        }
        &.small {
            .charm-icon,
            .category-icon,
            .icon {
                width: 64px;
                height: 64px;
                margin-right: 16px;
                position: relative;
            }
            .charm-icon {
                background: transparent
                    url(/juju-ui/assets/images/charm_64.png)
                    left top no-repeat;
            }
            .badge-approved {
                width: 22px;
                height: 22px;
                margin-top: -6px;
                margin-left: -6px;
                background-image:
                    url(/juju-ui/assets/images/badge_approved_22.png);
                z-index: 10;
            }
        }
        &.large {
            .charm-icon,
            .category-icon,
            .icon {
                width: 96px;
                height: 96px;
                margin-right: 16px;
                position: relative;
            }
            .charm-icon {
                background: transparent
                    url(/juju-ui/assets/images/charm_96.png)
                    left top no-repeat;
            }
            .badge-approved {
                width: 40px;
                height: 40px;
                margin-top: -9px;
                margin-left: -10px;
                background-image:
                    url(/juju-ui/assets/images/badge_approved_40.png);
                z-index: 10;
            }
        }
        .title,
        .metadata,
        .description {
            display: block;
        }
        .title {
            margin-bottom: 5px;
            color: @bws-heading;
            font-family: @font-family;
            font-size: 13.5pt;
            font-weight: normal;
        }
        .metadata {
            font-size: 10.5pt;
        }
    }
    &:hover {
        background-color: #eee;
    }
    &.active {
        padding-right: 14px;
        background-color: #ddd;
        border-right: 6px solid @charm-panel-orange;
    }
}

.yui3-charmtoken-hidden {
    display: none;
}

.yui3-charmtoken {
    .border-box;
    padding: 10px 20px;

    .charm-token {
        display: block;
        color: @bws-text;

        &.tiny {
            min-width: 200px;
            .charm-icon,
            .category-icon,
            .icon {
                width: 48px;
                height: 48px;
                margin-right: 12px;
                margin-bottom: 0px;
                position: relative;
            }
            .charm-icon {
                background: transparent
                    url(/juju-ui/assets/images/charm_48.png)
                    left top no-repeat;
            }
            .badge-approved {
                width: 22px;
                height: 22px;
                margin-top: -6px;
                margin-left: -6px;
                background-image:
                    url(/juju-ui/assets/images/badge_approved_22.png);
                z-index: 10;
            }

            .title {
                display: block;
                margin-bottom: 5px;
                color: @bws-heading;
                font-family: @font-family;
                font-weight: normal;
                font-size: 11pt;
            }
            .metadata,
            .description {
                display: none;
            }
        }
        &.small {
            .charm-icon,
            .category-icon,
            .icon {
                width: 64px;
                height: 64px;
                margin-right: 16px;
                margin-bottom: 0px;
                position: relative;
            }
            .charm-icon {
                background: transparent
                    url(/juju-ui/assets/images/charm_64.png)
                    left top no-repeat;
            }
            .badge-approved {
                width: 22px;
                height: 22px;
                margin-top: -6px;
                margin-left: -6px;
                background-image:
                    url(/juju-ui/assets/images/badge_approved_22.png);
                z-index: 10;
            }
        }
        &.large {
            .charm-icon,
            .category-icon,
            .icon {
                width: 96px;
                height: 96px;
                margin-right: 16px;
                margin-bottom: 0px;
                position: relative;
            }
            .charm-icon {
                background: transparent
                    url(/juju-ui/assets/images/charm_96.png)
                    left top no-repeat;
            }
            .badge-approved {
                width: 40px;
                height: 40px;
                margin-top: -9px;
                margin-left: -10px;
                background-image:
                    url(/juju-ui/assets/images/badge_approved_40.png);
                z-index: 10;
            }
        }
        .title,
        .metadata,
        .description {
            display: block;
        }
        .title {
            margin-bottom: 5px;
            color: @bws-heading;
            font-family: @font-family;
            font-size: 13.5pt;
            font-weight: normal;
        }
        .metadata {
            font-size: 10.5pt;
        }
    }
    &:hover {
        background-color: #eee;
    }
    &.active {
        padding-right: 14px;
        background-color: #ddd;
        border-right: 6px solid @charm-panel-orange;
    }
}

.yui3-charmtoken-hidden {
    display: none;
}


style.less

style.less

@import url(http://fonts.googleapis.com/css?family=Slabo+27px);
@import url(http://fonts.googleapis.com/css?family=Raleway:500,700,400);
@import "variables";

/* === === === === Tool Box Theme Css === === === === */

body {
    background: #282827 url('images/bg.png') repeat top left;
    margin-top: @y * @b;
    font-size: @d + @b + @b;
    font-family: 'Raleway', sans-serif;
    line-height: @x + @b + @a;
    color: @text-white;
}

header {
    border-bottom: @b dashed @gray-60;
}

h1 {
    color: @text-white;
    font-size: @x * @b + @x;
    font-weight: normal;
}

h2 {
    color: @text-white;
    border-bottom: @a dashed @gray-60;
    padding: @b @z @c @b;
    font-weight: normal;
}

h3 {
    color: @text-white;
    padding: @d @z @z @z;
    font-weight: normal;
    font-size: @d + @b + @b;
    text-transform: capitalize;
}

.center {
    float: none !important;
}

footer {
    border-top: @b dashed @gray-60;
    font-size: @d + @b;
    text-align: center;
}

#html {
    border: 1px solid #e1e1e8 !important;
    clear: both;
    margin-bottom: 30px;
    border-radius: 4px 4px;
    position: relative;

    pre {
        padding: @d @d @d 16px;
        font-size: 13px;
        line-height: 1.42857143;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;
        background-color: #444;
        margin: @z;
        border: @z solid #e1e1e8 !important;
        border-radius: 4px;

        .tag {
            color: #89bdff;
        }

        .atn {
            color: #bdb76b;
        }

        .pun {
            color: #fff;
        }

        .atv {
            color: #65B042;
        }
    }
}

/* === === === === Tool Box Css === === === === */
.toolbox {
    margin: @z;
    padding: @z;
    border: @a @toolbox-border solid;
    display: inline-block;

    .title {
        margin: @z;
        padding: @b;
        border-bottom: @a solid @title-border;
        background: @title-bg;
        color: @title-color;
        float: @left;
        width: @yf * @bf;

        .title_name {
            float: @right;
            padding: @b + @a @c @z @z;
            font-size: @d + @b;
        }

        .title_btn {
            float: @left;
            padding: @z @z @z @b;

            button {
                color: @title-button-color;
                text-decoration: @none;
                font-size: @d + @a;
                background: @none;
                border: @z;
                outline: @none;
                cursor: pointer;
            }
        }
    }

    .toolbox_menu {
        float: @left;
        margin: @z;
        padding: @z;

        ul {
            margin: @z;
            padding: @z;

            li {
                margin: @z;
                list-style: @none;
                background: @toolbox-menu-bg;
                clear: both;
                border: @a solid @toolbox-menu-border;
                padding: @c @d;
                overflow: hidden;
                cursor: pointer;
                color: @toolbox-menu-color;

                &.active {
                    color: @toolbox-menu-color-active !important;
                }

                &:hover {
                    color: @toolbox-menu-color-active;
                }

                span {
                    float: @left;
                    height: @x + @b;
                    line-height: @x + @b;
                }

                p {
                    float: @left;
                    margin: @z @z @z @c;
                    padding: @z;
                    height: @x + @b;
                    line-height: @x + @b;
                }
            }
        }
    }
}

/* === === === === Tool Box Line === === === === */
.toolbox-line {
    margin: @z;
    padding: @z;
    border: @a @toolbox-line-border solid;
    display: inline-block;

    .title {
        margin: @z;
        padding: @a;
        border-bottom: @a solid @titl-line-border;
        background: @title-line-bg;
        color: @title-line-color;
        float: @left;
        width: @yf * @bf;

        .title_name {
            float: @right;
            padding: @b + @a @c @z @z;
            font-size: @d + @b;
        }

        .title_btn {
            float: @left;
            padding: @z @z @z @b;

            button {
                color: @title-line-button-color;
                text-decoration: @none;
                font-size: @d + @a;
                background: @none;
                border: @z;
                outline: @none;
                cursor: pointer;
            }
        }
    }

    .toolbox-line-left, .toolbox-line-right {
        float: @left;
        margin: @z;
        padding: @z;

        ul {
            margin: @z;
            padding: @z;

            li {
                margin: @z;
                list-style: @none;
                background: @toolboxline-bg;
                clear: both;
                border: @z solid @toolboxline-border;
                padding: @c @d;
                overflow: hidden;
                cursor: pointer;
                color: @toolboxline-color;

                &:hover {
                    color: @toolboxline-color-active;
                }

                &.active {
                    color: @toolboxline-color-active;
                }

                span {
                    float: @left;
                    height: @x + @b;
                    line-height: @x + @b;
                }

                p {
                    float: @left;
                    margin: @z @z @z @c;
                    padding: @z;
                    height: @x + @b;
                    line-height: @x + @b;
                }
            }
        }
    }
}

/* === === === === Tool Box without text === === === === */
.toolbox-without-text {
    margin: @z;
    padding: @z;
    border: @a @titl-withouttext-border solid;
    display: inline-block;

    .title {
        margin: @z;
        padding: @b;
        border-bottom: @a solid @titl-withouttext-border;
        background: @title-withouttext-bg;
        color: @title-withouttext-color;
        float: @left;
        width: @yf * @bf;

        .title_name {
            float: @right;
            padding: @b + @a @c @z @z;
            font-size: @d + @b;
        }

        .title_btn {
            float: @left;
            padding: @z @z @z @b;

            button {
                color: @title-withouttext-button-color;
                text-decoration: @none;
                font-size: @d + @a;
                background: @none;
                border: @z;
                outline: @none;
                cursor: pointer;
            }
        }
    }

    .toolbox-line-left, .toolbox-line-right {
        float: @left;
        margin: @z;
        padding: @z;

        ul {
            margin: @z;
            padding: @z;

            li {
                margin: @z;
                list-style: @none;
                background: @toolbox-withouttext-bg;
                clear: both;
                border: @a solid @toolbox-withouttext-border;
                padding: @c @d;
                overflow: hidden;
                cursor: pointer;
                color: @toolbox-withouttext-color;

                &:hover {
                    color: @toolbox-withouttext-color-active;
                }

                &.active {
                    color: @toolbox-withouttext-color-active;
                }

                span {
                    float: @left;
                    height: @x + @b;
                    line-height: @x + @b;
                }

                p {
                    float: @left;
                    margin: @z @z @z @c;
                    padding: @z;
                    height: @x + @b;
                    line-height: @x + @b;
                    display: @none;
                }
            }
        }
    }
}

.both {
    clear: both;
}

.hide {
    display: @none;
}

.show {
    display: @block;
}
/* === === === === Tool Box colors === === === === */
#toolbox-color {
    .blue() {
        border: @a @toolbox-blue-border solid;

        .title {
            border-bottom: @a solid @title-blue-border;
            background: @title-blue-bg;
            color: @title-blue-color;

            .title_btn {
                button {
                    color: @title-blue-button-color;
                }
            }
        }

        .toolbox_menu {
            ul {
                li {
                    background: @toolbox-blue-menu-bg;
                    border: @a solid @toolbox-blue-menu-border;
                    color: @toolbox-blue-menu-color;

                    &.active, &:hover {
                        color: @toolbox-blue-menu-color-active !important;
                    }
                }
            }
        }
    }

    .cyan() {
        border: @a @toolbox-cyan-border solid;

        .title {
            border-bottom: @a solid @title-cyan-border;
            background: @title-cyan-bg;
            color: @title-cyan-color;

            .title_btn {
                button {
                    color: @title-cyan-button-color;
                }
            }
        }

        .toolbox_menu {
            ul {
                li {
                    background: @toolbox-cyan-menu-bg;
                    border: @a solid @toolbox-cyan-menu-border;
                    color: @toolbox-cyan-menu-color;

                    &.active, &:hover {
                        color: @toolbox-cyan-menu-color-active !important;
                    }
                }
            }
        }
    }

    .green() {
        border: @a @toolbox-green-border solid;

        .title {
            border-bottom: @a solid @title-green-border;
            background: @title-green-bg;
            color: @title-green-color;

            .title_btn {
                button {
                    color: @title-green-button-color;
                }
            }
        }

        .toolbox_menu {
            ul {
                li {
                    background: @toolbox-green-menu-bg;
                    border: @a solid @toolbox-green-menu-border;
                    color: @toolbox-green-menu-color;

                    &.active, &:hover {
                        color: @toolbox-green-menu-color-active !important;
                    }
                }
            }
        }
    }

    .orange() {
        border: @a @toolbox-orange-border solid;

        .title {
            border-bottom: @a solid @title-orange-border;
            background: @title-orange-bg;
            color: @title-orange-color;

            .title_btn {
                button {
                    color: @title-orange-button-color;
                }
            }
        }

        .toolbox_menu {
            ul {
                li {
                    background: @toolbox-orange-menu-bg;
                    border: @a solid @toolbox-orange-menu-border;
                    color: @toolbox-orange-menu-color;

                    &.active, &:hover {
                        color: @toolbox-orange-menu-color-active !important;
                    }
                }
            }
        }
    }

    .red() {
        border: @a @toolbox-red-border solid;

        .title {
            border-bottom: @a solid @title-red-border;
            background: @title-red-bg;
            color: @title-red-color;

            .title_btn {
                button {
                    color: @title-red-button-color;
                }
            }
        }

        .toolbox_menu {
            ul {
                li {
                    background: @toolbox-red-menu-bg;
                    border: @a solid @toolbox-red-menu-border;
                    color: @toolbox-red-menu-color;

                    &.active, &:hover {
                        color: @toolbox-red-menu-color-active !important;
                    }
                }
            }
        }
    }
}

#toolbox-blue, #toolbox-cyan, #toolbox-green, #toolbox-orange, #toolbox-red {
    margin: @z;
    padding: @z;
    display: inline-block;

    .title {
        margin: @z;
        padding: @b;
        float: @left;
        width: @yf * @bf;

        .title_name {
            float: @right;
            padding: @b + @a @c @z @z;
            font-size: @d + @b;
        }

        .title_btn {
            float: @left;
            padding: @z @z @z @b;

            button {
                text-decoration: @none;
                font-size: @d + @a;
                background: @none;
                border: @z;
                outline: @none;
                cursor: pointer;
            }
        }
    }

    .toolbox_menu {
        float: @left;
        margin: @z;
        padding: @z;

        ul {
            margin: @z;
            padding: @z;

            li {
                margin: @z;
                list-style: @none;
                clear: both;
                padding: @c @d;
                overflow: hidden;
                cursor: pointer;

                span {
                    float: @left;
                    height: @x + @b;
                    line-height: @x + @b;
                }

                p {
                    float: @left;
                    margin: @z @z @z @c;
                    padding: @z;
                    height: @x + @b;
                    line-height: @x + @b;
                }
            }
        }
    }
}

/* === === === === Blue Colors === === === === */
#toolbox-blue {
    #toolbox-color > .blue;
}

/* === === === === Cyan Colors === === === === */
#toolbox-cyan {
    #toolbox-color > .cyan;
}
/* === === === === Green Colors === === === === */
#toolbox-green {
    #toolbox-color > .green;
}
/* === === === === Orange Colors === === === === */
#toolbox-orange {
    #toolbox-color > .orange;
}
/* === === === === Red Colors === === === === */
#toolbox-red {
    #toolbox-color > .red;
}

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


Adapting content

Adapting content

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/'


Bring article cards up to date with vars

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/hevnly/asset-bazaar.git/'


Fix issue where images on edition page aren't centered


Create the tagline.less file

Create the tagline.less file


Extract app list component

Extract app list component

fatal: unable to access 'https://github.com/mesosphere/marathon-ui.git/': The requested URL returned error: 403


icon-share needed a vertical alignment correction

fatal: unable to access 'https://github.com/dedalozzo/pit-bootstrap.git/': The requested URL returned error: 403


set `color` for options in the select dropdown, because the inherited `color` might be too light.

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/'


added rotation to the error message

added rotation to the error message

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/dedalozzo/pit-bootstrap.git/'


Add font-awesome rotated-flipped file

Add font-awesome rotated-flipped file

with font-awesome patterns

// Rotated & Flipped Icons
// -------------------------

.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }

.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1, 2); }

error: pathspec 'cp-strap/src/stylesheets/icons/font-awesome/less/rotated-flipped.less' did not match any file(s) known to git


@import "bootstrap-custom.less";
@import "variables-custom.less";

@navbar-brand-height: 36px;
@sticky-navbar-height: 60px;

#reactive-manifesto-banner {
    // banner is 143px wide. hide it when screen is too small so it
    // doesn't block the navbar.
    @media (max-width: (@container-lg + (143px * 2))) {
        display: none;
    }
}

.navbar {
    @transition-time: 0.2s;

    background-color: #fff;
    transition: all @transition-time ease;
    font-weight: 500;
    font-size: @font-size-base * 1.2;

    .navbar-brand {
        transition: all @transition-time ease;

        img {
            height: @navbar-brand-height;
        }

        // center logo vertically
        padding-top: ((@navbar-height - @navbar-brand-height) / 2 + 1);
    }

    .navbar-nav {
        a {
            transform: scale(0.85, 1.0);
        }
    }

    @media (min-width: @grid-float-breakpoint) {
        .navbar-nav {
            & > li {
                transition: all @transition-time ease;

                // dividers between navbar items
                &:not(:last-child) {
                    border-right: 2px solid @gray-lighter;
                }

                // center items vertically
                margin-top: ((@navbar-height - @line-height-computed) / 4);
            }

            // navbar link colors
            a {
                color: @gray-base;

                &.vertx-2-link {
                    color: #999;
                }

                &:hover {
                    color: @brand-primary;
                }
            }

            .dropdown-menu {
                box-shadow: none;
                border: 1px solid #e7e7e7;
                margin-right: 11.5px;

                & > li > a:hover, & > li > a:focus {
                    background-color: transparent;
                }

                & > li:hover, & > li:focus {
                    background-color: #e7e7e7;
                }
            }
        }

        &.sticky {
            min-height: @sticky-navbar-height;
            height: @sticky-navbar-height;

            .navbar-brand {
                height: @sticky-navbar-height;

                // center logo vertically
                padding-top: (@sticky-navbar-height - @navbar-brand-height) / 2 + 1;
            }

            .navbar-nav > li {
                // center items vertically
                margin-top: ((@sticky-navbar-height - @line-height-computed) / 4);

                & > a {
                    padding-top: ((@sticky-navbar-height - @line-height-computed) / 4);
                    padding-bottom: ((@sticky-navbar-height - @line-height-computed) / 4);
                }
            }
        }
    }
}

.index-header {
    background-color: @brand-primary;
    color: #fff;
    padding-top: 60px + @navbar-height; // skip sticky navbar
    padding-bottom: 95px;

    h2 {
        font-weight: 400;
        font-size: @font-size-base * 3.5;

        strong {
            font-weight: 500;
        }
    }

    .buttons {
        padding-top: 15px;
    }

    .btn {
        color: #fff;
        font-weight: 500;
        background-color: transparent;

        &:hover {
            background-color: #fff;
            color: @brand-primary;
        }

        i {
            margin-top: 4px;
            margin-right: 6px;
            line-height: 1em;
            float: left;
        }
    }

    .github-btn {
        padding-top: 16px;
        margin-left: 10px;
        display: inline-block;
    }
}

.page-header {
    background-color: @brand-primary;
    color: #fff;
    margin: 0;
    margin-bottom: @line-height-computed;
    padding: @line-height-computed / 2 0 @line-height-computed 0;
}

.highlight {
    padding-top: @line-height-computed * 1.5;
    margin-bottom: @line-height-computed * 2.2;
    font-size: @font-size-base * 1.2;

    img {
        max-width: 90%;
        padding-top: @line-height-computed;
    }

    h2 {
        font-size: @font-size-h1;
        border-left: 8px solid @brand-primary;
        padding: 10px 15px 10px 15px;
        margin-bottom: @line-height-computed;
    }

    .text-right {
        img {
            padding-top: @line-height-computed * 3;
        }

        h2 {
            border-left: none;
            border-right: 8px solid @brand-primary;
        }
    }

    &.highlight-general {
        font-size: @font-size-base;
        img {
            max-height: @line-height-computed * 5;
            padding-top: @line-height-computed / 4;
            padding-bottom: @line-height-computed / 1.5;
        }
    }

    &.highlight-polyglot {
        margin-bottom: 0;
        background-color: #eee;

        .code-samples, .code-samples .prettyprint {
            font-size: @font-size-small;
        }

        .code-samples {
            padding-top: @line-height-computed * 2.2;
            margin-bottom: 0;
            code {
                min-height: 340px;
                margin-bottom: 0;
                padding: 20px;
                border-top-right-radius: @border-radius-large;
            }

            .nav-tabs {
                border: none;

                li {
                    &.active a {
                        background-color: #474949;
                        color: #fff;
                    }
                }

                a {
                    border: none;
                }
            }

            .prettyprint {
                min-height: 340px;
                padding: 0;
                margin: 0;
                border-radius: 0;
                border: none;
            }
        }

        & + hr {
            margin-top: 0;
        }
    }

    &.highlight-fun {
        background-color: #eee;
        margin-bottom: 0;

        .highlight-fun-right {
            font-size: @font-size-base;
            padding-top: @line-height-computed;
        }

        .highlight-stack p {
            font-size: @font-size-base * 1.4;
            font-style: italic;
        }
    }

    &.highlight-who {
        text-align: center;
        background-color: @brand-primary;
        color: white;
        padding-bottom: @line-height-computed * 3;

        img {
            margin: @line-height-computed @line-height-computed / 2;
            padding: 0;
        }

        .wanttobelisted {
            padding-top: @line-height-computed;
        }

        a {
            color: #fff;
            text-decoration: underline;

            &:hover {
                color: #999;
            }
        }
    }
}

/* Center user logos vertically and horizontally */
.user-logos {
    display: table;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;

    .user-logo {
        display: table-cell;
        float: none !important;
        vertical-align: middle;
        width: 100%;
    }
}

footer {
    background-color: #eee;
    margin-top: @line-height-computed * 2;
    padding-bottom: @line-height-computed * 3;

    h2 {
        font-size: @font-size-base;
    }

    p {
        color: @gray-light;

        &:first-child {
            padding-top: @line-height-computed;
        }
    }

    .logo {
        margin: @line-height-computed / 2 0;
    }
}

@import "bootstrap-custom.less";
@import "variables-custom.less";

@navbar-brand-height: 36px;
@sticky-navbar-height: 60px;

#reactive-manifesto-banner {
    // banner is 143px wide. hide it when screen is too small so it
    // doesn't block the navbar.
    @media (max-width: (@container-lg + (143px * 2))) {
        display: none;
    }
}

.navbar {
    @transition-time: 0.2s;

    background-color: #fff;
    transition: all @transition-time ease;
    font-weight: 500;
    font-size: @font-size-base * 1.2;

    .navbar-brand {
        transition: all @transition-time ease;

        img {
            height: @navbar-brand-height;
        }

        // center logo vertically
        padding-top: ((@navbar-height - @navbar-brand-height) / 2 + 1);
    }

    .navbar-nav {
        a {
            transform: scale(0.85, 1.0);
        }
    }

    @media (min-width: @grid-float-breakpoint) {
        .navbar-nav {
            & > li {
                transition: all @transition-time ease;

                // dividers between navbar items
                &:not(:last-child) {
                    border-right: 2px solid @gray-lighter;
                }

                // center items vertically
                margin-top: ((@navbar-height - @line-height-computed) / 4);
            }

            // navbar link colors
            a {
                color: @gray-base;

                &.vertx-2-link {
                    color: #999;
                }

                &:hover {
                    color: @brand-primary;
                }
            }

            .dropdown-menu {
                box-shadow: none;
                border: 1px solid #e7e7e7;
                margin-right: 11.5px;

                & > li > a:hover, & > li > a:focus {
                    background-color: transparent;
                }

                & > li:hover, & > li:focus {
                    background-color: #e7e7e7;
                }
            }
        }

        &.sticky {
            min-height: @sticky-navbar-height;
            height: @sticky-navbar-height;

            .navbar-brand {
                height: @sticky-navbar-height;

                // center logo vertically
                padding-top: (@sticky-navbar-height - @navbar-brand-height) / 2 + 1;
            }

            .navbar-nav > li {
                // center items vertically
                margin-top: ((@sticky-navbar-height - @line-height-computed) / 4);

                & > a {
                    padding-top: ((@sticky-navbar-height - @line-height-computed) / 4);
                    padding-bottom: ((@sticky-navbar-height - @line-height-computed) / 4);
                }
            }
        }
    }
}

.index-header {
    background-color: @brand-primary;
    color: #fff;
    padding-top: 60px + @navbar-height; // skip sticky navbar
    padding-bottom: 95px;

    h2 {
        font-weight: 400;
        font-size: @font-size-base * 3.5;

        strong {
            font-weight: 500;
        }
    }

    .buttons {
        padding-top: 15px;
    }

    .btn {
        color: #fff;
        font-weight: 500;
        background-color: transparent;

        &:hover {
            background-color: #fff;
            color: @brand-primary;
        }

        i {
            margin-top: 4px;
            margin-right: 6px;
            line-height: 1em;
            float: left;
        }
    }

    .github-btn {
        padding-top: 16px;
        margin-left: 10px;
        display: inline-block;
    }
}

.page-header {
    background-color: @brand-primary;
    color: #fff;
    margin: 0;
    margin-bottom: @line-height-computed;
    padding: @line-height-computed / 2 0 @line-height-computed 0;
}

.highlight {
    padding-top: @line-height-computed * 1.5;
    margin-bottom: @line-height-computed * 2.2;
    font-size: @font-size-base * 1.2;

    img {
        max-width: 90%;
        padding-top: @line-height-computed;
    }

    h2 {
        font-size: @font-size-h1;
        border-left: 8px solid @brand-primary;
        padding: 10px 15px 10px 15px;
        margin-bottom: @line-height-computed;
    }

    .text-right {
        img {
            padding-top: @line-height-computed * 3;
        }

        h2 {
            border-left: none;
            border-right: 8px solid @brand-primary;
        }
    }

    &.highlight-general {
        font-size: @font-size-base;
        img {
            max-height: @line-height-computed * 5;
            padding-top: @line-height-computed / 4;
            padding-bottom: @line-height-computed / 1.5;
        }
    }

    &.highlight-polyglot {
        margin-bottom: 0;
        background-color: #eee;

        .code-samples, .code-samples .prettyprint {
            font-size: @font-size-small;
        }

        .code-samples {
            padding-top: @line-height-computed * 2.2;
            margin-bottom: 0;
            code {
                min-height: 340px;
                margin-bottom: 0;
                padding: 20px;
                border-top-right-radius: @border-radius-large;
            }

            .nav-tabs {
                border: none;

                li {
                    &.active a {
                        background-color: #474949;
                        color: #fff;
                    }
                }

                a {
                    border: none;
                }
            }

            .prettyprint {
                min-height: 340px;
                padding: 0;
                margin: 0;
                border-radius: 0;
                border: none;
            }
        }

        & + hr {
            margin-top: 0;
        }
    }

    &.highlight-fun {
        background-color: #eee;
        margin-bottom: 0;

        .highlight-fun-right {
            font-size: @font-size-base;
            padding-top: @line-height-computed;
        }

        .highlight-stack p {
            font-size: @font-size-base * 1.4;
            font-style: italic;
        }
    }

    &.highlight-who {
        text-align: center;
        background-color: @brand-primary;
        color: white;
        padding-bottom: @line-height-computed * 3;

        img {
            margin: @line-height-computed @line-height-computed / 2;
            padding: 0;
        }

        .wanttobelisted {
            padding-top: @line-height-computed;
        }

        a {
            color: #fff;
            text-decoration: underline;

            &:hover {
                color: #999;
            }
        }
    }
}

footer {
    background-color: #eee;
    margin-top: @line-height-computed * 2;
    padding-bottom: @line-height-computed * 3;

    h2 {
        font-size: @font-size-base;
    }

    p {
        color: @gray-light;

        &:first-child {
            padding-top: @line-height-computed;
        }
    }

    .logo {
        margin: @line-height-computed / 2 0;
    }
}


Highlight mixin

Highlight mixin

This mixin allow to disable highlight and touch callout on webkit based
browsers.


Added less

Added less

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