/*!

* Decko: [[https://decko.org]]
* Copyright 2015 Grass Commons and other contributors; Licensed GPL
*/

/*

These styles are intended to help bridge the default card context with bootstrap styling.
Note: these styles do not appear in pre-bootstrap skins.

*/

$label_color: $gray-600; $header_color: $gray-200; $credit_color: $primary; // $bar-border-color: $grey-100; // $box-border-color: $grey-100; $bar_stripe_color: $gray-700; $box_stripe_color: $gray-700;

header {

a {
  font-size: 1.3em;
}

}

.d0-card-header a {

color: $body-color;
&.edit-link, &.bridge-link, &.help-link {
  color: $text-muted;
}

}

@media print {

header {
  display: none;
}

}

label, .navbox-item-label {

// color: $label_color;

} table {

border-collapse: collapse;

} th {

color: $label_color;
font-weight: normal;
font-style: italic;

} td, th {

vertical-align: top;
padding: 0px;

} a:link, a:visited {

text-decoration: none;

} a:hover, a:focus {

text-decoration: underline;

} form {

margin: 0px;
padding: 0px;

}

.link-muted {

color: $text-muted;
&:hover {
  color: inherit;
}

}

.grow-1 {

flex-grow: 1;

} .grow-2 {

flex-grow: 2;

}

/*——– Special Pages ——–*/

/*– sign in page –*/

sign-in input#login_field, sign-in input#password, forgot-password input#email {

width: 50%;

} forgot-password {

margin-top: 40px;

}

body.mceContentBody {

margin: 4px;

}

/*———– Navbox ————–*/

.select2-navbox-dropdown > .select2-results > .select2-results__options {

max-height: none !important;

}

.navbox-form {

min-width: 50%;
.select2-container {
  width: 100%
}

} /*———– Sidebar ————-*/

.row.row-offcanvas {

> aside, article {
  margin: 0;
}

}

