[IMP] web: backport of utils.less file

[IMP] web: backport of utils.less file

Add mixins for transition, animation and text-overflow.

// ------------------------------------------------------------------
// Margin
// ------------------------------------------------------------------
.utils-margin-loop(@index) when (@index < 256) {
    .o-mt@{index} {margin-top: @index px;}
    .o-mb@{index} {margin-bottom: @index px;}
    .o-mr@{index} {margin-right: @index px;}
    .o-ml@{index} {margin-left: @index px;}

    .utils-margin-loop(@index * 2);
}
.utils-margin-loop(2);

// ------------------------------------------------------------------
// Padding
// ------------------------------------------------------------------
.o-webclient-padding(@top: 0px, @right: @odoo-horizontal-padding, @bottom: 0px, @left: @odoo-horizontal-padding) {
    padding-top: @top;
    padding-right: @right;
    padding-bottom: @bottom;
    padding-left: @left;
}

// ------------------------------------------------------------------
// Caret
// ------------------------------------------------------------------
.utils-caret-boilerplate() {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
}
.o-caret-down(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: 0;
    border-left: @caret-width solid transparent;
    border-right: @caret-width solid transparent;
    border-top: @caret-width solid;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-up(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: @caret-width solid;
    border-left: @caret-width solid transparent;
    border-right: @caret-width solid transparent;
    border-top: 0;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-left(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: @caret-width solid transparent;
    border-left: 0;
    border-right: @caret-width solid;
    border-top: @caret-width solid transparent;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-right(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: @caret-width solid transparent;
    border-left: @caret-width solid;
    border-right: 0;
    border-top: @caret-width solid transparent;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}

// ------------------------------------------------------------------
// Vendor prefixes
// ------------------------------------------------------------------
// Flex
.o-flex-display() {
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;

    display: flex;
}
.o-inline-flex-display() {
    display: -ms-inline-flexbox;
    display: -moz-inline-box;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;

    display: inline-flex;
}
.o-flex-flow(@direction, @wrap) {
    -ms-flex-flow: @direction @wrap;
    -moz-flex-flow: @direction @wrap;
    -webkit-flex-flow: @direction @wrap;

    flex-flow: @direction @wrap;
}
.o-flex(@grow, @schrink, @basis) {
    -ms-flex: @grow @schrink @basis;
    -moz-flex: @grow @schrink @basis;
    -webkit-box-flex: @grow;
    -webkit-flex: @grow @schrink @basis;

    flex: @grow @schrink @basis;
}
.o-justify-content(@justify) {
    -moz-justify-content: @justify;
    -webkit-justify-content: @justify;

    justify-content: @justify;
}
.o-align-content(@align) {
    -webkit-align-content: @align;

    align-content: @align;
}
.o-align-items(@align) {
    -webkit-align-items: @align;

    align-items: @align;
}
.o-align-self(@align) {
    -webkit-align-self: @align;

    align-self: @align;
}

// Background-size
// https://css-tricks.com/perfect-full-page-background-image/
.o-background-size(@size) {
    -webkit-background-size: @size;
    -moz-background-size: @size;
    -o-background-size: @size;
    background-size: @size;
}

// ------------------------------------------------------------------
// Dropdowns
// ------------------------------------------------------------------
.o-selected-li() {
    li {
        position: relative;
        > a {
            color: @odoo-main-text-color;
            &:hover {
                color: darken(@odoo-main-text-color, 10%);
            }
        }
        &.selected {
            > a {
                color: darken(@odoo-main-text-color, 10%);
                font-weight: bold;
                &:before {
                    font-family: FontAwesome;
                    position: absolute;
                    left: 6px;
                    content: "\f00c";
                }
            }
        }
    }
}

// ------------------------------------------------------------------
// Select Appearance
// ------------------------------------------------------------------
.o-appearance(@value) {
    -webkit-appearance: @value;
    -moz-appearance: @value;
    appearance: @value;
}

// ------------------------------------------------------------------
// Transform
// ------------------------------------------------------------------
.o-transform-origin(@x: 50%, @y: 50%, @z: 0) {
    -ms-transform-origin: @x @y @z;
    -webkit-transform-origin: @x @y @z;
    -moz-transform-origin: @x @y @z;
    transform-origin: @x @y @z;
}

// ------------------------------------------------------------------
// Animation
// ------------------------------------------------------------------
.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) {
    -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
    -moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
    -o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
    animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
}

// ------------------------------------------------------------------
// Transition
// ------------------------------------------------------------------
.o-transition(@property: all, @duration: 0s, @timing-function: easy, @transition-delay: 0s) {
    -webkit-transition: @property @duration @timing-function @transition-delay;
    -moz-transition: @property @duration @timing-function @transition-delay;
    -o-transition: @property @duration @timing-function @transition-delay;
    transition: @property @duration @timing-function @transition-delay;
}

// ------------------------------------------------------------------
// Position absolute
// ------------------------------------------------------------------
.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {
    position: absolute;
    top: @top;
    left: @left;
    bottom: @bottom;
    right: @right;
}

// ------------------------------------------------------------------
// Text overflow
// ------------------------------------------------------------------
.o-text-overflow(@display: inline-block) {
    display: @display;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top; // To update display context changed by overflow:hidden
}

// ------------------------------------------------------------------
// Margin
// ------------------------------------------------------------------
.utils-margin-loop(@index) when (@index < 256) {
    .o-mt@{index} {margin-top: @index px;}
    .o-mb@{index} {margin-bottom: @index px;}
    .o-mr@{index} {margin-right: @index px;}
    .o-ml@{index} {margin-left: @index px;}

    .utils-margin-loop(@index * 2);
}
.utils-margin-loop(2);

// ------------------------------------------------------------------
// Padding
// ------------------------------------------------------------------
.o-webclient-padding(@top: 0px, @right: @odoo-horizontal-padding, @bottom: 0px, @left: @odoo-horizontal-padding) {
    padding-top: @top;
    padding-right: @right;
    padding-bottom: @bottom;
    padding-left: @left;
}

// ------------------------------------------------------------------
// Caret
// ------------------------------------------------------------------
.utils-caret-boilerplate() {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
}
.o-caret-down(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: 0;
    border-left: @caret-width solid transparent;
    border-right: @caret-width solid transparent;
    border-top: @caret-width solid;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-up(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: @caret-width solid;
    border-left: @caret-width solid transparent;
    border-right: @caret-width solid transparent;
    border-top: 0;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-left(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: @caret-width solid transparent;
    border-left: 0;
    border-right: @caret-width solid;
    border-top: @caret-width solid transparent;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-right(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: @caret-width solid transparent;
    border-left: @caret-width solid;
    border-right: 0;
    border-top: @caret-width solid transparent;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}

// ------------------------------------------------------------------
// Vendor prefixes
// ------------------------------------------------------------------
// Flex
.o-flex-display() {
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;

    display: flex;
}
.o-inline-flex-display() {
    display: -ms-inline-flexbox;
    display: -moz-inline-box;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;

    display: inline-flex;
}
.o-flex-flow(@direction, @wrap) {
    -ms-flex-flow: @direction @wrap;
    -moz-flex-flow: @direction @wrap;
    -webkit-flex-flow: @direction @wrap;

    flex-flow: @direction @wrap;
}
.o-flex(@grow, @schrink, @basis) {
    -ms-flex: @grow @schrink @basis;
    -moz-flex: @grow @schrink @basis;
    -webkit-box-flex: @grow;
    -webkit-flex: @grow @schrink @basis;

    flex: @grow @schrink @basis;
}
.o-justify-content(@justify) {
    -moz-justify-content: @justify;
    -webkit-justify-content: @justify;

    justify-content: @justify;
}
.o-align-content(@align) {
    -webkit-align-content: @align;

    align-content: @align;
}
.o-align-items(@align) {
    -webkit-align-items: @align;

    align-items: @align;
}
.o-align-self(@align) {
    -webkit-align-self: @align;

    align-self: @align;
}

// Background-size
// https://css-tricks.com/perfect-full-page-background-image/
.o-background-size(@size) {
    -webkit-background-size: @size;
    -moz-background-size: @size;
    -o-background-size: @size;
    background-size: @size;
}

// ------------------------------------------------------------------
// Dropdowns
// ------------------------------------------------------------------
.o-selected-li() {
    li {
        position: relative;
        > a {
            padding: 3px 25px;
            color: @odoo-main-text-color;
            &:hover {
                color: darken(@odoo-main-text-color, 10%);
            }
        }
        &.selected {
            > a {
                color: darken(@odoo-main-text-color, 10%);
                font-weight: bold;
                &:before {
                    font-family: FontAwesome;
                    position: absolute;
                    left: 6px;
                    content: "\f00c";
                }
            }
        }
    }
}

// ------------------------------------------------------------------
// Select Appearance
// ------------------------------------------------------------------
.o-appearance(@value) {
    -webkit-appearance: @value;
    -moz-appearance: @value;
    appearance: @value;
}

// ------------------------------------------------------------------
// Transform
// ------------------------------------------------------------------
.o-transform-origin(@x: 50%, @y: 50%, @z: 0) {
    -ms-transform-origin: @x @y @z;
    -webkit-transform-origin: @x @y @z;
    -moz-transform-origin: @x @y @z;
    transform-origin: @x @y @z;
}

// ------------------------------------------------------------------
// Position absolute
// ------------------------------------------------------------------
.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {
    position: absolute;
    top: @top;
    left: @left;
    bottom: @bottom;
    right: @right;
}


created base.less file. added basic style rules.

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/mavisland/hover-pocket-less.git/'


remove unnecessary width declaration

remove unnecessary width declaration

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/crdx/crdx.org.git/'


Modify error style in TemplateUploadFormView.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/addrummond/nodeibexfarm.git/'


Fixed some styling issues for link buttons, and set autosuggest results to 100% width

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/Arragro/ArragroCMS.git/'


Add missing less file

Add missing less file

@import (reference) "./tools.less";
@import (reference) "./avatar.less";

.mentions_main() {
    --LessLoader_require: LessLoader_currentFile();
}

& {
    .cp-mentions {
        .avatar_main(20px);
        .tools_unselectable();
        display: inline-flex;
        align-items: center;
        vertical-align: bottom;
        background-color: #eee;

        span.cp-mentions-name {
            max-width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        &.cp-mentions-clickable {
            outline: none;
            cursor: pointer;
            &:hover {
                background-color: #ddd;
            }
        }
    }
}

error: pathspec 'customize.dist/src/less2/include/mentions.less' did not match any file(s) known to git


update breakpoint function

update breakpoint function

// =============================================
// Mixin - Breakpoint
// =============================================

.bp(max, @value, @content) {
    @media only screen {
        @media (max-width: @value) {
            @content();
        }
    }
}

.bp(min, @value, @content) {
    @media only screen {
        @media (min-width: @value) {
            @content();
        }
    }
}

.bp(range, @minValue, @maxValue, @content) {
    @media only screen {
        @media (min-width: @minValue) {
            @media (max-width: @maxValue) {
                @content();
            }
        }
    }
}
//
// breakpoint mixin demo:
//
// 1. max-width query:
//.content {
//    .bp(max, 1200px, {
//        div { color:#888; }
//    });
//}
//
// output:
//@media only screen and (max-width: 1200px) {
//  .content div {
//    color: #888;
//  }
//}
//
// 2. min-width qurey:
//.content {
//    .bp(min, 1200px, {
//        div { background-color:#888; }
//    });
//}
//
// output:
//@media only screen and (min-width: 1200px) {
//  .content div {
//    background-color: #888;
//  }
//}
//
// 3. both query:
//.content {
//    .bp(range, 640px, 768px, {
//        div { color:#888; }
//    });
//}
//
// output:
//@media only screen and (min-width: 640px) and (min-width: 768px) {
//  .content div {
//    color: #888;
//  }
//}

// =============================================
// Mixin - Breakpoint
// =============================================

.bp(max, @value, @content) {
    @media only screen {
        @media (max-width: @value) {
            @content();
        }
    }
}

.bp(min, @value, @content) {
    @media only screen {
        @media (min-width: @value) {
            @content();
        }
    }
}

.bp(range, @minValue, @maxValue, @content) {
    @media only screen {
        @media (min-width: @minValue) {
            @media (min-width: @maxValue) {
                @content();
            }
        }
    }
}
//
// breakpoint mixin demo:
//
// 1. max-width query:
//.content {
//    .bp(max, 1200px, {
//        div { color:#888; }
//    });
//}
//
// output:
//@media only screen and (max-width: 1200px) {
//  .content div {
//    color: #888;
//  }
//}
//
// 2. min-width qurey:
//.content {
//    .bp(min, 1200px, {
//        div { background-color:#888; }
//    });
//}
//
// output:
//@media only screen and (min-width: 1200px) {
//  .content div {
//    background-color: #888;
//  }
//}
//
// 3. both query:
//.content {
//    .bp(range, 640px, 768px, {
//        div { color:#888; }
//    });
//}
//
// output:
//@media only screen and (min-width: 640px) and (min-width: 768px) {
//  .content div {
//    color: #888;
//  }
//}


Moving to .less for FilePicker

Moving to .less for FilePicker

/** FilePicker CSS */
.fp-button{
	text-transform: capitalize;
	display: inline-block;
	border:0;
	padding:10px;
	border-radius:5px;
	font-size:1em;
	background-color: #0F6AB4;
	color:white;
}

.fp-main{
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	background-color: white;
	font-family:verdana;
	margin:0;

	&, *{
		box-sizing:border-box;
	}

	&.fp-noframe{
		margin:20px 40px;
		box-shadow: 0 0 100px black;
	}
	&.fp-dragover{
		background-color:rgba(0,0,0,0.1);
	}
}

.fp-header{

}

.fp-nav{
	button{
		text-transform: capitalize;
		border:0;
		padding:10px;
		border-radius:5px;
		font-size:1.2em;
		background-color: #0F6AB4;
		color:white;
		&.fp-selected{
			background-color: transparent;
			color:inherit;
		}
	}
}

.fp-path{
	position: relative;
	background-color: #f4f4f4;
	border:1px solid #eee;
	min-height: 50px;
	padding:2px 0;
	width:100%;
	a{
		position: relative;
		padding:10px;
		margin:1px;
		margin-right:20px;
		text-transform: capitalize;
		font-size:1em;
		cursor: pointer;
		text-decoration: underline;
		&:hover{
		}
		&:after{
			position: absolute;
			right:-15px;
			text-decoration: none;
			color:black;
			content: " \00BB";
		}
		&:last-child:after{
			content: "";
		}
	}
}

.fp-upload_btn{
	background-color: #C5862B;
	color:white;
	float:right;
	border:0;
	padding:10px;
	border-radius:5px;
	font-size:1em;
}

.fp-body{
	display: block;
	text-align: center;
	padding-bottom:50px;
	background-color:inherit;

	ul{
		margin:0;
		padding: 0;

		li{
			display: inline-block;
			text-align: left;
			width:100px;
			height:80px;
			position: relative;
			text-overflow:ellipsis;
			overflow: hidden;
			padding:0;
			margin:5px;
			border:1px solid #ddd;
			cursor: pointer;

			img{
				position: absolute;
				width:100%;
			}
			span{
				position: absolute;
				bottom:0;
				display: block;
				padding:3px;
				background-color:rgba(255,255,255,0.8);
				word-break: break-word;
			}
			&:hover img[src] + span{
				display: none;
			}

			&.select{
				border-color:#10A54A;
			}
			&.select:after{
				position:absolute;
				top:0;
				right:0;
				content:"\02713";
				color:white;
				background-color:#10A54A;
			}
		}
	}
}

.fp-local:empty{
	background: data-url(upload.png) no-repeat right top, data-url(pickfromweb.png) no-repeat left top, data-url(draganddrop.png) no-repeat center bottom;
	min-height:180px;
	height:50%;
}

.fp-camera{
	height:100%;

	video{
		max-width:300px;
		background:data-url(webcam.png) no-repeat center center;
		background-size: 100%;
		max-height:100%;

		+ button{
			display: none;
		}

		&[src] + button{
			display: block;
			background-color:#10A54A;
			margin: 0 auto;
			margin-top:-50px;
			color:white;
			border:0;
			padding:10px;
			border-radius:5px;
			font-size:1.2em;
			position: relative;
			z-index: 1;
		}
	}
}

.fp-footer{
	position: fixed;
	background-color: rgba(255,255,255,0.8);
	bottom:0;
	left:0;
	width:100%;
	text-align: center;
}
.fp-done{
	background-color:#10A54A;
	color:white;
	border:0;
	padding:10px;
	border-radius:5px;
	font-size:1.2em;
	&:after{
		content:"\02713";
	}
}

.fp-info{
	font-size:0.9em;
	text-decoration: underline;
	&:after{
		content: " selected";
	}
}

@media only screen and (min-width : 800px) {
	.fp-main{
		position: fixed;
	}
	.fp-body{
		position: absolute;
		width: 100%;
		top:90px;
		bottom:0;
		overflow: auto;
	}
	.fp-footer{
		position: absolute;
	}
}

@media only screen and (max-width : 800px) {
	.fp-main.fp-noframe{
		margin: 10px;
	}
}

.fp-loading{
	color:#aaa;
	font-weight:bold;
	font-family:arial;

	&:before{
		content:"Loading";
	}
	&[data-message]:before{
		content:attr(data-message);
	}
	span{
		overflow:hidden;
		display: inline-block;
		font-size:inherit;
		text-align:right;
		width:inherit;

		-webkit-animation:'bounce' 1s ease infinite alternate;
		-moz-animation:'bounce' 1s ease infinite alternate;
		-ms-animation:'bounce' 1s ease infinite alternate;
		animation:'bounce' 1s ease infinite alternate;

		&:after{
			content:'...';
			overflow:hidden;
		}
	}
	&[data-animate=false]{
		text-decoration: underline;
	}
	&[data-animate=false] span{
		display: none;
	}

	.anim(){
		from {width:0;}
		to {width: 2.5em;}
	}

	@-webkit-keyframes bounce{
		anim();
	}
	@-moz-keyframes bounce{
		anim();
	}
	@-ms-keyframes bounce{
		anim();
	}
	@keyframes bounce{
		anim();
	}
}

error: pathspec 'ui/FilePicker/filePicker.less' did not match any file(s) known to git


Add breadcrumb style

Add breadcrumb style


Added the test less file

Added the test less file

// This file is used to test that the less files compile correctly.
// To do so, all the mixins are used here...

@import "../less/zwe";

// colors.less
body {
	color: @black-10;
	color: @black-20;
	color: @black-30;
	color: @black-40;
	color: @black-50;
	color: @black-60;
	color: @black-70;
	color: @black-80;
	color: @black-90;
}

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


More less breakage in ie

More less breakage in ie

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

.beatmap-basic-stats {
  display: flex;
  margin: -5px -10px;
  font-weight: 700;
  font-size: @font-size--normal;
  color: @yellow-light;

  &__entry {
    display: flex;
    flex: none;
    padding: 5px 10px;
  }

  &__entry-icon {
    width: 15px;
    height: 15px;

    background-size: contain;

    margin-right: 5px;
  }
}

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

.beatmap-basic-stats {
  display: flex;
  margin: -5px -10px;
  font-weight: 700;
  font-size: @font-size--normal;
  color: @yellow-light;

  &__entry {
    display: flex;
    flex: 1;
    padding: 5px 10px;
  }

  &__entry-icon {
    width: 15px;
    height: 15px;

    background-size: contain;

    margin-right: 5px;
  }
}


Delete larger.less

Delete larger.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/holly-luo/holly-luo.github.io.git/'


Adds select2 hammer scroll

Adds select2 hammer scroll

//
// Forms Select2
// --------------------------------------------------

// Font awesome
// -------------------------

.select2-container .select2-choice abbr,
.select2-container .select2-arrow b,
.select2-search-choice-close {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// Container
// -------------------------

.select2-container {
    margin: 0;
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: middle;

    .select2-choice {
        display: block;
        height: @select2-height-base;
        padding: 0 0 0 8px;
        overflow: hidden;
        position: relative;

        border: 1px solid @input-border;
        white-space: nowrap;
        line-height: @select2-height-base;
        color: @input-color;
        text-decoration: none;
        background-color: @input-bg;
        background-clip: padding-box;
        .border-top-radius(@input-border-radius);
        .border-bottom-radius(@input-border-radius);

        -webkit-touch-callout: none;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;

        &.select2-drop-above .select2-choice {
            .border-top-radius(0);
            .border-bottom-radius(@input-border-radius);
        }

        > .select2-chosen {
            margin-right: @select2-height-base + 2;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        abbr {
            display: none;
            width: round(@select2-height-base * 0.7);
            height: @select2-height-base;
            position: absolute;
            right: @select2-height-base + 5;
            top: 0px;

            color: @select2-choice-close-color;
            text-decoration: none;
            text-align: center;
            line-height: @select2-height-base + 2;

            border: 0;
            cursor: pointer;
            outline: 0;

            &:before {
                content: @select2-choice-close-icon;
            }

            &:hover {
                color: @select2-choice-close-hover-color;
                cursor: pointer;
            }
        }

        .select2-arrow {
            display: inline-block;
            width: @select2-height-base + 2;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background-clip: padding-box;
            background: @select2-arrow-bg;
            border-left: 1px solid @select2-arrow-border-color;
            .border-left-radius(0);
            .border-right-radius(@input-border-radius);

            b {
                display: block;
                width: 100%;
                height: 100%;
                line-height: @select2-height-base + 2;
                text-align: center;
                color: @select2-arrow-color;

                &:before {
                    content: @select2-arrow-icon;
                }
            }
        }
    }

    &.select2-allowclear .select2-choice {
        abbr {
            display: inline-block;
        }

        .select2-chosen {
            margin-right: 42px;
        }
    }
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.select2-drop-mask {
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: @zindex-select2;
    /* styles required for IE to work */
    background-color: #fff;
    filter: alpha(opacity=0);
}

.select2-drop {
    width: 100%;
    margin-top: -1px;
    position: absolute;
    z-index: @zindex-select2 + 1;
    top: 100%;

    background: @input-bg;
    color: @input-color;
    border: 1px solid @input-border;
    border-top: 0;

    .border-top-radius(0);
    .border-bottom-radius(@input-border-radius);

    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.14);
            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.14);

    &.select2-drop-above {
        margin-top: 1px;
        border-top: 1px solid @input-bg;
        border-bottom: 0;

        .border-top-radius(@input-border-radius);
        .border-bottom-radius(0);

        -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, .14);
                box-shadow: 0 -1px 3px rgba(0, 0, 0, .14);

        &.select2-drop-active {
            border-top: 1px solid @input-border-focus;
        }

        .select2-search input {
            margin-top: 4px;
        }
    }

    .select2-drop-footer {
        display: table;
        width: 100%;
        border-top: 1px solid @select2-btn-border;
        bottom: 0;
    }

    .select2-drop-footer-btn {
        display: table-cell;
        text-align: center;

        > a {
            text-decoration: none;
            color: @select2-btn-color;
            background-color: @select2-btn-bg;
            padding: 5px;
            display: block;

            border-left: 1px solid @select2-btn-border;

            &:hover,
            &focus {
                background-color: @select2-btn-hover-bg;
            }
        }

        &:first-child {
            > a {
                border-left: none;
            }
        }
    }
}

.select2-drop-active {
    border: 1px solid @input-border-focus;
    border-top: none;
}

.select2-drop-auto-width {
    border-top: 1px solid @input-bg;
    width: auto;

    .select2-search {
        padding-top: 4px;
    }
}

.select2-search {
    display: inline-block;
    width: 100%;
    min-height: 26px;
    margin: 0;
    padding: 4px;

    position: relative;
    z-index: @zindex-select2 + 2;

    white-space: nowrap;

    &:after {
        content: @select2-search-icon;
        position: absolute;
        display: inline-block;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: @select2-height-base + 2;
        margin-left: round((-@select2-height-base - 2) / 2) - 2;
        color: @select2-search-color;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    input {
        width: 100%;
        height: auto !important;
        min-height: @select2-height-base + 2;
        padding: 4px 20px 4px 5px;
        margin: 0;

        outline: 0;
        font-size: 1em;

        border: 1px solid @input-border;
        .border-top-radius(0);
        .border-bottom-radius(0);

        -webkit-box-shadow: none;
                box-shadow: none;

        &.select2-active {
            color: @select2-active-color;
            background-color: @select2-active-bg;
        }
    }
}

.select2-container-active {
    .select2-choice,
    .select2-choices {
        border: 1px solid @input-border-focus;
        outline: none;
    }
}

.select2-dropdown-open {
    .select2-choice {
        border-bottom-color: transparent;
        -webkit-box-shadow: 0 1px 0 @select2-arrow-bg inset;
                box-shadow: 0 1px 0 @select2-arrow-bg inset;

        .border-bottom-radius(0);

        background-color: @select2-open-bg;

        abbr {
            color: @select2-open-choice-close-color;
        }

        .select2-arrow {
            background: transparent;
            border-left: none;
            filter: none;

            b {
                color: @select2-open-arrow-color;

                &:before {
                    content: @select2-open-arrow-icon;
                }
            }
        }
    }

    &.select2-drop-above {
        .select2-choice,
        .select2-choices {
            border-top-color: transparent;
        }
    }
}

.select2-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

// Results
// -------------------------

.select2-results {
    max-height: 200px;
    padding: 4px;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    ul.select2-result-sub {
        margin: 0;
        padding-left: 0;

        > li .select2-result-label {
            padding-left: 20px;
        }

        ul.select2-result-sub {
            > li .select2-result-label {
                padding-left: 40px;
            }

            ul.select2-result-sub {
                > li .select2-result-label {
                    padding-left: 60px;
                }

                ul.select2-result-sub {
                    > li .select2-result-label {
                        padding-left: 80px;
                    }

                    ul.select2-result-sub {
                        > li .select2-result-label {
                            padding-left: 100px;
                        }
                    }

                    ul.select2-result-sub {
                        > li .select2-result-label {
                            padding-left: 110px;
                        }

                        ul.select2-result-sub {
                            > li .select2-result-label {
                                padding-left: 120px;
                            }
                        }
                    }
                }
            }
        }
    }

    li {
        list-style: none;
        display: list-item;
        background-image: none;

        &.select2-result-with-children > .select2-result-label {
            font-weight: bold;
        }

        em {
            background: @select2-results-em;
            font-style: normal;
        }
    }

    .select2-result-label {
        padding: 3px 7px 4px;
        margin: 0;
        cursor: pointer;

        min-height: 1em;

        -webkit-touch-callout: none;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
    }

    .select2-highlighted {
        background: @select2-highlighted-bg;
        color: @select2-highlighted-color;

        em {
            background: transparent;
        }

        ul {
            background: @input-bg;
            color: @input-color;
        }
    }

    .select2-no-results,
    .select2-searching,
    .select2-selection-limit {
        background: @select2-results-info;
        display: list-item;
        padding-left: 5px;
    }

    // disabled look for disabled choices in the results dropdown
    .select2-disabled {
        background: @input-bg-disabled;
        display: list-item;
        cursor: default;

        .select2-highlighted {
            color: @input-color;
            background: @input-bg-disabled;
            display: list-item;
            cursor: default;
        }
    }

    .select2-selected {
        display: none;
    }
}

.select2-more-results {
    background: @select2-more-results-bg;
    display: list-item;

    .select2-active {
        color: @select2-active-color;
        background-color: @select2-active-bg;
    }
}

// Disabled styles
// -------------------------

.select2-container.select2-container-disabled {
    .select2-choice {
        background-color: @input-bg-disabled;
        background-image: none;
        cursor: default;

        .select2-arrow {
            background-color: @input-bg-disabled;
            background-image: none;
            border-left: 0;
        }

        abbr {
            display: none;
        }
    }
}

// Multiselect
// -------------------------

.select2-container-multi {
    .select2-choices {
        height: auto !important;
        height: 1%;
        min-height: @select2-height-base;
        margin: 0;
        padding: 0;
        position: relative;

        border: 1px solid @input-bg;
        cursor: text;
        overflow: hidden;

        background-color: @input-bg;

        li {
            float: left;
            list-style: none;
        }

        .select2-search-field {
            margin: 0;
            padding: 0;
            white-space: nowrap;

            input {
                padding: 5px;
                margin: 1px 0;

                color: @input-color;
                outline: 0;
                border: 0;
                -webkit-box-shadow: none;
                        box-shadow: none;
                background: transparent !important;

                &.select2-active {
                    color: @select2-active-color;
                    background-color: @select2-active-bg;
                }
            }
        }

        .select2-search-choice {
            padding: 3px 5px 3px 18px;
            margin: 3px 0 3px 5px;
            position: relative;

            line-height: round((@select2-height-base + 2) / 2);
            color: @input-color;
            cursor: default;
            border: 1px solid @input-border;

            .border-top-radius(@input-border-radius);
            .border-bottom-radius(@input-border-radius);

            -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
                    box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);

            background-clip: padding-box;

            -webkit-touch-callout: none;
              -webkit-user-select: none;
                 -moz-user-select: none;
                  -ms-user-select: none;
                      user-select: none;

            background-color: @input-bg;

            .select2-search-choice-close {
                color: @select2-choice-close-color;

                &:before {
                    content: @select2-choice-close-icon;
                }

                &:hover {
                    color: @select2-choice-close-hover-color;
                }
            }
        }

        .select2-search-choice-focus {
            border-color: @input-border-focus;

            .select2-search-choice-close {
                color: @select2-choice-close-hover-color;
            }
        }
    }

    &.select2-container-active {
        .select2-choices {
            border: 1px solid @input-border-focus;
            outline: none;
        }
    }

    .select2-search-choice-close {
        left: 0;
    }

    // disabled styles
    &.select2-container-disabled .select2-choices {
        background-color: @input-bg-disabled;
        background-image: none;
        cursor: default;

        .select2-search-choice {
            padding: 3px 5px 3px 5px;
            background-image: none;
            background-color: @input-bg-disabled;

            .select2-search-choice-close {
                display: none;
                background: none;
            }
        }
    }
}

.select2-locked {
  padding: 3px 5px 3px 5px !important;
}

.select2-search-choice-close {
    display: block;
    width: 18px;
    line-height: round((@select2-height-base + 2) / 2 + (2 * 3) + 2);
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: center;

    outline: none;
}

.select2-default {
    color: @input-color !important;
}

html[dir="rtl"] {
    .select2-container-multi {
        .select2-choices {
            li {
                float: right;
            }

            .select2-search-choice {
                margin-left: 0;
                margin-right: 5px;

                .select2-chosen {
                    cursor: default;
                }
            }
        }
    }

    .select2-search-choice-close {
        right: auto;
        left: 0;
    }
}

.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
    text-decoration: underline;
}

.select2-offscreen, .select2-offscreen:focus {
    clip: rect(0 0 0 0) !important;
    width: 1px !important;
    height: 1px !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    outline: 0 !important;
    left: 0px !important;
    top: 0px !important;
}

.select2-display-none {
    display: none;
}

.select2-measure-scrollbar {
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 100px;
    height: 100px;
    overflow: scroll;
}

.select2-wrapper {
    > input[type=text],
    > div > input[type=text],
    > select,
    > div > select {
        opacity: 0;
    }

    > select[multiple],
    > div > select[multiple] {
        height: @select2-height-base + 2;
    }
}

// Bootstrap
// -------------------------

.form-control {
    &.select2-container {
        height: auto !important;
        padding: 0px;

        &.select2-container-active {
            border-color: @input-border-focus;
        }

        &.select2-dropdown-open {
            border-color: @input-border-focus;
            .border-top-radius(@input-border-radius);
            .border-bottom-radius(0);

            .select2-choices {
                .border-top-radius(@input-border-radius);
                .border-bottom-radius(0);
            }
        }

        .select2-choices {
            border: 0 !important;
            .border-top-radius(@input-border-radius);
            .border-bottom-radius(@input-border-radius);
        }
    }

    .select2-choice {
        border: 0;
        .border-top-radius(@input-border-radius);
        .border-bottom-radius(@input-border-radius);

        .select2-arrow {
            .border-left-radius(0);
            .border-right-radius(@input-border-radius);
        }
    }
}

.control-group.success {
    .select2-container.select2-container-active {
        border-color: @brand-success;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-success, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-success, 10%) !important;
        background: @state-success-bg !important;
    }
}

.control-group.info {
    .select2-container.select2-container-active {
        border-color: @brand-info;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-info, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-info, 10%) !important;
        background: @state-info-bg !important;
    }
}

.control-group.warning {
    .select2-container.select2-container-active {
        border-color: @brand-warning;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-warning, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-warning, 10%) !important;
        background: @state-warning-bg !important;
    }
}

.control-group.error {
    .select2-container.select2-container-active {
        border-color: @brand-danger;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-danger, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-danger, 10%) !important;
        background: @state-danger-bg !important;
    }
}

@media (max-width: @screen-xs-max) {
    @select2-search-header-height: @select2-height-base + 2 + (20 * 2);

    .select2-container-multi {
        &.select2-dropdown-open {
            .select2-search-field {
                position: fixed;
                z-index: @zindex-select2 + 2;
                top: 50px;
                left: 0;
                right: 0;
                width: auto !important;
                padding: 20px;
                max-height: @select2-search-header-height;
                border-bottom: 2px solid @input-border-focus;

                &:after {
                    content: @select2-search-icon;
                    position: absolute;
                    display: inline-block;
                    font-family: FontAwesome;
                    font-style: normal;
                    font-weight: normal;
                    line-height: @select2-height-base + 2;
                    margin-left: round((-@select2-height-base - 2) / 2) - 2;
                    color: @select2-search-color;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }

                input {
                    width: 100% !important;
                    height: auto !important;
                    min-height: @select2-height-base + 2 !important;
                    padding: 4px 20px 4px 5px !important;
                    margin: 0 !important;

                    border: 1px solid @input-border;
                }
            }
        }
    }

    .select2-drop {
        position: fixed !important;
        width: auto !important;
        left: 0px !important;
        right: 0px !important;
        top: 50px !important;
        bottom: 47px !important;
        border: none !important;
        margin-top: 0 !important;
        padding-top: @select2-search-header-height;
        box-shadow: 1px -1px 3px rgba(0, 0, 0, 0.14);

        .select2-search {
            position: fixed;
            background-color: @input-bg;
            padding: 20px;
            max-height: @select2-search-header-height;
            margin-top: -@select2-search-header-height;
            border-bottom: 2px solid @input-border-focus;
        }

        .select2-hammer-scroll-content {
            height: 100%;
        }

        .select2-results {
            max-height: inherit !important;
            height: 100%;

            .select2-result-label {
                padding: 10px 20px;
            }
        }

        .select2-drop-footer {
            position: fixed;
            bottom: 0;

            .select2-drop-footer-btn {
                > a {
                    padding: 14px 5px;
                    line-height: 18px;
                }
            }
        }
    }
}

//
// Forms Select2
// --------------------------------------------------

// Font awesome
// -------------------------

.select2-container .select2-choice abbr,
.select2-container .select2-arrow b,
.select2-search-choice-close {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// Container
// -------------------------

.select2-container {
    margin: 0;
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: middle;

    .select2-choice {
        display: block;
        height: @select2-height-base;
        padding: 0 0 0 8px;
        overflow: hidden;
        position: relative;

        border: 1px solid @input-border;
        white-space: nowrap;
        line-height: @select2-height-base;
        color: @input-color;
        text-decoration: none;
        background-color: @input-bg;
        background-clip: padding-box;
        .border-top-radius(@input-border-radius);
        .border-bottom-radius(@input-border-radius);

        -webkit-touch-callout: none;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;

        &.select2-drop-above .select2-choice {
            .border-top-radius(0);
            .border-bottom-radius(@input-border-radius);
        }

        > .select2-chosen {
            margin-right: @select2-height-base + 2;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        abbr {
            display: none;
            width: round(@select2-height-base * 0.7);
            height: @select2-height-base;
            position: absolute;
            right: @select2-height-base + 5;
            top: 0px;

            color: @select2-choice-close-color;
            text-decoration: none;
            text-align: center;
            line-height: @select2-height-base + 2;

            border: 0;
            cursor: pointer;
            outline: 0;

            &:before {
                content: @select2-choice-close-icon;
            }

            &:hover {
                color: @select2-choice-close-hover-color;
                cursor: pointer;
            }
        }

        .select2-arrow {
            display: inline-block;
            width: @select2-height-base + 2;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background-clip: padding-box;
            background: @select2-arrow-bg;
            border-left: 1px solid @select2-arrow-border-color;
            .border-left-radius(0);
            .border-right-radius(@input-border-radius);

            b {
                display: block;
                width: 100%;
                height: 100%;
                line-height: @select2-height-base + 2;
                text-align: center;
                color: @select2-arrow-color;

                &:before {
                    content: @select2-arrow-icon;
                }
            }
        }
    }

    &.select2-allowclear .select2-choice {
        abbr {
            display: inline-block;
        }

        .select2-chosen {
            margin-right: 42px;
        }
    }
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.select2-drop-mask {
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: @zindex-select2;
    /* styles required for IE to work */
    background-color: #fff;
    filter: alpha(opacity=0);
}

.select2-drop {
    width: 100%;
    margin-top: -1px;
    position: absolute;
    z-index: @zindex-select2 + 1;
    top: 100%;

    background: @input-bg;
    color: @input-color;
    border: 1px solid @input-border;
    border-top: 0;

    .border-top-radius(0);
    .border-bottom-radius(@input-border-radius);

    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.14);
            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.14);

    &.select2-drop-above {
        margin-top: 1px;
        border-top: 1px solid @input-bg;
        border-bottom: 0;

        .border-top-radius(@input-border-radius);
        .border-bottom-radius(0);

        -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, .14);
                box-shadow: 0 -1px 3px rgba(0, 0, 0, .14);

        &.select2-drop-active {
            border-top: 1px solid @input-border-focus;
        }

        .select2-search input {
            margin-top: 4px;
        }
    }

    .select2-drop-footer {
        display: table;
        width: 100%;
        border-top: 1px solid @select2-btn-border;
        bottom: 0;
    }

    .select2-drop-footer-btn {
        display: table-cell;
        text-align: center;

        > a {
            text-decoration: none;
            color: @select2-btn-color;
            background-color: @select2-btn-bg;
            padding: 5px;
            display: block;

            border-left: 1px solid @select2-btn-border;

            &:hover,
            &focus {
                background-color: @select2-btn-hover-bg;
            }
        }

        &:first-child {
            > a {
                border-left: none;
            }
        }
    }
}

.select2-drop-active {
    border: 1px solid @input-border-focus;
    border-top: none;
}

.select2-drop-auto-width {
    border-top: 1px solid @input-bg;
    width: auto;

    .select2-search {
        padding-top: 4px;
    }
}

.select2-search {
    display: inline-block;
    width: 100%;
    min-height: 26px;
    margin: 0;
    padding: 4px;

    position: relative;
    z-index: @zindex-select2 + 2;

    white-space: nowrap;

    &:after {
        content: @select2-search-icon;
        position: absolute;
        display: inline-block;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: @select2-height-base + 2;
        margin-left: round((-@select2-height-base - 2) / 2) - 2;
        color: @select2-search-color;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    input {
        width: 100%;
        height: auto !important;
        min-height: @select2-height-base + 2;
        padding: 4px 20px 4px 5px;
        margin: 0;

        outline: 0;
        font-size: 1em;

        border: 1px solid @input-border;
        .border-top-radius(0);
        .border-bottom-radius(0);

        -webkit-box-shadow: none;
                box-shadow: none;

        &.select2-active {
            color: @select2-active-color;
            background-color: @select2-active-bg;
        }
    }
}

.select2-container-active {
    .select2-choice,
    .select2-choices {
        border: 1px solid @input-border-focus;
        outline: none;
    }
}

.select2-dropdown-open {
    .select2-choice {
        border-bottom-color: transparent;
        -webkit-box-shadow: 0 1px 0 @select2-arrow-bg inset;
                box-shadow: 0 1px 0 @select2-arrow-bg inset;

        .border-bottom-radius(0);

        background-color: @select2-open-bg;

        abbr {
            color: @select2-open-choice-close-color;
        }

        .select2-arrow {
            background: transparent;
            border-left: none;
            filter: none;

            b {
                color: @select2-open-arrow-color;

                &:before {
                    content: @select2-open-arrow-icon;
                }
            }
        }
    }

    &.select2-drop-above {
        .select2-choice,
        .select2-choices {
            border-top-color: transparent;
        }
    }
}

.select2-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

// Results
// -------------------------

.select2-results {
    max-height: 200px;
    padding: 4px;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    ul.select2-result-sub {
        margin: 0;
        padding-left: 0;

        > li .select2-result-label {
            padding-left: 20px;
        }

        ul.select2-result-sub {
            > li .select2-result-label {
                padding-left: 40px;
            }

            ul.select2-result-sub {
                > li .select2-result-label {
                    padding-left: 60px;
                }

                ul.select2-result-sub {
                    > li .select2-result-label {
                        padding-left: 80px;
                    }

                    ul.select2-result-sub {
                        > li .select2-result-label {
                            padding-left: 100px;
                        }
                    }

                    ul.select2-result-sub {
                        > li .select2-result-label {
                            padding-left: 110px;
                        }

                        ul.select2-result-sub {
                            > li .select2-result-label {
                                padding-left: 120px;
                            }
                        }
                    }
                }
            }
        }
    }

    li {
        list-style: none;
        display: list-item;
        background-image: none;

        &.select2-result-with-children > .select2-result-label {
            font-weight: bold;
        }

        em {
            background: @select2-results-em;
            font-style: normal;
        }
    }

    .select2-result-label {
        padding: 3px 7px 4px;
        margin: 0;
        cursor: pointer;

        min-height: 1em;

        -webkit-touch-callout: none;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
    }

    .select2-highlighted {
        background: @select2-highlighted-bg;
        color: @select2-highlighted-color;

        em {
            background: transparent;
        }

        ul {
            background: @input-bg;
            color: @input-color;
        }
    }

    .select2-no-results,
    .select2-searching,
    .select2-selection-limit {
        background: @select2-results-info;
        display: list-item;
        padding-left: 5px;
    }

    // disabled look for disabled choices in the results dropdown
    .select2-disabled {
        background: @input-bg-disabled;
        display: list-item;
        cursor: default;

        .select2-highlighted {
            color: @input-color;
            background: @input-bg-disabled;
            display: list-item;
            cursor: default;
        }
    }

    .select2-selected {
        display: none;
    }
}

.select2-more-results {
    background: @select2-more-results-bg;
    display: list-item;

    .select2-active {
        color: @select2-active-color;
        background-color: @select2-active-bg;
    }
}

// Disabled styles
// -------------------------

.select2-container.select2-container-disabled {
    .select2-choice {
        background-color: @input-bg-disabled;
        background-image: none;
        cursor: default;

        .select2-arrow {
            background-color: @input-bg-disabled;
            background-image: none;
            border-left: 0;
        }

        abbr {
            display: none;
        }
    }
}

// Multiselect
// -------------------------

.select2-container-multi {
    .select2-choices {
        height: auto !important;
        height: 1%;
        min-height: @select2-height-base;
        margin: 0;
        padding: 0;
        position: relative;

        border: 1px solid @input-bg;
        cursor: text;
        overflow: hidden;

        background-color: @input-bg;

        li {
            float: left;
            list-style: none;
        }

        .select2-search-field {
            margin: 0;
            padding: 0;
            white-space: nowrap;

            input {
                padding: 5px;
                margin: 1px 0;

                color: @input-color;
                outline: 0;
                border: 0;
                -webkit-box-shadow: none;
                        box-shadow: none;
                background: transparent !important;

                &.select2-active {
                    color: @select2-active-color;
                    background-color: @select2-active-bg;
                }
            }
        }

        .select2-search-choice {
            padding: 3px 5px 3px 18px;
            margin: 3px 0 3px 5px;
            position: relative;

            line-height: round((@select2-height-base + 2) / 2);
            color: @input-color;
            cursor: default;
            border: 1px solid @input-border;

            .border-top-radius(@input-border-radius);
            .border-bottom-radius(@input-border-radius);

            -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
                    box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);

            background-clip: padding-box;

            -webkit-touch-callout: none;
              -webkit-user-select: none;
                 -moz-user-select: none;
                  -ms-user-select: none;
                      user-select: none;

            background-color: @input-bg;

            .select2-search-choice-close {
                color: @select2-choice-close-color;

                &:before {
                    content: @select2-choice-close-icon;
                }

                &:hover {
                    color: @select2-choice-close-hover-color;
                }
            }
        }

        .select2-search-choice-focus {
            border-color: @input-border-focus;

            .select2-search-choice-close {
                color: @select2-choice-close-hover-color;
            }
        }
    }

    &.select2-container-active {
        .select2-choices {
            border: 1px solid @input-border-focus;
            outline: none;
        }
    }

    .select2-search-choice-close {
        left: 0;
    }

    // disabled styles
    &.select2-container-disabled .select2-choices {
        background-color: @input-bg-disabled;
        background-image: none;
        cursor: default;

        .select2-search-choice {
            padding: 3px 5px 3px 5px;
            background-image: none;
            background-color: @input-bg-disabled;

            .select2-search-choice-close {
                display: none;
                background: none;
            }
        }
    }
}

.select2-locked {
  padding: 3px 5px 3px 5px !important;
}

.select2-search-choice-close {
    display: block;
    width: 18px;
    line-height: round((@select2-height-base + 2) / 2 + (2 * 3) + 2);
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: center;

    outline: none;
}

.select2-default {
    color: @input-color !important;
}

html[dir="rtl"] {
    .select2-container-multi {
        .select2-choices {
            li {
                float: right;
            }

            .select2-search-choice {
                margin-left: 0;
                margin-right: 5px;

                .select2-chosen {
                    cursor: default;
                }
            }
        }
    }

    .select2-search-choice-close {
        right: auto;
        left: 0;
    }
}

.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
    text-decoration: underline;
}

