superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/layout/_general.scss

@@ -0,0 +1,92 @@
+@use "../variables/dimensions";
+
+// LAYOUT : General : layout/general.scss
+
+.button-stack {
+	height: dimensions.$subnav-height !important;
+	position: relative;
+	margin: 0 20px 0 0;
+	float: inline-start;
+
+	>.btn {
+		margin-inline-start: 20px;
+		margin-block-start: 10px;
+	}
+}
+
+.button-stack.right-stack,
+.button-stack--right {
+	float: inline-end;
+	margin: 0 0 0 5px;
+
+	.navbtn {
+		border-inline-start: 1px solid var(--sd-colour-line--x-light) !important;
+		border-inline-end: 0 !important;
+	}
+
+	>.btn {
+		margin-inline-end: 12px;
+		margin-inline-start: 0;
+	}
+}
+
+a.text-link {
+	text-decoration: none;
+	color: var(--sd-colour-interactive--darken-10);
+	transition: all 0.1s ease-in;
+	display: inline-block;
+	cursor: pointer;
+
+	&:hover {
+		text-decoration: underline;
+	}
+
+	[class^="icon-"],
+	[class*=" icon-"] {
+		color: currentColor;
+		vertical-align: middle;
+		margin-inline-end: 0.3rem;
+		position: relative;
+		inset-block-start: -0.2rem;
+	}
+
+	&.text-link--white {
+		color: rgba(255, 255, 255, 0.4);
+
+		&:hover {
+			color: rgba(255, 255, 255, 0.75);
+			text-decoration: none;
+		}
+
+		&:active {
+			color: rgba(255, 255, 255, 1);
+		}
+	}
+}
+
+.text-link__group {
+	>a.text-link {
+		margin: 0.4rem 0.4rem 0.4rem 0;
+		font-size: 1.4rem;
+		padding: 0 .6rem 0 0;
+		border-inline-end: 1px dotted var(--sd-colour-line--medium);
+
+		&:last-child {
+			padding-inline-end: 0;
+			border-inline-end: none;
+		}
+	}
+
+	.text-link__item {
+		display: inline-block;
+		padding: 0 .8rem 0 0;
+		margin: 0.6rem 0.8rem 0.6rem 0;
+		font-size: 1.4rem;
+		border-inline-end: 1px dotted var(--sd-colour-line--medium);
+
+		&:last-child {
+			padding-inline-end: 0;
+			border-inline-end: none;
+		}
+	}
+}

package/app/styles/menus/_sd-bottom-tabs.scss

@@ -0,0 +1,79 @@
+.sd-bottom-nav-list {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 3.2rem;
+    overflow-x: auto;
+    grid-column: 2/3;
+
+    .sd-bottom-nav-list__item {
+        flex: 0 1 24rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 3.2rem;
+        padding: 0 0.8rem 0 1.6rem;
+        gap: 0.8rem;
+        border-inline-end: 1px solid hsla(214, 13%, 90%, 0.14);
+        background-color: var(--sd-colour-bottom-bar__item);
+        overflow: hidden;
+
+        .sd-bottom-nav-list__item-title {
+            font-size: 1.4rem;
+            line-height: 1;
+            color: hsla(214, 13%, 80%, 1);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: flex;
+            flex: 1 1;
+            align-self: stretch;
+            align-items: center;
+            gap: 8px;
+
+            &:hover {
+                color: var(--sd-colour-interactive);
+                cursor: pointer;
+            }
+
+            [class^="icon-"],
+            [class*=" icon-"] {
+                flex-shrink: 0;
+                color: inherit !important;
+                opacity: 0.75;
+            }
+
+            span {
+                padding-block-start: 2px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                display: flex;
+                display: inline-block;
+                flex-shrink: 1;
+            }
+        }
+    }
+
+    .sd-bottom-nav-list__item--active {
+        background-color: var(--sd-colour-bottom-bar__item--active);
+
+        .sd-bottom-nav-list__item-title,
+        .sd-bottom-nav-list__item-title:hover {
+            color: hsla(214, 13%, 98%, 1);
+        }
+    }
+
+    .sd-bottom-nav-list__item--disabled {
+        opacity: 0.5;
+        pointer-events: none;
+
+        .sd-bottom-nav-list__item-title {
+            pointer-events: none;
+        }
+    }
+}

package/app/styles/menus/_sd-content-navigation.scss