/* collapsed sidebar styles */ @media screen and (max-width: 576px) {

.row-offcanvas {
  position: relative;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.sidebar-offcanvas-right {
  right: -41.6%;
}

.sidebar-offcanvas-left {
  left: -41.6%;
}
.row-offcanvas.right-active {
  right: 41.6%;
}
.row-offcanvas.left-active {
  left: 41.6%;
}
.sidebar-offcanvas {
  position: absolute !important;
  top: 0 !important;
  width: 41.6% !important;
}

}

.offcanvas-toggle {

font-size: 10px !important;
padding: 5px !important;
margin-bottom: 15px !important;

}

/*———- Card menu ————*/

@include media-breakpoint-up(xs) {

.card-slot > .d0-card-frame > .d0-card-header,
.card-slot > .d0-card-header,
.card-slot.labeled-view > .labeled-content > .d0-card-body,
.card-slot,
.card > .card-body,
.card > .card-header {
  > .card-menu._show-on-hover > a {
    display: none;
  }
}
.card-slot:hover > .d0-card-frame > .d0-card-header,
.card-slot:hover > .d0-card-header,
.card-slot.labeled-view:hover > .labeled-content > .d0-card-body,
.card-slot:hover,
.card:hover > .card-body,
.card:hover > .card-header{
  > .card-menu._show-on-hover > a {
    display: inline-block;
  }
}

}

/*———– Change View ———*/

.change-view {

padding: 5px 0px;
border-bottom: 1px dotted $border-color;
.change-card{
  font-weight: bold;
}
.last-update {
  color: $label_color;
}

}

.titled-view > .d0-card-header > {

> .d0-card-header-title .card-title {
  font-size: 1.3em;
}
margin: 3px 0

}

/*———- ( Richtext )————-*/

.table-of-contents {

background: $header_color;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 4px;
margin: 5px 20px 20px 20px;
h5 {
  margin: 0 0 0 40px;
}
ol {
  list-style-type: upper-roman;
  ol {
    list-style-type: upper-alpha;
    padding-left: 25px
  }
}

}

/*———- ( Link list )————-*/

.group-text-middle {

border-left: none;
border-right: none;

}

.group-text-left {

border-right: none;

}

.group-text-right {

border-left: none;

}

/* CARDTYPE_SPECIFIC ——————————*/

.TYPE-toggle.d0-card-content {

font-style: italic;

}

.TYPE-image.d0-card-content, .TYPE-image .d0-card-body {

img {
  max-width: 100%;
}

}

/*———( Search ) ———- */

.search-keyword {

font-style: italic;

}

.search-count {

float: right;
color: $label_color;

}

/*———– (Account Request)————–*/

.invite-links {

padding: 10px;
margin-top: 10px;
background: $header_color;
text-align: center;

} .invite-links a {

font-weight: bold;
margin: 0 20px;

}

/*———- comments ————————————– */

.comment-box {

padding-top: 8px;
input {
  padding: 0px;
}
textarea {
  margin-bottom:5px;
}

} .w-comment-author {

font-style: italic;
margin-left: 10px;

}

.SELF-Xlogo.content_panel-view, .SELF-Xcredit.content_panel-view {

text-align: center;
background: $white;
img {
  max-width: 100%;
}
a {
  color: $credit_color;
}

}

.closed-content {

font-size: 1em !important;
padding:10px;

}

/* english content in css. ugh */ .search-no-results:after {

content:'0 results';

} .closed-content .search-no-results:after {

content:'';

}

/*———- Modal Window ————————————– */

.modal-menu .close{

font-size: 16px;
// margin-left: 10px;

}

.modal-dialog.modal-full {

max-width: 99%;
margin: 1%;

}

/*——– Help Texts ——–*/

.alert-info p:last-child {
  margin-bottom: 0;
}

/*——– Icon Helpers ——–*/ .toggler>i.material-icons{

color: $black;
font-size: 15px;
font-weight: bolder!important;
border: 2px solid $black;
border-radius: 3px;
margin-right: 3px;

}

/* Material icon placement */ .material-icons {

vertical-align: sub;
font-size: medium;

}

/* Rules for sizing the icon. */ .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/*———– Borders ————-*/ .border-all{

border-width: 1px;
border-style: solid;

}

.select2-container–bootstrap .select2-navbox-autocomplete.select2-selection–multiple {

.select2-selection__choice {
  background: none !important;
  border: none !important;
}

.select2-selection__choice__remove {
  display: none !important;
}

}

/*———– Bars and Boxes ————-*/

.expanded-bar, .box {

.unknown-view {
  // TODO: obviate in ruby with better unknown API
  display: none;
}

} .bar {

border-left: 3px solid $bar_stripe_color !important;
.bar-nav {
  width: 20px;
  margin-left: auto;
}
.media {
  width: 100%
}
.media-left {
  max-width: 25%
}
.bar-body {
  display: flex;
}
.bar-left, .bar-right, .bar-middle {
  display: flex;
  padding: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.bar-left {
  font-weight: bold;
  align-items: flex-start;
}
.bar-middle {
  display: none;
  justify-content: center;
}
.bar-right {
  justify-content: flex-end;
}

}

@include media-breakpoint-up(md) {

.bar .bar-middle {
  display: flex;
}

}

.bar-body {

border: 1px solid $border-color;
width: calc(100% - 20px)

}

.bar-nav {

display: flex;
flex-direction: column;
padding-left: 3px;
a {
  color: $text-muted;
  &:hover {
    color: $primary;
  }
}

}

@include media-breakpoint-up(sm) {

.bar-nav {
  display: none;
}
.bar, .expanded-bar {
  &:hover .bar-nav {
    display: flex
  }
}

}

.collapsed-bar {

display: flex;
justify-content: space-between;

}

.expanded-bar {

margin: 0.5em 0;
display: flex;
> .bar-body {
  > .bar {
    border-bottom: 1px solid $border-color;
    display: flex;
  }
  > .bar-bottom {
    padding: 1em 1em 1em 2em;
    border-top: 0;
    overflow: hidden;
  }
}

}

.item-box {

display: inline-block;
min-width: 260px;
width: 15%;
padding: 10px 1%;
vertical-align: top;

}

.box-top {

display: flex;
min-height: 60px;
flex-direction: column;
justify-content: center;
overflow: auto;
h1, h2, h3, h4, h5, h6, div, span, a {
  white-space: nowrap;
  overflow:  hidden;
  text-overflow: ellipsis;
}

}

.box-middle {

min-height: 180px;
img {
  object-fit: contain;
  height: 130px;
  width: 190px;
}
i {
  display: flex;
  justify-content: center;
  min-height: 130px;
  align-items: center;
  font-size: 70px;
  color: $text-muted;
}
overflow: hidden;
text-overflow: ellipsis;

}

.box-bottom {

display: flex;
align-items: center;
justify-content: space-between;

}

.badge {

vertical-align: text-top!important;

}

/*———– Slim Select2 ————-*/

.slim-select2 {

.select2-container--bootstrap {
  .select2-selection, &.select2-container--open .select2-selection {
    padding-top: 2px;
    height: 1.5rem;
  }

  .select2-selection--single .select2-selection__rendered {
    font-size: 80%;
  }

  .select2-results__option {
    font-size: 80%;
  }
}

}