.select2-offscreen, .select2-offscreen:focus {
    clip: rect(0 0 0 0) !important;
    width: 1px !important;
    height: 1px !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    outline: 0 !important;
    left: 0px !important;
    top: 0px !important;
}

.select2-display-none {
    display: none;
}

.select2-measure-scrollbar {
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 100px;
    height: 100px;
    overflow: scroll;
}

.select2-wrapper {
    > input[type=text],
    > div > input[type=text],
    > select,
    > div > select {
        opacity: 0;
    }

    > select[multiple],
    > div > select[multiple] {
        height: @select2-height-base + 2;
    }
}

// Bootstrap
// -------------------------

.form-control {
    &.select2-container {
        height: auto !important;
        padding: 0px;

        &.select2-container-active {
            border-color: @input-border-focus;
        }

        &.select2-dropdown-open {
            border-color: @input-border-focus;
            .border-top-radius(@input-border-radius);
            .border-bottom-radius(0);

            .select2-choices {
                .border-top-radius(@input-border-radius);
                .border-bottom-radius(0);
            }
        }

        .select2-choices {
            border: 0 !important;
            .border-top-radius(@input-border-radius);
            .border-bottom-radius(@input-border-radius);
        }
    }

    .select2-choice {
        border: 0;
        .border-top-radius(@input-border-radius);
        .border-bottom-radius(@input-border-radius);

        .select2-arrow {
            .border-left-radius(0);
            .border-right-radius(@input-border-radius);
        }
    }
}