@@ -0,0 +1,50 @@
+// CONTENT NAVIGATION
+
+$sd-contentNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-out;
+
+.sd-content-nav {
+    background: transparent;
+    display: block;
+    overflow: auto;
+    padding: 1rem 0;
+    opacity: 1;
+    transition: all .2s ease-out .3s;
+}
+
+.sd-content-nav__btn {
+    display: block;
+    font-size: 1.4rem;
+    line-height: 100%;
+    text-decoration: none;
+    color: var(--color-text);
+    padding: 1.6rem 2rem;
+    border-inline-end: 4px solid transparent;
+    transition: $sd-contentNavBtn-transition;
+
+    &:hover {
+        background-color: var(--sd-colour-interactive--alpha-20);
+        color: var(--color-text);
+        text-decoration: none;
+    }
+}
+
+.sd-content-nav__btn:active,
+.sd-content-nav__btn--active {
+    background-color: var(--sd-colour-interactive--alpha-10);
+    color: var(--sd-colour-interactive);
+}
+
+.sd-content-nav__btn--active {
+    border-color: var(--sd-colour-interactive--active);
+}
+
+.sd-content-nav-title {
+    font-size: 1.5rem;
+    font-weight: 300;
+}
+
+.sd-content-nav-title--uppercase {
+    font-size: 1.3rem;
+    font-weight: 400;
+    text-transform: uppercase;
+}

package/app/styles/menus/_sd-left-navigation.scss

@@ -0,0 +1,126 @@
+@use "../variables/colors";
+
+// LEFT NAVIGATION
+
+$sd-leftNav-bgColor: var(--sd-colour-background__left-nav);
+$sd-leftNav-borderColor: var(--sd-colour-line--light);
+$sd-leftNav-width: 24rem;
+$sd-leftNav-width-large: 32rem;
+
+$sd-leftNavBtn-bgColor: transparent;
+$sd-leftNavBtn-bgHoverColor: colors.$sd-colour-background__menu-item--hover;
+$sd-leftNavBtn-bgActiveColor: var(--sd-colour-interactive--alpha-10);
+$sd-leftNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-out;
+
+$sd-leftNavBtn-border: 4px solid rgba(94, 169, 200, 0);
+$sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
+
+.sd-left-nav {
+    background: $sd-leftNav-bgColor;
+    border-inline-end: 1px solid $sd-leftNav-borderColor;
+    display: block;
+    width: $sd-leftNav-width;
+    overflow: auto;
+    height: 100%;
+}
+
+.sd-left-nav--absolute {
+    position: absolute;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+}
+
+.sd-left-nav--default {
+    background: $sd-leftNav-bgColor;
+    border-inline-end: 1px solid $sd-leftNav-borderColor;
+}
+
+.sd-left-nav--blanc {
+    border-color: transparent;
+    background: transparent;
+    border-right-width: 0;
+
+    .sd-left-nav__group-header {
+        border-top-color: transparent;
+    }
+}
+
+.sd-left-nav--large {
+    width: $sd-leftNav-width-large;
+    max-width: 100%;
+
+    .sd-left-nav__group-header {
+        padding-inline: 2.4rem 0;
+    }
+
+    .sd-left-nav__btn {
+        padding-inline: 4rem 0;
+    }
+}
+
+.sd-left-nav--reverse-border {
+    .sd-left-nav__btn {
+        border-inline-end: none;
+        border-inline-start: $sd-leftNavBtn-border;
+    }
+
+    .sd-left-nav__btn--active {
+        border-inline-end: none;
+        border-inline-start: $sd-leftNavBtn-borderActive;
+    }
+}
+
+.sd-left-nav__btn {
+    width: 100%;
+    text-align: start;
+    display: block;
+    font-size: 1.4rem;
+    line-height: 100%;
+    text-decoration: none;
+    background-color: $sd-leftNavBtn-bgColor;
+    padding-block-start: 1.6rem;
+    padding-block-end: 1.6rem;
+    padding-inline: 3rem 0;
+    border-inline-end: $sd-leftNavBtn-border;
+    transition: $sd-leftNavBtn-transition;
+    color: var(--color-text);
+
+    &:hover {
+        background-color: $sd-leftNavBtn-bgHoverColor;
+        color: var(--color-text);
+        text-decoration: none;
+        cursor: pointer;
+    }
+}
+
+.sd-left-nav__btn:active,
+.sd-left-nav__btn--active {
+    background-color: $sd-leftNavBtn-bgActiveColor;
+    color: colors.$sd-colour-interactive;
+}
+
+.sd-left-nav__btn--active {
+    border-inline-end: $sd-leftNavBtn-borderActive;
+}
+
+.sd-left-nav__group-header {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: 500;
+    line-height: 100%;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--color-text-subdued);
+    padding-block-start: 2.6rem;
+    padding-block-end: 0.9rem;
+    padding-inline: 1.6rem 0;
+    border-block-start: 1px solid $sd-leftNav-borderColor;
+    margin-block-start: 1rem;
+}
+
+.sd-left-nav__group-header--first,
+.sd-left-nav__group-header:first-child {
+    border: none;
+    margin-block-start: 0;
+}