styles/sass/sf-additional.scss
// Styling for the superdesk specific elements
// ----------------------------------------------------------------------------------------
// Webkit scroll
// --------------------------------------------------
::-webkit-scrollbar {
width: 8px;
height: 8px;
margin: -1px 0;
position: fixed;
inset-inline-end: 10px;
}
::-webkit-scrollbar:hover {
background-color: var(--sd-colour__webkit-scrollbar--hover);
cursor: pointer;
}
::-webkit-scrollbar-thumb {
background: var(--sd-colour__webkit-scrollbar-thumb);
}
::-webkit-scrollbar-thumb:hover {
background: var(--sd-colour__webkit-scrollbar-thumb--hover);
cursor: pointer;
}
/*
----------------------------------------------------------------------
INPUT ELEMENTS
----------------------------------------------------------------------
*/
// Multiple select
// ---------------------------------------------
.sdselect {
width: 210px;
position: relative;
&.open {
@include box-shadow(0px 0px 5px 0px #d0d0d0 !important);
.sdselect-btn {
border-block-end: 0 !important;
}
}
&:hover {
.sdselect-btn {
cursor: pointer;
}
}
.sdselect-btn {
display: inline-block;
@include box-sizing(border-box);
width: 100%;
@include border-radius(2px);
border: 1px solid #d0d0d0 ;
padding: 6px;
height: 27px;
outline:none !important;
@include box-shadow(inset 0 0 0 #000 !important);
@include box-shadow(none !important);
text-decoration: none;
color: var(--color-text);
line-height: 15px;
font-size: 12px;
.caret {
margin: 5px 3px 0 0;
}
}
.sdselect-menu {
position: absolute;
background: #fff;
z-index: 10;
inset-block-start: 26px;
inset-inline-start: 0;
inset-inline-end: 0;
height: auto;
border: 1px solid #d0d0d0;
@include border-radius(0 0 2px 2px);
.sdselect-filter {
padding: 2px 7px;
border-block-end: 1px solid #d0d0d0;
input[type="text"] {
height: 21px !important;
padding: 3px !important;
border: 0 !important;
min-height: 0;
@include box-shadow(0 0 0 0 #000);
&:focus {
@include box-shadow(0 0 0 0 #000 !important);
}
}
}
.sdselect-all {
padding: 4px 9px;
border-block-end: 1px solid #d0d0d0;
a {
text-decoration: none;
font-size: 9px;
text-transform: uppercase;
color: #989898;
margin-inline-end: 10px;
&:hover {
cursor: pointer;
color: #666;
}
}
}
.list-holder {
height: auto;
max-height: 150px;
overflow-y: auto;
overflow-x: hidden;
margin: 7px 0;
&::-webkit-scrollbar {
border-inline-start: 5px solid #fff;
border-inline-end: 5px solid #fff;
width: 13px;
background: #fff;
&:hover {
background: #e8e8e8;
}
}
&::-webkit-scrollbar-thumb {
border-inline-start: 4px solid #fff;
border-inline-end: 4px solid #fff;
background: #bbb;
&:hover {
background: #787878;
}
}
}
ul {
li {
a {
display: block;
padding: 3px 7px;
font-size: 12px;
color: $sd-text;
text-decoration: none;
&:hover {
cursor: pointer;
color: $white;
background: #0083c4;
}
i {
margin-inline-end: 5px;
vertical-align: middle;
margin-block-start: -4px;
@include opacity(50);
}
}
}
}
}
}
// Searchbar input
// --------------------------------------------------
.searchbar {
border-radius: 3px!important;
height: 32px;
border: 1px solid var(--sd-colour-line--medium);
background: url(~images/search-icon.png) no-repeat 10px 8px var(--sd-colour-bg__searchbar);
//box-shadow: inset 0 2px 4px rgba(0,0,0,0.14);
padding:0 0 0 36px !important;
position: relative;
color: var(--color-text);
transition: all 0.2s ease;
&.searchbar-large {
height:40px !important;
font-size: 15px;
line-height: 26px;
background-position: 10px 12px;
}
&:hover {
border-color: var(--sd-colour-line--strong);
}
&:focus {
transition: box-shadow 0.2s ease-out;
border-color: var(--sd-colour-interactive--alpha-70);
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
}
}
.flat-searchbar {
display: flex;
align-items: stretch;
align-self: stretch;
display: flex;
flex-grow: 1;
transition: all ease 0.2s;
.search-handler {
flex-grow: 1;
min-width: 48px;
padding: 4px 10px 4px 14px;
background: none;
display: flex !important;
align-items: center;
white-space: nowrap;
border-inline-end: 1px solid var(--sd-colour-line--light) !important;
transition: all 0.3s ease;
gap: 4px;
input {
font-size: 14px;
border: 0 !important;
width: 100%;
padding: 0;
color: var(--color-text);
background-color: transparent;
transition: all 0.3s ease;
flex-grow: 1;
&:focus {
box-shadow: none;
}
&::placeholder {
color: var(--color-text-lighter);
font-weight: 300;
letter-spacing: 0.03rem;
}
}
.trigger-icon {
@include user-select(none);
width: 28px;
height: 28px;
display: block;
opacity: 0.5;
margin: 0;
flex-shrink: 0;
flex-grow: 0;
i {
padding: 7px 3px 4px 6px;
color: var(--color-icon-default);
}
}
&--left-border {
border-inline-end: 0 !important;
border-inline-start: 1px solid var(--sd-colour-line--light);
}
}
.separator-handler {
margin: 9px 0 0 5px;
border-inline-end: 2px dotted var(--sd-colour-line--medium);
height: 30px;
float: inline-start;
}
.search-close {
border: 0;
background: none;
display: inline-block;
height: 1.6rem;
width: 1.6rem;
align-self: center;
flex-grow: 0;
flex-shrink: 0;
margin: 0 1rem 0 0;
padding: 0;
opacity: 0.35;
transition: opacity 0.2s ease-out;
color: $sd-text;
opacity: 0;
&.visible {
opacity: 0.4;
&:hover {
opacity: 0.8;
}
&:active {
opacity: 1;
}
}
i {
display: block;
}
}
&.extended {
flex-grow: 1;
.search-handler {
box-shadow: none !important;
input {
flex-grow: 1;
flex-shrink: 1;
width: 100%;
font-size: 1.4rem;
padding: 0;
padding-inline-end: 0px;
color: inherit;
align-self: auto;
background-color: transparent;
border: 0;
box-shadow: none !important;
padding-inline-end: 1rem;
height: auto;
}
}
.separator-handler {
margin-inline-start: 14px;
}
.search-close {
display: inline-block;
}
&:focus-within {
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
background-color: var(--sd-colour-bg__searchbar);
}
.trigger-icon,
.trigger-icon:hover {
opacity: 0.5;
margin: 0;
pointer-events: none;
}
}
&:focus-within {
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
background-color: var(--sd-colour-bg__searchbar);
outline: none;
}
&:hover {
background-color: var(--sd-colour-bg__searchbar);
}
}
.search-start {
height: 2.8rem;
width: 2.8rem;
flex-grow: 0;
flex-shrink: 0;
align-self: center;
margin: 0 0.8rem 0 0;
padding: 0;
transition: all 0.2s ease-out;
background-color: var(--sd-colour-interactive--alpha-40);
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
display: none;
i {
transition: color 0.2s ease-out;
color: var(--sd-colour-interactive--alpha-80);
}
&.visible {
opacity: 1;
display: flex;
&:hover {
background-color: var(--sd-colour-interactive--alpha-80);
i {
color: $white;
}
}
&:active {
background-color: var(--sd-colour-interactive);
i {
color: $white;
}
}
}
&:hover {
background-color: var(--sd-colour-interactive--alpha-80);
i {
color: $white;
}
}
&:active {
background-color: var(--sd-colour-interactive);
i {
color: $white;
}
}
}
.monitoring-backlink{
.separator-handler {
margin-block-start: 0;
margin-inline-end: 10px;
}
}
.filter-type {
white-space: nowrap;
&__item {
display: inline-block;
vertical-align: middle;
margin: 3px 2px;
cursor: pointer;
i {
height: auto;
color: $grayLight;
padding: 2px 8px 1px 8px;
background: rgba(255,255,255,.5);
border: 1px solid rgba(215,215,215,.7);
@include border-radius(2px);
@include box-sizing(border-box);
}
a {
height: 21px;
font-size: 11px;
font-family: $baseFontFamily;
line-height: 21px;
text-decoration: none;
padding: 4px 10px;
border-radius: 2px;
border: 1px solid $grayLight;
box-sizing: border-box;
text-transform: uppercase;
background: #fff !important;
color: $grayDark;
opacity: 0.7;
&:hover {
color: $black;
opacity: 1;
}
&.filter-type__link--blue {
border-color: $sd-blue;
color: $sd-blue;
}
&.filter-type__link--dark-blue {
border-color: $sd-keyword;
color: $sd-keyword;
}
}
&:hover {
i {
background: rgba(255,255,255,.8);
border: 1px solid rgba(170,170,170,1);
color: $gray;
}
}
&--active {
i {
opacity: 1;
color: $grayLighter;
background: #505050;
border-color: #505050;
@include box-shadow(inset 0 1px 0px darken(#505050, 10%) !important);
}
a {
opacity: 1;
background: #505050 !important;
border-color: #373737 #505050 #505050 !important;
color: #fff !important;
@include box-shadow(inset 0 2px 0px darken(#505050, 10%) !important);
}
&:hover {
i {
border-color: rgba(80,80,80,.8);
background-color: rgba(80,80,80,.8);
color: $grayLighter;
}
a {
opacity: 0.8;
}
}
}
}
}
.filter-type--padded {
padding: 10px 0 10px 20px;
}
.result-type {
margin-inline-start: 10px
}
.dropdown__menu {
.filter-type {
padding: 0 10px;
}
// compare-versions dropdown
// -------------------------------------------------
&--compare-versions {
max-height: 400px;
min-width: 250px;
overflow-y: auto;
overflow-x: hidden;
li {
margin-block-end: 2px;
line-height: 14px !important;
.dropdown.open li .dropdown .dropdown__toggle:hover {
display: none;
}
button {
width: 300px;
padding-inline-end: 30px;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
border-radius: 0;
line-height: 14px !important;
box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.15);
i {
position: absolute;
inset-inline-end: -5px;
inset-block-start: 9px;
}
&.disabled, &.disabled:hover {
background: #f0f0f0;
i {
@include opacity(20);
}
}
.headline {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 11px;
font-weight: 500;
width: 240px;
display: inline-block;
}
.desk-details {
display: flex;
font-size: 10px;
margin: 4px 0;
span:first-of-type {
flex-grow: 1;
}
}
em {
font-size: 10px;
font-weight: 500;
color: #888;
float: inline-start;
padding-inline-end: 10px;
}
}
.msg {
padding: 0 20px;
}
}
}
.fieldset {
button {
text-align: center;
width: auto;
min-width: 50px;
clear: none;
margin-inline-end: 10px;
float: inline-end;
}
}
}
.online-users {
float: inline-start;
height: $nav-height;
padding-inline-start: 15px;
margin-inline-start: 5px;
> * {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 16px 0;
line-height: 13px;
}
}
// Timezone picker
// ---------------------------------------------
[sd-timezone] {
.timezone-label {
margin-block-end: 1rem;
}
.input-term input {
height: 3.2rem;
margin-block-end: 5px;
width: 100%;
transition: border linear 0.2s, box-shadow linear 0.2s, background-color linear 0.2s;
border: none;
border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
background-color: var(--color-input-bg);
border-block-end: 1px solid var(--color-input-border);
font-size: 1.4rem;
padding-inline-start: 1rem;
color: var(--color-text);
&:hover {
border-bottom-color: var(--color-input-border-hover);
background-color: var(--color-input-bg--hover);
}
&:focus {
box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
border-color: var(--sd-colour-interactive);
background-color: var(--sd-colour-interactive--alpha-20);
}
}
.item-list {
width: 100%;
color: var(--color-text);
}
.pills-list {
li {
padding: 0.7rem 1rem;
display: flex;
align-items: center;
font-size: 1.3rem;
.icon-remove-sign {
color: inherit;
}
#timezone {
padding-inline-end: 2.5rem;
flex-grow: 1;
}
}
}
}
// Datepicker - wrapper for angular ui datepicker
// ---------------------------------------------
.datepicker-input, .timepicker-input {
position: relative;
width: auto;
min-width: 130px;
color: var(--color-text);
input {
width: 100%;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
padding-inline-end: 3.2rem;
padding-inline-start: 1.2rem;
min-height: 3.2rem;
border: none;
border-block-end: 1px solid var(--color-input-border);
border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
background-color: var(--color-input-bg);
font-size: 1.3rem;
color: var(--color-text);
&:hover {
border-color: var(--color-input-border-hover);
background-color: var(--color-input-bg--hover);
}
&:focus {
box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
border-color: var(--sd-colour-interactive);
background-color: var(--sd-colour-interactive--alpha-20);
}
&.ng-invalid {
color: #d10000;
border-color: #b61818 !important;
box-shadow: 0 1px 0 0 #b61818 !important;
}
}
.icn-btn {
position: absolute;
inset-inline-end: 2px; inset-block-start: 0;
}
}
// .datepicker-input--dark, .timepicker-input--dark {
// input {
// transition: border linear 0.2s, box-shadow linear 0.2s, background-color linear 0.2s;
// background-color: rgba(255, 255, 255, 0.05) !important;
// border: none;
// border-block-end: 1px solid rgba(255, 255, 255, 0.2);
// font-size: 1.3rem;
// line-height: 1.8rem;
// color: inherit;
// min-height: 32px;
// padding-inline-start: $sd-base-increment * 1.5 !important;
// &:hover {
// border-bottom-color: rgba(255, 255, 255, 0.4);
// background-color: rgba(255, 255, 255, 0.1) !important;
// }
// &:focus {
// box-shadow: 0 1px 0 0 $sd-blue;
// border-color: $sd-blue;
// }
// }
// .icn-btn {
// background: transparent;
// inset-block-start: 50%;
// margin-block-start: -14px;
// }
// .name {
// background-color: #4f4f4f;
// height: 24px;
// font-size: 12px;
// color: $white;
// }
// ul > li {
// width: 90%;
// }
// }
.datepicker-wrapper {
position: absolute;
inset-block-start: 0; inset-inline-start: 0;
z-index: 2000;
background-color: var(--color-dropdown-menu-Bg);
box-shadow: 0 2px 10px hsla(0, 0%, 0%, 0.4), 0 3px 1px -2px hsla(0, 0%, 0%, 0.1);
padding: 12px;
border-radius: var(--b-radius--small);
width: 280px;
.btn {
&:hover {
box-shadow: none;
}
}
.btn--mini {
padding: 4px 6px;
font-size: 11px;
line-height: 11px!important;
height: auto;
}
table {
width: 100%;
border-collapse: collapse;
border: 0;
td, th {
padding: 1px;
border: 0;
}
}
.datepicker-additional {
width: 100%;
display: flex;
align-items: center;
gap: var(--gap--x-small);
margin-block-end: 8px;
.btn {
min-height: 24px;
flex-grow: 1;
}
}
.datepicker-core {
margin-block-start: 4px;
margin-block-end: 12px;
border-block-end: 1px solid var(--sd-colour-line--light) !important;
table {
margin: 8px 0 12px;
width: 100%;
thead {
margin-block-end: 8px;
tr {
th {
padding-block-end: 8px;
.btn {
background: none;
padding: 0;
display: flex;
align-items: center;
}
}
&:last-child {
th {
small {
@include text-semibold();
}
}
}
&:first-child {
th {
.btn strong {
font-weight: normal;
font-size: 14px;
}
.btn i {
display: inline-block;
width: 14px;
height: 14px;
background-repeat: no-repeat;
}
&:first-child .btn i {
margin-inline-start: 3px;
background-position: -189px -165px;
}
&:last-child .btn i {
margin-inline-end: 3px;
background-position: -213px -165px;
}
}
}
}
}
tbody {
tr:first-child td {
padding-block-start: 5px;
}
td {
padding: 0 2px;
.btn {
width: 100% !important;
min-width: 28px !important;
padding: 0;
background-color: transparent;
color: var(--color-text);
box-shadow: none;
border-radius: var(--b-radius--small);
.text-muted {
color: var(--color-text-lighter);
}
&:hover {
box-shadow: 0 0 0 1px var(--sd-colour-interactive) !important;
background: transparent;
}
&.active {
color: white !important;
background-color: var(--sd-colour-interactive);
}
&.btn--primary, &.btn--primary.active {
//selected date
color: white;
background: ver(--sd-colour-interactive);
.text-muted {
color: white;
}
}
}
}
}
}
}
}
.timepicker-popup {
position: absolute;
inset-block-start: 0; inset-inline-start: 0;
z-index: 2000;
background-color: var(--color-dropdown-menu-Bg);
box-shadow: 0 2px 10px hsla(0, 0%, 0%, 0.4), 0 3px 1px -2px hsla(0, 0%, 0%, 0.1);
padding: 12px;
border-radius: var(--b-radius--small);
width: 200px;
min-height: 310px;
.timepicker-additional {
width: 100%;
display: flex;
align-items: center;
gap: var(--gap--x-small);
margin-block-end: 18px;
.btn {
height: 24px;
flex-grow: 1;
font-size: 11px;
letter-spacing: 0;
padding-inline: 4px;
box-shadow: none;
&:hover {
box-shadow: none;
}
}
}
.timepicker-core {
.select-area {
margin-block-start: 15px;
border-block-start: 1px solid var(--sd-colour-line--medium);
.header {
margin-block-start: -10px;
float: inline-start;
background-color: var(--color-dropdown-menu-Bg);
text-transform: uppercase;
color: var(--color-text-light);
font-size: 11px;
padding-inline-end: 10px;
}
ul {
padding-block-start: 15px;
@include clearfix();
> li {
float: inline-start;
width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
margin: 0 1px 2px 0;
color: var(--color-text);
background-color: transparent;
box-shadow: none;
@include user-select(none);
border-radius: var(--b-radius--small);
&:hover {
box-shadow: 0 0 0 1px var(--sd-colour-interactive) !important;
background: transparent;
}
&.active {
color: white !important;
background-color: var(--sd-colour-interactive);
}
}
}
}
.timepicker-popup__foter {
padding: 8px 0 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--gap--small);
}
}
}
// Timezone picker
// ---------------------------------------------
.pills-list.line-input {
> li {
width: 100%;
border-radius: 0 !important;
border: 0 !important;
border-block-end: 1px solid var(--sd-colour-line--light) !important;
background-color: transparent;
padding: 0;
height: 24px;
box-shadow: none;
.actions {
inset-block-start: -9px;
}
&:hover {
border-color: var(--sd-colour-line--medium) !important;
background-color: transparent !important;
box-shadow: none;
}
&:focus {
box-shadow: 0 1px 0 0 var(--sd-colour-interactive) !important;
border-color: var(--sd-colour-interactive) !important;
background-color: transparent !important;
}
}
}
/*
----------------------------------------------------------------------
OTHER CUSTOM ELEMENTS
----------------------------------------------------------------------
*/
// Back screen button
// ---------------------------------------------
.backlink, a.backlink {
text-decoration: none !important;
color: var(--color-text);
border:0;
transition: all 0.2s ease-in-out;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
display: inline-flex;
padding: 0;
margin: 0;
cursor: pointer;
&:before {
font-family: 'sd_icons';
font-weight: normal;
font-style: normal;
content: "\e677";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
flex-grow: 0;
margin: -1px 8px 0 0;
text-decoration: none !important;
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
&.white {
color: $white;
}
&:hover {
color: var(--sd-colour-interactive);
text-decoration: none !important;
&:before {
text-decoration: none !important;
margin: -1px 10px 0 -2px;
opacity: 1;
}
}
}
.stage-header__name {
a {
transition: all 0.2s ease-in-out;
}
}
.widget-content {
.stage-header__name {
a {
text-decoration: none !important;
}
}
}
// Activity log
// ---------------------------------------------
.activity-log { //activivty log styles
margin-block-start: 10px;
ul {
margin:0;
padding: 0;
list-style-type: none;
li {
&.activity {
.activity-content {
margin-block-start: -3px;
padding-inline-end: 20px;
color: $sd-text-light;
b {
@include text-semibold();
}
}
.activity-date {
font-size: 11px;
color: $sd-text-lighter;
margin-block-start: -5px;
}
&.with-date {
margin-block-start: 35px;
.date {
border-block-start:1px solid var(--sd-colour-line--light);
inset-block-start: -17px;
position: absolute;
inset-inline-end: 0;
inset-inline-start: 0;
span {
font-size: 12px;
color: $sd-text-lighter;
margin-block-start: -10px;
display: block;
float: inline-start;
//background: $background-main;
padding-inline-end: 5px;
}
}
}
&:hover {
cursor: default;
}
}
}
}
}
.activity-load-more {
width: 100%;
font-size: 12px;
margin: 20px 0;
}
// Notificaton list
// ---------------------------------------------
.notification-list {
margin: 0 $sd-base-increment * 2;
margin-block-end: 20px;
list-style-type: none;
li {
background: var(--sd-item__main-Bg);
padding: 12px 8px;
border-radius: var(--b-radius--medium);
width: 100%;
min-height: 48px;
margin: $sd-base-increment * 2 0;
box-shadow: 0 0 0 1px var(--sd-colour--shadow-line), 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 3px hsla(0, 0%, 0%, 0.16);
border: none;
.content {
padding-inline-start: 40px;
.text {
margin:0;
font-size: 12px;
overflow: hidden;
color: var(--color-text);
}
.date , .date time, time {
font-size: 11px;
color: var(--color-text-light);
margin-block-start: -3px;
display: block;
}
a {
cursor: pointer;
color: var(--sd-colour-interactive);
&:hover {
text-decoration: none;
color: var(--sd-colour-interactive--hover);
}
}
}
&.unread {
border-color: var(--sd-colour-interactive--alpha-50);
}
&.important {
border: 1px solid hsla(0, 99%, 33%, 0.8) !important;
box-shadow: inset 0px 0px 1px 1px hsla(0, 25%, 12%, 0.3) !important;
}
.info {
color: var(--color-text-light);
}
}
}
.notification-pane {
::-webkit-scrollbar {
width: 8px;
height: 8px;
margin: -1px 0;
position: fixed;
inset-inline-end: 10px;
}
::-webkit-scrollbar:hover {
background-color: var(--sd-colour__webkit-scrollbar--hover);
cursor: pointer;
}
::-webkit-scrollbar-thumb {
background: var(--sd-colour__webkit-scrollbar-thumb);
}
::-webkit-scrollbar-thumb:hover {
background: var(--sd-colour__webkit-scrollbar-thumb--hover);
cursor: pointer;
}
}
// Hard error
// ---------------------------------------------
.hard-error {
position: fixed;
inset-block-start: 0;
inset-inline-end: 200px;
z-index: 9999;
width: auto;
max-width: 400px;
.alert {
@include border-radius(0);
border: 0;
@include box-sizing(border-box);
height: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 40px;
padding: 0 15px;
}
.alert-error {
background-color: #612525;
color: #cc7c7b;
text-shadow: none;
}
&:hover {
.alert {
height: auto;
line-height: 20px;
padding: 10px 15px;
overflow: visible;
white-space: pre-wrap;
}
}
}
// Pagination
// ---------------------------------------------
.sd-pagination {
padding: 7px 20px;
.btn {
i { margin-inline-end: 0; }
}
.page-info {
// line-height: 34px;
margin-inline-end: 20px;
display: inline-block;
// vertical-align: middle;
input {
display: inline-block;
width: 30px;
text-align: center;
margin-block-start: -1px;
padding: 6px 3px !important;
@include border-radius(5px);
margin: 0 5px;
@include box-shadow(inset 0 5px 5px -5px #acacac);
}
}
.btn-group, .btn-group > .btn {
display: inline-block;
vertical-align: middle;
float: none;
}
.btn-group > .btn + .btn {
margin-inline-start: 0px;
}
}
// Assignment menu
// ---------------------------------------------
.assignment-menu {
.assignment-box {
width: 270px;
h5 {
border:0;
}
.assignment-content {
.assignment-result-list {
margin-block-start: 10px;
height: 140px;
overflow: auto;
ul {
list-style-type: none;
margin: 0; padding: 0;
li {
height: 32px;
margin-block-end: 3px;
span {
font-size: 13px;
color: #4f4f4f;
line-height: 24px;
margin-inline-start: 10px;
}
}
}
}
}
}
}
// Sortbar
// --------------------------------------------------
.sortbar {
display: flex;
align-items: center;
white-space: nowrap;
margin: 0 8px;
padding: 0 8px;
gap: 8px;
.lab {
margin-inline-end: 8px;
}
.dropdown__toggle {
color: $sd-text;
min-width: auto !important;
}
.direction {
background: none;
opacity: 0.7;
}
}
// Selection list
// ---------------------------------------------
.selectionlist {
list-style-type: none;
padding: 2px;
width: 100%;
@include box-sizing(border-box);
margin: 0;
overflow: auto;
li {
line-height: 16px;
height: 16px;
padding: 4px;
margin-block-end: 3px;
@include border-radius(3px);
background: #e8e8e8;
}
.sf-toggle-custom {
margin-block-start: -1px;
float: inline-end;
}
}
// Plain list
// ---------------------------------------------
.plain-list {
margin: 0;
padding: 0;
list-style-type: none;
&.plain-border-top {
border-block-start:1px solid #e5e5e5;
}
> li {
border-block-end:1px solid #e5e5e5;
height: 41px;
line-height: 40px;
cursor: pointer;
position: relative;
padding: 0 5px;
@include border-box();
&:hover {
background: $sd-hover;
}
.btn--mini {
margin-block-start: 10px;
}
}
}
.plain-small {
> li {
height: 31px;
line-height: 30px;
}
}
.users-list {
> li {
.name {
font-size: 13px;
color: var(--sd-colour-interactive);
}
}
}
.sd-mentions-item {
> div {
display: flex;
align-items: center;
padding: 4px;
min-height: 38px;
border-radius: var(--b-radius--small);
* + * {
margin-inline-start: 6px;
}
}
&.active {
> div {
background-color: var(--sd-colour-interactive--alpha-20);
cursor: pointer;
}
}
}
.users-list-embed {
position:relative;
> li {
padding: 6px 8px;
clear: both;
border-radius: 3px;
margin-block-end: 2px;
&:hover, &.active {
cursor: pointer;
color: var(--color-text);
}
&:hover, :focus {
background: var(--sd-colour-interactive--alpha-20);
}
&:active {
background: var(--sd-colour-interactive--alpha-30);
}
&.active {
background: var(--sd-colour-interactive--alpha-30);
}
&.inactive {
color: var(--color-text-light);
opacity: 0.75;
}
}
}
// Card list
// ---------------------------------------------
.mentio-menu {
padding: 8px;
max-height: 126px;
z-index: 9999 !important;
overflow: auto;
background-color: var(--color-dropdown-menu-Bg) !important;
border-radius: var(--b-radius--small);
box-shadow: var(--sd-shadow__dropdown);
width: 240px;
inset-block-end: 5px;
ul {
li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
// Card list
// ---------------------------------------------
.card-list > li , .card {
display: block;
padding: 10px;
background: var(--sd-item__main-Bg);
border: none;
box-shadow: 0 0 0 1px var(--sd-shadow-outline--2), 0px 1px 2px 0 rgba(0,0,0,0.12);
border-radius: var(--b-radius--medium);
margin-block-end: 7px;
position: relative;
&:not([disabled]):hover {
cursor: pointer;
box-shadow: 0 0 0 1px var(--sd-shadow-outline--2), 0px 1px 3px 0 rgba(0,0,0,0.35);
.action {
display: block !important;
}
}
&.selected {
background-color: var(--sd-item__main-Bg--hover);
box-shadow: 0 0 0 1px var(--sd-shadow-outline--2), 0px 1px 3px 0 rgba(0,0,0,0.35);
&:hover {
box-shadow: 0 0 0 1px var(--sd-shadow-outline--2), 0px 1px 3px 0 rgba(0,0,0,0.45);
}
}
&[disabled] {
cursor: default !important;
opacity: 0.75
}
.action {
display: none;
position: absolute;
inset-inline-end: 0; inset-block-start: 0; inset-block-end: 0;
min-width: 200px;
ul {
height: 100%;
text-align: end;
}
.item-field {
height: 100%;
span {
display: none;
}
a {
padding: 0 23px;
line-height: 62px;
display: block;
}
}
}
}
.active {
.card {
background-color: var(--sd-item__main-Bg--hover);
box-shadow: 0 0 0 1px var(--sd-shadow-outline--2), 0px 1px 3px 0 rgba(0,0,0,0.35);
&:hover {
box-shadow: 0 0 0 1px var(--sd-shadow-outline--2), 0px 1px 3px 0 rgba(0,0,0,0.45);
}
}
}
// Pils list
// ---------------------------------------------
.pills-list {
max-width: 650px;
color: var(--color-text);
> li {
@include user-select(none);
background-color: var(--sd-item__main-Bg);
margin-block-end: 6px;
margin-inline-end: 2px;
border-radius: 2px;
padding: 10px 16px;
min-height: 18px;
color: inherit;
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.1);
transition: all ease-in-out 0.2s;
&:hover {
background-color: var(--sd-item__main-Bg--hover);
}
&.active {
background: var(--sd-colour-interactive--active);
box-shadow: inset 0 2px 0 hsla(0, 0%, 0%, 0.1);
&:not(.editable) {
color: $white;
}
}
&.inactive {
opacity: 0.5;
}
&.empty-info {
background: transparent;
border: 1px dotted var(--sd-colour-line--medium);
opacity: 0.75;
box-shadow: none !important;
}
.dropdown {
margin-block-start: -3px;
}
.actions {
display: none;
position: absolute;
inset-block-start: 0px;
inset-inline-end: 4px;
button {
transition: opacity ease-in-out 0.2s;
border: 0;
height: 30px;
width: 30px;
margin: 3px;
background: none;
text-align: center;
display: block;
float: inline-start;
line-height: 0;
opacity: 0.6;
&:hover {
cursor: pointer;
opacity: 1;
}
i {
margin-block-start: -2px;
color: var(--color-text-light);
}
}
}
h6 {
text-transform: none;
color: inherit;
font-size: 14px;
font-weight: 300;
float: inline-start;
max-width: 99%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.label-group {
display: inline-block;
&.label-group--right {
float: inline-end;
}
}
.label {
font-size: 9px;
font-weight: 500;
padding: 2px 5px;
line-height: 12px;
margin-inline-start: 5px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 400;
}
&:hover {
.actions {
display: block !important;
}
h6 {
max-width: 550px;
}
}
h5 {
display: inline-block;
}
}
&.pills-editable {
li {
&.editable {
padding: 0;
height: auto;
background: transparent;
input {
height: 30px;
line-height: 30px;
border-radius: 3px;
}
}
}
}
}
.pills-list:not(.pills-list--draggable) > li {
transition: all ease-in-out 0.2s;
}
.pill-small {
width: 200px;
margin: 4px;
}
// Activiites
// ---------------------------------------------
.item-field {
//border-inline-start: 1px solid #d8d8d8;
display: inline-block;
span {
display: none;
}
button {
border: 0;
padding: 0;
background: none;
vertical-align: text-top;
}
&:hover {
background: hsla(0, 0%, 0%, 0.1);
//border-color: #e0e0e0;
}
&.disabled {
cursor: default;
i {
@include opacity(30);
}
&:hover {
background: #e8e8e8;
}
}
}
.dropdown .item-field {
display: block;
border-inline-start: 0;
span {
display: inline-block;
}
}
.dropdown .item-field {
&:hover {
background: none;
}
}
// OR label
// ---------------------------------------------
.or-label {
position: relative;
text-align: center;
font-style: italic;
color: var(--color-text-light);
&:before {
content: "_________";
position: absolute;
inset-block-start: -6px;
color: var(--sd-colour-line--medium);
inset-inline-start: 50%;
margin-inline-start: -75px;
}
&:after {
content: "_________";
position: absolute;
inset-block-start: -6px;
color: var(--sd-colour-line--medium);;
inset-inline-start: 50%;
margin-inline-start: 15px;
}
}
// List group
// ---------------------------------------------
.list-group {
.list-group-item {
padding: 0 8px 0 16px;
border: 1px solid var(--sd-colour-line--light);
border-width: 0 1px 1px 1px;
background-color: var(--sd-item__main-Bg);
display: flex;
align-items: center;
min-height: 4.2rem;
&:first-child {
border-width: 1px;
border-radius: var(--b-radius--medium) var(--b-radius--medium) 0 0;
}
&:last-child {
border-radius: 0 0 var(--b-radius--medium) var(--b-radius--medium);
}
&:hover {
background-color: var(--sd-item__main-Bg--hover);
cursor: pointer;
}
a {
text-decoration: none;
color: var(--color-text);
}
&--no-click {
&:hover {
cursor: default;
background-color: var(--sd-item__main-Bg);
}
}
}
}
// Scroll shadow
// ---------------------------------------------
.shadow-list-holder {
overflow-y: auto;
width: 100%;
max-height: 100%;
}
.scroll-shadow {
height: 0;
.inner {
background: -webkit-gradient(linear,left top,left bottom,from(hsla(0, 0%, 0%, 0.1)),to(transparent));
height: 4px;
position: relative;
z-index: 503;
transition: linear .1s all;
opacity: 0;
}
&.shadow {
.inner {
opacity: 1;
}
}
}
// Toggle box
// ---------------------------------------------
.toggle-box__button {
transition: color ease-in-out 0.2s;
color: $grayLight;
cursor: pointer;
i {
color: inherit;
margin-inline-end: 5px;
vertical-align: text-bottom;
}
&:hover {
text-decoration: none;
color: $white;
}
}
// Fix for large tag labels inside toggle-box
.toggle-box {
.tag-label {
white-space: nowrap;
overflow: hidden;
}
}
// Animations
// ---------------------------------------------
.fade {
@include transition(opacity .15s linear);
opacity: 0;
&.in {
opacity: 1;
}
}
// Close icon
// ---------------------------------------------
.close {
float: inline-end;
line-height: $baseLineHeight;
@include opacity(20);
&:hover {
text-decoration: none;
@include opacity(40);
cursor: pointer;
}
i {
vertical-align: middle;
}
}
// DEFAULT TOGGLE BUTTON
// ---------------------------------------------
// DRAG & DROP
// ---------------------------------------------
.draggable-list__item {
background-color: var(--sd-item__main-Bg);
padding: 18px 14px 19px 25px;
margin-block-end: 10px;
cursor: move;
box-shadow : 0 1px 4px 0 hsla(0, 0%, 0%, 0.2);
position: relative;
&.placeholder {
background: none;
box-shadow: none;
border: 2px dashed var(--sd-colour-line--medium);
}
&:after {
content: "";
width: 10px;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: 2px;
background: transparent url(~images/draggable-bg.png) repeat-y left 3px top 3px;
opacity: 0.2;
position: absolute;
display: block;
}
&:hover {
box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.4);
&:after {
opacity: 0.8;
}
}
&--small {
padding: 10px 14px 10px 25px;
}
&--no-padding {
padding: 0 0 0 8px;
&:after {
width: 6px;
inset-inline-start: 2px;
background: transparent url(~images/draggable-bg.png) repeat-y left 0px top 3px;
}
}
}
.draggable-list.serial-decimal {
list-style-type: decimal !important;
padding-block-start: 0px;
margin-inline-start: 5px;
> li {
word-spacing: 2px;
line-height: 0px;
}
.sort-item {
&.active {
background-color: var(--sd-item__main-Bg--alternate);
}
}
}
.drag-and-drop--handle {
width: 6px;
height: 20px;
background: transparent url(~images/draggable-bg.png) repeat-y left 3px top 3px;
}
// HANDLE FOR SPLITTER
// ----------------------------------------------
.ui-resizable-e {
cursor: col-resize !important;
}
// SPINNER
// ----------------------------------------------
.spinner-big {
background-image: url("~images/loading-large.gif");
background-repeat: no-repeat;
background-position: center;
display: inline-block;
width: 100%;
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
}
.spinner-alt {
background-image: url("~images/loading-small.gif");
background-repeat: no-repeat;
background-position: center;
display: inline-block;
width: 100%;
height: 32px;
line-height: 32px;
vertical-align: middle;
text-align: center;
}
// SD-CHECK Override - should be removed once CSS is cleared
// --------------------------------
.sd-check__wrapper .sd-checkbox+label {
font-size: 13px;
font-weight: 400;
color: inherit;
height: auto;
text-transform: none;
&.label--active {
color: var(--sd-colour-interactive);
}
}
.sd-toggle+label {
font-size: 13px;
font-weight: 400;
color: var(--color-text);
height: auto;
text-transform: none;
}
// Definition list
.definition-list {
.definition-list__term {
font-size: 1.6rem;
margin-block-end: 0.6rem;
font-weight: 400;
}
.definition-list__item {
padding: 0.3rem 0;
margin-inline-start: 0;
font-size: 1.4rem;
font-weight: 300;
}
.definition-list__item + .definition-list__term {
margin-block-start: 2rem;
}
}
.nav-button-bar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 2rem 0;
.btn {
flex-grow: 0;
flex-shrink: 0;
}
}
.sd-line-input__message--with-char-count {
padding-inline-end: 10rem;
}
.sd-list-item {
&.inactive {
//background-color: transparent;
color: var(--color-text-light);
opacity: 0.5;
}
}
// For items appended to body
// content-profile settings
body > .sd-list-item {
z-index: 1060;
}
.sd-toggle + label {
letter-spacing: 0;
color: $sd-text;
}
.sd-list-item__text-label {
time {
padding: 0;
font-style: normal;
}
}
[sd-meta-terms] {
min-height: 2.8rem;
}
.line-input--boxed {
.input-term {
input[type="text"] {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
border-block-end: 1px solid var(--color-input-border);
font-size: 1.4rem;
border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
background-color: var(--color-input-bg);
padding: 0 1rem;
height: 3.2rem;
transition: border linear 0.2s, box-shadow linear 0.2s, background-color linear 0.2s;
&:hover {
border-color: var(--color-input-border-hover) !important;
background-color: var(--color-input-bg--hover) !important;
}
&:focus {
box-shadow: 0 1px 0 0 var(--sd-colour-interactive) !important;
border-color: var(--sd-colour-interactive) !important;
background-color: var(--sd-colour-interactive--alpha-20) !important;
}
}
}
.terms-list {
width: 100%;
margin-block-start: 0.8rem;
}
}
sd-tag-input + .sd-line-input__message {
margin-block-start: -2rem;
}
sd-multi-image-edit {
height: 100vh;
display: flex;
flex-direction: column;
}
.sd-wrap-helper {
display: contents !important;
}
.subnav {
z-index: 5;
}
.subnav + .subnav {
z-index: 4;
}
.sd-margin-all--0 {
margin: 0 !important;
}
.locked-info {
display: flex;
align-items: center;
background: var(--sd-colour--locked-info);
color: $white;
padding: 0.4rem;
padding-inline-end: 0;
height: 3.2rem;
border-radius: 1.6rem;
font-size: 1.2rem;
letter-spacing: 0.04em;
}
.locked-info__label {
white-space: nowrap;
opacity: 0.8;
font-weight: 300;
margin-inline-end: 0.4rem;
}
.locked-info__name {
font-weight: 400;
margin-inline-end: 1.2rem;
}
.locked-info__button {
display: flex;
align-items: center;
height: 2.4rem;
border-radius: 1.2rem;
padding: 0 1.4rem;
background-color: transparent;
transition: background-color 0.2s ease-out, color 0.1s ease-out;
color: $white;
font-size: 1.1rem;
line-height: 100%;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0 0.4rem 0 0;
&:hover {
background-color: rgba(0,0,0,0.16);
}
}
.locked-info__avatar {
margin-inline-end: 4px;
margin-inline-start: -2px;
transform: scale(0.9);
}
.sd-dropdown-item {
display: block;
width: 100%;
white-space: nowrap;
color: var(--color-text);
padding: 0.6rem 1.6rem;
margin-block-end: 0.2rem;
font-size: 1.3rem;
line-height: 140%;
text-decoration: none;
text-align: start;
&:hover {
background-color: var(--sd-colour-interactive--alpha-20) !important;
}
}
.sd-alert {
[class^="icon-"],
[class*=" icon-"] {
color: inherit;
}
}
.sd-content-box {
border-radius: 4px;
&--light {
background-color: var(--sd-item__main-Bg);
}
&--emphasise {
background-color: var(--sd-item__main-Bg);
border: 1px solid var(--sd-colour-interactive--alpha-50);
}
}
.sd-position--relative {
position: relative !important;
}
.sd-position--absolute {
position: absolute !important;
}
.sd-empty {
display: contents !important;
}
.a11y-only {
position: absolute;
inset-block-start:0;
z-index: -1;
pointer-events: none;
opacity: 0;
height: 1px;
overflow: hidden;
}
.panel__heading {
padding-inline-start: 1.6rem;
padding-inline-end: 1.6rem;
margin: 0;
font-size: 1.5rem;
color: inherit;
opacity: 0.8;
font-weight: 300;
letter-spacing: 0.02em;
line-height: 48px;
}
.main-section--pinned-tabs {
.authoring-header,
.main-article {
margin-inline-end: 325px;
}
.authoring-sticky {
margin-inline-end: 333px;
}
.pinned-tab__wrapper {
width: 330px;
box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1);
}
}
.pinned-tab__wrapper {
background-color: var(--sd-colour-panel-bg--100);
width: 0;
overflow: hidden;
position: absolute;
inset-inline-end: 48px;
inset-block-start:0;
inset-block-end: 32px;
z-index: 1;
}
.pinned-tab__wrapper {
overflow: hidden;
.tabcontent {
padding: 0;
position: absolute;
inset-block-end: 0;
inset-block-start: 0;
inset-inline-start: 1px;
inset-inline-end: 1px;
overflow: hidden;
}
.sd-widget {
width: auto;
height: 100%;
position: relative;
border: 0;
}
.sd-widget .widget-content {
margin-block-start: 0;
overflow: auto;
inset-block-end: 0;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
}
.sd-widget .widget-line {
display: none;
}
.sd-widget .widget-content {
background-color: var(--sd-colour-panel-bg--100);
margin-block-start: 0;
overflow: auto;
inset-block-end: 0;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
}
.sd-widget .widget-content__main {
grid-row: 2/3;
grid-column: 1/2;
overflow-x: hidden;
overflow-y: auto;
}
.sd-widget .widget-content__footer {
grid-row: 3/4;
grid-column: 1/2;
position: relative;
}
.sd-widget .widget-header {
height: 48px;
box-sizing: border-box;
background-color: var(--sd-colour-panel-bg--100);
}
.sd-widget .widget-header .widget-title {
line-height: 1;
font-size: 1.4rem;
padding: 0 1.2rem;
}
.sd-widget.related-item .existing-items {
inset-block-start: -35px;
}
.sd-widget.ingest .preview,
.sd-widget.archive .preview,
.sd-widget.related-item .preview,
.sd-widget.aggregate .preview,
.sd-widget.package-manager .preview,
.sd-widget.packages .preview,
.sd-widget.user-activity .preview {
inset-block-start: 0;
}
}
.workqueue .main-section--pinned-tabs .widget-wrapper.active-right .tabpane.right-tabpane {
display: none !important;
}
.pinned {
.sd-sidetab-menu__btn {
background: rgba(0, 0, 0, 0.12);
pointer-events: none;
[class^="big-icon-"],
[class*=" big-icon-"] {
color: rgba(255, 255, 255, 0.4) !important;
}
}
}
.sd-line-input input.sd-line-input__input,
.sd-line-input textarea.sd-line-input__input {
display: block !important;
}
// Transition for draggable lists
.modal__body .sd-list-item {
transition: transform .1s linear !important;
}
/// UI FRAMEWORK REDUNDANT OVERRIDES
/// needed for testing purposes
.dropdown__caret {
border-top-color: $sd-text !important;
}
.dropdown__menu-divider {
background-color: var(--sd-colour-line--light) !important;
}
.dropdown__menu {
background-color: var(--color-dropdown-menu-Bg) !important;
color: $sd-text !important;
li, .dropdown__menu-item {
a:not(.btn), button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
color: $sd-text !important;
background-color: transparent !important;
> i[class^="icon-"], i[class*=" icon-"], i[class^="filetype-icon-"] {
color: var(--color-text-light) !important;
}
> i[class^="icon-"] {
color: var(--color-icon-default) !important;
}
// &.disabled, &[disabled] {
// opacity: .5 ;
// }
}
a:not(.btn), button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
&:hover, &:focus {
background-color: var(--sd-colour-interactive--alpha-20) !important;
}
&:active {
background-color: var(--sd-colour-interactive--alpha-30) !important;
}
&.disabled:hover, &[disabled]:hover {
background-color: none !important;
}
}
.preferred-desk {
background-color: var(--sd-colour-interactive--lighten-30) !important;
}
}
.dropdown__menu-header {
border-block-end: 1px solid var(--color-border-line--light) !important;
}
.dropdown__menu-footer {
border-block-start: 1px solid var(--color-border-line--light) !important;
}
}
.custom-dropdown__menu {
max-height: 400px;
background: var(--color-dropdown-menu-Bg);
box-shadow: var(--sd-shadow__dropdown);
border-radius: var(--b-radius--small);
text-align: start;
}
.sd-toggle + label {
letter-spacing: 0;
color: var(--color-text);
display: inline-block;
margin: 0;
margin-inline-start: 8px;
}
.dropdown.navbtn {
display: flex;
}
.sd-list-item {
flex-shrink: 0;
}
.toggle-box {
margin-block-end: $sd-base-increment * 2;
&.toggle-box--no-margin {
margin-block-end: 0;
}
}
.dropdown__menu-footer {
&.dropdown__menu-footer--align-right{
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--gap--small);
}
}
.modal.modal--tabs .modal__body-footer {
display: flex;
}
.modal--fullscreen {
.modal__header {
border-radius: 0 !important;
}
}
.sd-flex--align-self-stretch {
align-self: stretch !important;
}
.subnav {
[sd-searchbar] {
display: contents;
}
}
.publish-queue {
.flat-searchbar.extended {
max-width: 380px;
}
}
// Logical Properties & Values for margins and paddings
// Margin
.sd-margin-start {
&--0-5 {
margin-inline-start: $sd-base-increment / 2;
}
&--1 {
margin-inline-start: $sd-base-increment * 1;
}
&--1-5 {
margin-inline-start: $sd-base-increment * 1.5;
}
&--2 {
margin-inline-start: $sd-base-increment * 2;
}
&--3 {
margin-inline-start: $sd-base-increment * 3;
}
&--4 {
margin-inline-start: $sd-base-increment * 4;
}
&--5 {
margin-inline-start: $sd-base-increment * 5;
}
&--auto {
margin-inline-start: auto;
}
}
.sd-margin-end {
&--0-5 {
margin-inline-end: $sd-base-increment / 2;
}
&--1 {
margin-inline-end: $sd-base-increment * 1;
}
&--1-5 {
margin-inline-end: $sd-base-increment * 1.5;
}
&--2 {
margin-inline-end: $sd-base-increment * 2;
}
&--3 {
margin-inline-end: $sd-base-increment * 3;
}
&--4 {
margin-inline-end: $sd-base-increment * 4;
}
&--5 {
margin-inline-end: $sd-base-increment * 5;
}
&--auto {
margin-inline-end: auto;
}
}
// Padding
.sd-padding-start {
&--0-5 {
padding-inline-start: $sd-base-increment / 2;
}
&--1 {
padding-inline-start: $sd-base-increment * 1;
}
&--1-5 {
padding-inline-start: $sd-base-increment * 1.5;
}
&--2 {
padding-inline-start: $sd-base-increment * 2;
}
&--3 {
padding-inline-start: $sd-base-increment * 3;
}
&--4 {
padding-inline-start: $sd-base-increment * 4;
}
&--5 {
padding-inline-start: $sd-base-increment * 5;
}
}
.sd-padding-end {
&--0-5 {
padding-inline-end: $sd-base-increment / 2;
}
&--1 {
padding-inline-end: $sd-base-increment * 1;
}
&--1-5 {
padding-inline-end: $sd-base-increment * 1.5;
}
&--2 {
padding-inline-end: $sd-base-increment * 2;
}
&--3 {
padding-inline-end: $sd-base-increment * 3;
}
&--4 {
padding-inline-end: $sd-base-increment * 4;
}
&--5 {
padding-inline-end: $sd-base-increment * 5;
}
}
.sd-flex--nowrap {
flex-wrap: nowrap !important;
}