.control-group.success {
    .select2-container.select2-container-active {
        border-color: @brand-success;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-success, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-success, 10%) !important;
        background: @state-success-bg !important;
    }
}

.control-group.info {
    .select2-container.select2-container-active {
        border-color: @brand-info;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-info, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-info, 10%) !important;
        background: @state-info-bg !important;
    }
}

.control-group.warning {
    .select2-container.select2-container-active {
        border-color: @brand-warning;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-warning, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-warning, 10%) !important;
        background: @state-warning-bg !important;
    }
}

.control-group.error {
    .select2-container.select2-container-active {
        border-color: @brand-danger;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-danger, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-danger, 10%) !important;
        background: @state-danger-bg !important;
    }
}

@media (max-width: @screen-xs-max) {
    @select2-search-header-height: @select2-height-base + 2 + (20 * 2);

    .select2-container-multi {
        &.select2-dropdown-open {
            .select2-search-field {
                position: fixed;
                z-index: @zindex-select2 + 2;
                top: 50px;
                left: 0;
                right: 0;
                width: auto !important;
                padding: 20px;
                max-height: @select2-search-header-height;
                border-bottom: 2px solid @input-border-focus;

                &:after {
                    content: @select2-search-icon;
                    position: absolute;
                    display: inline-block;
                    font-family: FontAwesome;
                    font-style: normal;
                    font-weight: normal;
                    line-height: @select2-height-base + 2;
                    margin-left: round((-@select2-height-base - 2) / 2) - 2;
                    color: @select2-search-color;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }

                input {
                    width: 100% !important;
                    height: auto !important;
                    min-height: @select2-height-base + 2 !important;
                    padding: 4px 20px 4px 5px !important;
                    margin: 0 !important;

                    border: 1px solid @input-border;
                }
            }
        }
    }

    .select2-drop {
        position: fixed !important;
        width: auto !important;
        left: 0px !important;
        right: 0px !important;
        top: 50px !important;
        bottom: 47px !important;
        border: none !important;
        margin-top: 0 !important;
        padding-top: @select2-search-header-height;
        box-shadow: 1px -1px 3px rgba(0, 0, 0, 0.14);

        .select2-search {
            position: fixed;
            background-color: @input-bg;
            padding: 20px;
            max-height: @select2-search-header-height;
            margin-top: -@select2-search-header-height;
            border-bottom: 2px solid @input-border-focus;
        }

        .select2-results {
            max-height: inherit !important;
            height: 100%;

            .select2-result-label {
                padding: 10px 20px;
            }
        }

        .select2-drop-footer {
            position: fixed;
            bottom: 0;

            .select2-drop-footer-btn {
                > a {
                    padding: 14px 5px;
                    line-height: 18px;
                }
            }
        }
    }
}


