@import "../../../../Base/Content/sass/compass";
@import "../../../../Base/Content/sass/bootstrap/variables";
@import "_Variables";

@mixin reset-box-sizing {
    &,
    *,
    *:before,
    *:after {
        @include box-sizing(content-box);
    }
}

@mixin reset-box-sizing-min {
	& {
		@include box-sizing(content-box);
	}
}

.wizdom-bootstrap-wrapper,
.wizdom-bootstrap-wrapper-system {

    * {
		@include box-sizing(border-box);
    }

    *:before,
    *:after {
        @include box-sizing(border-box);
    }

	.ms-promlink-button,
	.ms-csrlistview-controldiv,
	.ms-csrlistview-controldiv * {
		@include box-sizing(content-box);
		line-height:normal !important;
	}

	.ms-csrlistview-controldiv {
		font-size:13px;
	}
}

.webpartPage #wizdomPageLayout {
	// display table to support bootstrap rows properly on webpartpages. ( width 100% because of table )
	display: table;
	width: 100%;

	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

.ms-Icon:before {
	font-family: 'FabricMDL2Icons';
}

.glyphicon:before{
    font-family:'Glyphicons Halflings';
}

.glyphicon, .ms-Icon {
	font-family: $wizdom-font-family !important;
}

.glyphicon span, .ms-Icon span {
	margin-right:.2em;
	margin-left:.2em;
	vertical-align:top;
}

// maybe implement to avoid large title font in sp modals
h1.ms-dlgTitleText {
    font-size: 1em;
}

// to avoid social popup tooltip tekst from getting cut
.bootstrap-wrapper .media-body,
.bootstrap-wrapper .media {
    overflow: visible;
}

.bootstrap-wrapper .input-group .form-control {
	z-index:0;
}

.bootstrap-wrapper .img-thumbnail {
	width:100%;
}

// titles too big in ribbon because of bootstrap.
.ms-cui-tooltip {
	// return to default as sharepoint
	h1 {
		font-size:inherit; 
		margin: 4px 6px;
	}
}

// sharepoint ribbon text
.ms-cui-tt-a > .ms-cui-tt-span,
.ms-browseTab.ms-cui-tt-s > .ms-cui-tt-a > .ms-cui-tt-span,
.ms-promotedActionButton-text {
	color:#bbb !important;
}
.ms-cui-tt-a:hover > .ms-cui-tt-span,
.ms-cui-tt-s > .ms-cui-tt-a
{
	color:#666 !important;
}

// Sharepoint Page Content copy-paste context menu
// We could add wt-page-content before to make the fix only hit page content, but this might fix the copy-paste in all input fields
.ms-cui-menu * {
    box-sizing: content-box !important;
}
.ms-cui-menu img {
    max-width: none !important;
}

.ms-inputuserfield, 
.ms-inputBox { min-height: 25px; }

#globalNavBox,
.ms-dlgTitle,
.js-callout-headerArea,
/*.js-callout-content,*/ /* commented out - because it introduced problems when getting * from reset-box-sizing */
.js-webpart-menuCell,
.ms-contextmenu-box.ms-js-contextmenu > .ms-contextmenu-list > .ms-contextmenu-item > .ms-contextmenu-link {
	@include reset-box-sizing;
}

// introduced this reset-box-sizing-min to only apply content-box on class - not */ before/ after 
.js-webpart-menuCell
{
	@include reset-box-sizing-min;
}

#s4-ribbonrow ul,
#s4-ribbonrow ol {
    margin-bottom: 0;
}

#s4-ribbonrow  {
	.ms-promotedActionButton-text, 
	.ms-cui-TabRowLeft, 
	#fullscreenmodebox {
		@media (max-width:$screen-xs) {
			display:none;
		}
	}
}

.js-callout-content {
    input {
        outline: none;
        outline-width: 0;
    }

    h1, h2, h3, h4, h5 {
        font-size: inherit;
    }
}

.wt-2column {
    & > .container-fluid {

        .avatar-frame {
            border: none;
        }

        @media (min-width:$screen-tablet) {

            & > .row {
                height: 100%;
            }
        }
    }
}

.wizdom-bootstrap-wrapper .pagination {
    margin: 0;    
    @include border-bottom-radius(5px);
    padding-top: $wizdom-webpart-padding;
    padding-bottom:$wizdom-webpart-padding;      
    
    & > li { cursor: pointer; }     

    & > li > a,
    & > li > span {
        @include border-radius(3px);
        margin: 2px;
        padding: 4px 8px;
        border: none;
    }

    & > li:not(.active) > a,
    & > li:not(.active) > a:hover,
    & > li:not(.active) > span:hover {
        background-color: transparent;
    }

    & > .disabled > a,
    & > .disabled > span {
        &,
        &:hover,
        &:focus {
            color: transparent;
            cursor: default;
            outline: none;
        }
    }

    @media (max-width:$screen-desktop) {
        & > li:nth-last-of-type(2) > a,
        & > li:nth-of-type(2) > a {
            display: inline;
        }
    }
}