Highlighted file in tree view maintain their git status color

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


Different font for fold icons (Closes #747)

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/Atvaark/insomnia.git/'


fixed pager

fixed pager

/*
 * Pagers component theme overrides
 *------------------------------------------------------------------------------------------
 */

.pager {
	.icon-ui-arrowright,
	.icon-ui-arrowleft {
	    text-align: center;
	    vertical-align: middle;
        &:before {
            position:relative;
            top:-1px !important; //TODO needs to be changed in dub
        }
	}
    input[type=text] {
        margin-left: 5px;
        margin-right: 5px;
    }
    .pager-span {
        //Why is there a class for this.. there is styling on a <span> tag
         padding-left: 5px;
         padding-right: 5px;
         display: inline-block;
         background: none;
         border: 0;
         border-radius: 0;
    }
}

/*
 * Pagers component theme overrides
 *------------------------------------------------------------------------------------------
 */

.pager {
	.icon-ui-arrowright,
	.icon-ui-arrowleft {
	    text-align: center;
	    vertical-align: middle;
	}
    input[type=text] {
        margin-left: 5px;
        margin-right: 5px;
    }
    .pager-span {
        //Why is there a class for this.. there is styling on a <span> tag
         padding-left: 5px;
         padding-right: 5px;
         display: inline-block;
         background: none;
         border: 0;
         border-radius: 0;
    }
}


fixing the disabled color found in tables.less to @dell-gray

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/DellGDC/dell-ui-components.git/'


Add under the rug styling and many minor design updates to the post page

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 indentation

fix indentation

.rtl {
	direction: rtl;

	// Mix-ins
	.right(@right) {
		right: @right;
		left: auto;
	}

	.left(@left) {
		left: @left;
		right: auto;
	}

	.margin-right(@margin-right) {
		margin-right: @margin-right;
		margin-left: auto;
	}

	.margin-left(@margin-left) {
		margin-left: @margin-left;
		margin-right: auto;
	}

	.padding-right(@padding-right) {
		padding-right: @padding-right;
		padding-left: 0;
	}

	.padding-left(@padding-left) {
		padding-left: @padding-left;
		padding-right: 0;
	}

	button {
		text-align: right;
	}

	.text-right {
		text-align: left;
	}

	.side-nav {
		.right(0);

		.header {
			.right(0);

			.account-box {
				.info {
					padding: 10px 18px 10px 0;

					.thumb {
						float: right;
					}

					.thumb::after {
						.right(-14px);
					}

					.data {
						float: right;
						padding: 0 10px 0 25px;

						.wrp {
							text-align: right;
						}
					}
				}

				.options {
					.right(0);

					.status {
						.padding-right(38px);
					}

					span.soon {
						.left(-30px);
					}

					.status::after {
						.right(18px);
					}
				}

				.options._hidden {
					transform: translateX(100%);
				}
			}
		}

		> .arrow {
			.left(8px);
		}

		.arrow {
			transform: rotateY(180deg);
		}

		.footer {
			.right(0);
		}

		.rooms-list {
			direction: ltr;

			> .wrapper {
				direction: rtl;
				.padding-right(8px);

				h3.add-room {
					i {
						.left(6px);
					}
				}

				h3 {
					.padding-right(10px);
				}

				ul a {
					padding: 6px 6px 7px 25px;
				}
			}
		}

		.more {
			padding: 4px 10px 4px 0;
		}

		.empty {
			.padding-right(10px);
		}

		ul .opt {
			.left(0);
			.padding-left(10px);
			text-align: left;
		}

		.flex-nav {
			.right(0);

			> section {
				.right(0);
			}

			header {
				.right(0);
				.padding-right(15px);

				> div {
					text-align: right;
				}
			}

			.content {
				> .wrapper {
					direction: rtl;
				}
			}

			.input-submit {
				margin: 35px -4px 0 0;
			}

			.button::before {
				.right(0);
			}

			footer {
				.right(0);
				text-align: right;

				> div {
					text-align: right;
				}
			}

			&.animated-hidden {
				.transform(translateX(100%));

				header,
				footer,
				.content {
					.transform(translateX(100%));
				}
			}
		}

		.search-form {
			.search {
				.padding-right(25px);
			}

			.margin-left(20px);
		}

		h3 {
			.padding-right(10px);

			&.add-room {
				i {
					.left(6px);
				}
			}
		}

		.unread {
			.left(6px);
		}
	}

	.side-nav::before {
		.right(8px);
	}

	.main-content {
		left: 0;
		right: @rooms-box-width;
		transition: left 0.25s cubic-bezier(0.5, 0, 0.1, 1);

		&.flex-opened {
			left: @flex-tab-width + 40px;
		}
	}

	.page-settings {
		.content {
			> .info {
				padding-left: 20px;
			}
		}

		.section {
			border-right: none;
			border-left: 1px solid #dddddd;

			.section-content {
				.input-line {
					> label {
						text-align: right;
					}
				}
			}
		}
	}

	.messages-box {
		margin: 60px 0 0 20px;

		.new-message {
			.right(50%);
		}
	}

	.terminal {
		direction: ltr;
	}

	.container-bars {
		.upload-progress {
			.upload-progress-progress {
				.right(0);
			}

			.upload-progress-text {
				> a {
					float: left;
				}
			}
		}

		.unread-bar {
			> a.mark-read {
				float: left;
			}

			> a.jump-to {
				float: right;
			}
		}
	}

	.messages-container {
		.right(0);

		.edit-room-title {
			.margin-right(4px);
		}

		.wrapper {
			.right(0);
		}

		.footer {
			.right(0);
		}

		.message-form {
			> div {
				.input-message-container {
					.inner-left-toolbar {
						.right(13px);
					}
				}
			}

			textarea {
				padding-right: 49px;
				padding-left: 8px;
				text-align: right;
				border-width: 0 0 0 1px;
				border-right-width: 0;
			}

			> .stream-info {
				float: right;
			}

			> .formatting-tips {
				float: left;
				position: relative;
				right: auto;

				q {
					padding: 0 3px 0 0;
					border-right: 3px solid;
					border-left: 0 none;
					// border-right-color: #cccccc;
				}
			}
		}
	}

	.account-box {
		.options {
			direction: ltr;

			> .wrapper {
				direction: rtl;
			}
		}
	}

	.flex-tab-container {
		border-width: 0 1px 0 0;
	}

	.flex-tab-bar {
		.tab-button {
			&.active {
				.margin-right(-1px);
				border-left: 3px solid #ff0000;
				border-right: unset;
			}
		}
	}

	.flex-tab {
		.control {
			text-align: right;
			padding: 12px 30px;

			> a,
			> form {
				float: right;
			}

			.more {
				.right(0);
				.transform(translateX(27px));
			}

			.search-form {
				padding: 0 0 0 4px;
				width: 100%;

				.icon-plus {
					.right(4px);
				}
			}

			.info-tabs {
				text-align: left;
				.left(20px);
			}
		}
	}

	.flex-opened {
		.flex-tab {
			.control {
				.more {
					.transform(translateX(0));
				}
			}
		}
	}

	.input-line {
		&.search {
			.icon-spin {
				.left(5px);
			}

			.icon-search,
			.icon-right-open-small {
				.right(2px);
			}

			input {
				padding-right: 20px;
				padding-left: 8px;
				text-align: right;
			}
		}

		> div {
			.right {
				.left(10px);
			}
		}

		&.double-col {
			> label {
				float: right;
				.padding-left(20px);
				text-align: left;
				padding: 10px 0 10px 20px;
			}

			> div {
				float: right;

				label {
					.margin-left(4px);

					&:nth-last-child(1) {
						.margin-left(0);
					}

					input {
						.margin-left(4px);
					}
				}
			}
		}
	}

	.user-image {
		.avatar {
			&::after {
				.right(-12px);
			}
		}
	}

	.lines .user-image {
		button {
			> div {
				float: right;
			}
		}

		p {
			float: right;
			.padding-right(10px);
		}
	}

	.user-view {
		nav {
			.margin-right(-4px);

			.back {
				float: left;
			}
		}

		.stats {
			li {
				border-right: unset;
				border-left: 2px;
			}
		}
	}

	@media all and(max-width: 1100px) {
		#rocket-chat {
			.flex-opened {
				left: 0;
				right: @rooms-box-width;

				.flex-tab {
					.transform(translateX(calc(~'100% + 40px')));
				}
			}
		}
	}

	@media all and(max-width: 780px) {
		#rocket-chat {
			.main-content {
				right: 0;
			}

			.fixed-title h2 {
				margin-right: 45px;
			}
		}
	}

	.burger {
		.margin-right(7px);
		.right(0);

		.unread-burger-alert {
			.left(4px);
		}

		&.menu-opened {
			i {
				&:nth-child(1) {
					.transform(translate(25%, 3px) rotate(45deg) scale(0.5, 1));
				}

				&:nth-child(3) {
					.transform(translate(25%, -3px) rotate(-45deg) scale(0.5, 1));
				}
			}
		}
	}

	.arrow {
		&::before,
		&::after {
			.calc(right, ~"50% - 5px");
		}

		&::before {
			.transform(rotate(135deg) translateX(4px));
		}

		&::after {
			.transform(rotate(-135deg) translateX(4px));
		}

		&.left {
			&::before {
				.transform(rotate(-45deg) translateY(-4px));
			}

			&::after {
				.transform(rotate(45deg) translateY(4px));
			}
		}

		&.top {
			&::before {
				.transform(rotate(45deg) translateX(-2px) translateY(2px));
			}

			&::after {
				.transform(rotate(-45deg) translateX(2px) translateY(2px));
			}
		}

		&.bottom {
			&::before {
				.transform(rotate(-45deg) translateX(-2px) translateY(-2px));
			}

			&::after {
				.transform(rotate(45deg) translateX(2px) translateY(-2px));
			}
		}

		&.close {
			&::before {
				.transform(rotate(-45deg));
			}

			&::after {
				.transform(rotate(45deg));
			}
		}
	}

	.message {
		padding-left: 20px;
		padding-right: 70px;

		.message-dropdown {
			.right(-2px);

			ul {
				li {
					&:first-child {
						padding-right: 6px;
						padding-left: 8px;
						border-left: 1px solid #eeeeee;
						border-right: unset;
					}

					&:last-child {
						padding-left: 13px;
						padding-right: 8px;
					}
				}
			}
		}

		.user {
			margin-left: 5px;
			margin-right: 0;
		}

		.thumb {
			.right(20px);
		}

		.info {
			.edited {
				border-right: 1px dotted #bab8d8;
				border-left: unset;
				.padding-right(3px);
				.margin-right(3px);
			}
		}

		.private {
			.margin-right(10px);
			//
		}

		&.sequential {
			padding-top: 4px;

			.info {
				text-align: left;
				.right(5px);

				.edited {
					border-right: 0;
					.margin-right(0);
					.padding-right(0);
				}

				.message-action {
					float: right;
					//
					.margin-right(1px);
					//
				}
			}
		}
	}

	blockquote {
		.padding-right(10px);

		&::before {
			.right(0);
		}
	}

	.first-unread {
		.body {
			&::before {
				right: 20px;
				left: 0;
			}

			&::after {
				.left(0);
			}
		}
	}

	.ticks-bar {
		.left(2px);
	}

	.fixed-title {
		padding: 0 20px 0 10px;
		.right(0);
	}

	.list-view {
		> .title {
			.see-all {
				float: left;
			}
		}

		&.uploaded-files-list {
			a {
				direction: ltr;
			}

			i {
				float: right;
				.margin-left(10px);
			}
		}
	}

	.page-list {
		.list {
			a {
				.info {
					ul {
						.margin-right(3px);
					}
				}
			}

			.user-image {
				float: left;
				.margin-right(12px);
			}

			table {
				thead {
					th {
						text-align: right;
					}
				}
			}
		}
	}

	.statistics-table {
		th,
		td {
			text-align: right;
		}
	}

	.code-mirror-box {
		direction: ltr;

		.buttons {
			text-align: left;
		}

		&.code-mirror-box-fullscreen {
			left: 40px;
			right: 260px;

			.title {
				padding-right: 10px;
				padding-left: unset;
				direction: rtl;
			}
		}
	}

	@media all and (max-width: 780px) {
		.code-mirror-box {
			&.code-mirror-box-fullscreen {
				right: 0;
			}
		}
	}

	.rocket-form {
		legend {
			&::after {
				right: 0;
			}
		}

		.logoutOthers {
			text-align: left;
		}

		.submit {
			text-align: left;
		}
	}

	/* Override toastr messages to show on hte left side */
	.toast-top-right {
		.left(12px);
	}

	.toolbar-search__icon {
		right: 0;
	}

	.toolbar-search__icon--cancel {
		right: auto;
		left: 0;
	}

	.message-popup.search-results-list {
		direction: ltr;
		text-align: right;
		padding: 25px 8px 0 0;

		.popup-item {
			direction: rtl;
		}
	}
}


Items not seperated with '|'

Items not seperated with '|'

Let just whitespace between the list-items do the work. ;)

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/svijee/theme-default.git/'


add min-width to footer so layout doesn't break


Add margins to headers

Add margins to headers

@import "../../styles/custom.less";

.StoryFull {
  max-width: 710px;
  margin: 0 auto;

  &__submenu__icon {
    font-size: 20px !important;
    vertical-align: -1px;
  }

  &__title {
    color: #353535;
    font-size: 26px;
    font-weight: 500;
  }

  &__topics {
    margin: 16px 0;

    & > .Topic {
      margin-right: 4px;
    }
  }

  &__header {
    position: relative;
    display: flex;
    padding-top: 24px;

    &__text {
      margin-left: 16px;

      & > a {
        display: block;
        font-size: 20px;
        font-weight: bold;
      }

      &__date {
        color: #99aab5;
        font-size: 14px;
      }
    }

    &__more {
      position: absolute;
      right: 0;
      top: 24px;
      background-color: transparent !important;
      border-bottom: none !important;

      &__item {
        border-bottom: none !important;

        & > ul {
          left: -128px !important;
        }

        & > div {
          padding: 0 2px !important;
        }
      }

      &__icon {
        font-size: 36px !important;
        color: @purple;
      }
    }
  }

  &__content {
    &__title {
      font-size: 20px;
      margin: 8px 0;
    }

    & h1, h2, h3, h4, h5, h6 {
      margin: 8px 0;
    }

    & p:not(:empty) {
      letter-spacing: 0.7px;
      text-align: justify;
      margin: 32px 0;
      line-height: 30px;
      font-size: 18px;
    }

    & img {
      margin: 0 auto;
      max-width: 100%;
      display: block;
    }
  }
}

@import "../../styles/custom.less";

.StoryFull {
  max-width: 710px;
  margin: 0 auto;

  &__submenu__icon {
    font-size: 20px !important;
    vertical-align: -1px;
  }

  &__title {
    color: #353535;
    font-size: 26px;
    font-weight: 500;
  }

  &__topics {
    margin: 16px 0;

    & > .Topic {
      margin-right: 4px;
    }
  }

  &__header {
    position: relative;
    display: flex;
    padding-top: 24px;

    &__text {
      margin-left: 16px;

      & > a {
        display: block;
        font-size: 20px;
        font-weight: bold;
      }

      &__date {
        color: #99aab5;
        font-size: 14px;
      }
    }

    &__more {
      position: absolute;
      right: 0;
      top: 24px;
      background-color: transparent !important;
      border-bottom: none !important;

      &__item {
        border-bottom: none !important;

        & > ul {
          left: -128px !important;
        }

        & > div {
          padding: 0 2px !important;
        }
      }

      &__icon {
        font-size: 36px !important;
        color: @purple;
      }
    }
  }

  &__content {
    &__title {
      font-size: 20px;
      margin: 8px 0;
    }

    & p:not(:empty) {
      letter-spacing: 0.7px;
      text-align: justify;
      margin: 32px 0;
      line-height: 30px;
      font-size: 18px;
    }

    & img {
      margin: 0 auto;
      max-width: 100%;
      display: block;
    }
  }
}


test span

test span

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/cgoudarzi/cgoudarzi.github.io.git/'


Updates table design

Updates table design

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-jquery-table-pager.git/'


updated uikit theme

updated uikit theme

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/4nxiety/pagekit.git/'


Remove redundancy

Remove redundancy

/**
*    Copyright 2015 ppy Pty. Ltd.
*
*    This file is part of osu!web. osu!web is distributed with the hope of
*    attracting more community contributions to the core ecosystem of osu!.
*
*    osu!web is free software: you can redistribute it and/or modify
*    it under the terms of the Affero GNU General Public License version 3
*    as published by the Free Software Foundation.
*
*    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
*    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*    See the GNU Affero General Public License for more details.
*
*    You should have received a copy of the GNU Affero General Public License
*    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
*
*/
.contest-art-entry {
  @base-size: 256px;
  @_top: contest-art-entry;

  .contest-art-sizes(@base-width, @base-height) {
      width: @base-width;
      height: @base-height;

      &.@{_top}--placed-2 {
        width: @base-width * 0.75;
        height: @base-height * 0.75;
      }

      &.@{_top}--placed-3 {
        width: @base-width * 0.5;
        height: @base-height * 0.5;
      }

      &.@{_top}--smaller {
        width: @base-width * 0.5;
        height: @base-height * 0.5;
      }
  }

  margin: 10px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  background-size: cover;
  background-position: top;
  transform: translateZ(0);

  .contest-art-sizes(@base-size, @base-size);
  &--portrait {
    .contest-art-sizes(@base-size/(4/3), @base-size);
  }
  &--landscape {
    .contest-art-sizes(@base-size, @base-size/(16/9));
  }

  &--selected {
      border: 4px solid #ffa500;
  }

  &--result {
    margin-bottom: 58px;
  }

  &--placed {
    margin-bottom: 68px;
  }

  &__thumbnail {
    width: 100%;
    height: 100%;
    display: block;
  }

  &__trophy {
    &--1 {
      color: gold;
    }
    &--2 {
      color: silver;
    }
    &--3 {
      color: chocolate;
    }
  }

  &__entrant {
    text-align: right;
    font-size: 12px;
    .white-link();
    text-decoration: none;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    .@{_top}--placed & {
      font-size: 14px;
      overflow: visible;
    }
  }

  &__result {
    margin-top: 10px;
    text-align: center;
  }

  &__result-ranking {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

  &__result-place {
    padding-right: 5px;
    .@{_top}--placed & {
      font-size: 20px;
      white-space: nowrap;
    }
  }

  &__result-votes {
    font-size: 10px;
    color: #8dacb6;
    &--percentage {
      color: #60757b;
    }
  }
}

/**
*    Copyright 2015 ppy Pty. Ltd.
*
*    This file is part of osu!web. osu!web is distributed with the hope of
*    attracting more community contributions to the core ecosystem of osu!.
*
*    osu!web is free software: you can redistribute it and/or modify
*    it under the terms of the Affero GNU General Public License version 3
*    as published by the Free Software Foundation.
*
*    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
*    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*    See the GNU Affero General Public License for more details.
*
*    You should have received a copy of the GNU Affero General Public License
*    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
*
*/
.contest-art-entry {
  @base-size: 256px;
  @_top: contest-art-entry;

  .contest-art-sizes(@base-width, @base-height) {
      width: @base-width;
      height: @base-height;

      &.@{_top}--placed-2 {
        width: @base-width * 0.75;
        height: @base-height * 0.75;
      }

      &.@{_top}--placed-3 {
        width: @base-width * 0.5;
        height: @base-height * 0.5;
      }

      &.@{_top}--smaller {
        width: @base-width * 0.5;
        height: @base-height * 0.5;
      }
  }

  margin: 10px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  background-size: cover;
  background-position: top;
  transform: translateZ(0);

  .contest-art-sizes(@base-size, @base-size);
  &--portrait {
    .contest-art-sizes(@base-size/(4/3), @base-size);
  }
  &--landscape {
    .contest-art-sizes(@base-size, @base-size/(16/9));
  }

  &--selected {
      border: 4px solid #ffa500;
  }

  &--result {
    margin-bottom: 58px;
  }

  &--placed {
    margin-bottom: 68px;
  }

  &__thumbnail {
    width: 100%;
    height: 100%;
    display: block;
  }

  &__trophy {
    &--1 {
      color: gold;
    }
    &--2 {
      color: silver;
    }
    &--3 {
      color: chocolate;
    }
  }

  &__entrant {
    text-align: right;
    font-size: 12px;
    .white-link();
    text-decoration: none;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    .@{_top}--placed & {
      font-size: 14px;
      overflow: visible;
    }
  }

  &__result {
    margin-top: 10px;
    text-align: center;
  }

  &__result-ranking {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

  &__result-place {
    padding-right: 5px;
    .@{_top}--placed & {
      font-size: 20px;
      white-space: nowrap;
    }
  }

  &__result-votes {
    font-size: 10px;
    color: #8dacb6;
    &--percentage {
      font-size: 10px;
      color: #60757b;
    }
  }
}