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

package/app/styles/dropdowns/_input-dropdown.scss

@@ -0,0 +1,26 @@
+// Dropdown integrated in input field
+
+.dropdown.dropdown--input-addon {
+    position: absolute;
+    inset-inline-end: 12px;
+    margin-block-start: -1px;
+
+    > .dropdown__toggle {
+        height: 22px;
+        line-height: 0;
+        padding: 2px 6px;
+        box-shadow: none;
+        margin-block-end: 2px;
+        background-color: transparent;
+        box-shadow: none;
+
+        .dropdown__caret {
+            padding: 0px;
+            margin-inline-start: 0;
+        }
+    }
+    
+    &.open > .dropdown__toggle {
+        background-color: transparent;
+    }
+}

package/app/styles/dropdowns/_navigation_dropdown.scss

@@ -0,0 +1,126 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+//navigation big dropdown
+.dropdown.dropdown--big, 
+.navbtn.dropdown {
+    & > .dropdown__toggle {
+        padding: 0 15px;
+        display: block;
+        color:colors.$sd-text;
+        height: dimensions.$subnav-height;
+        text-align: center;
+        line-height: dimensions.$subnav-height;
+        font-size: 15px;
+        position: relative;
+        z-index: 2;
+        background: transparent;
+        
+        &:hover {
+            background: rgba(255,255,255,0);
+        }
+
+        &.condensed {
+            padding: 0 14px;
+        }
+    }
+
+    &.open {
+        & > .dropdown__toggle {
+            background-color: var(--color-dropdown-menu-Bg);
+            color: colors.$sd-colour-interactive;
+            z-index: 3;
+
+            &.sd-create-btn {
+                .circle {
+                    width: 32px;
+                    height: 32px;
+                    margin-block-start: 8px;
+                    margin-inline-start: 0;
+                }
+            }
+        }
+    }
+
+    .caret {
+        margin-inline-start: 15px;
+    }
+
+    .dropdown__menu {
+        border-radius: 0px;
+        border:0;
+        z-index: 2;
+        margin-block-start: -1px;
+        min-width: 200px;
+        box-shadow: dimensions.$shadow__dropdown--default;
+        padding: 10px 0;
+
+        &:before {
+            display: none;
+        }
+
+        li {
+            > a, > button, > span {
+                margin: 0;
+                min-width: 225px;
+                padding: 6px 16px;
+                line-height: 19px;
+            }
+
+            > span {
+                display: block;
+
+                &:hover {
+                    background: none;
+                }
+            }
+
+            > .dropdown__menu-label {
+                min-width: 205px;
+            }
+
+            button {
+                &.full {
+                    width: 100%;
+                    margin: 0;
+                    height: 41px;
+                    padding: 10px 10px;
+                    border-block-start: 1px solid #e0e0e0;
+                    border-radius: 0px;
+
+                    i {
+                        margin-inline-end: 10px;
+                    }
+
+                    &:hover {
+                        background: colors.$sd-colour-interactive;
+                        color: #fff;
+                    }
+                }
+            }
+
+            &:active {
+                > button {
+                    background: colors.$sd-colour-interactive;
+                    color: #fff;
+                }
+            }
+        }
+        
+        .fieldset {
+            button {
+                display: inline-block;
+                text-align: center;
+                width: auto;
+                min-width: 50px;
+                clear: none;
+                margin-inline-end: 10px;
+                float: inline-end;
+            }
+        }
+    }
+}
+
+.navbtn.dropdown {
+    padding: 0;
+}

package/app/styles/dropdowns/_nested-dropdown.scss

@@ -0,0 +1,95 @@
+// Nested dropdowns
+
+.dropdown {
+    &.open {
+        li .dropdown {
+            display: block;
+            float: none;
+
+            .dropdown__toggle {
+                padding-inline-end: 2.4rem;
+
+                &::after {
+                    position: absolute;
+                    inset-inline-end: 0.8rem;
+                    inset-block-start: 22%;
+                    display: block;
+                    width: 1.6rem;
+                    height: 1.6rem; 
+                    line-height: 1.6rem;
+                    font-family: 'sd_icons';
+                    content: "\e643";
+                    font-size: 1.6rem;
+                    font-style: normal;
+                    font-weight: normal;
+                    font-variant: normal;
+                    text-transform: none;
+                    opacity: .4;
+                }
+            }
+
+            &:not(.open) .dropdown__menu {
+                display: none;
+            }
+
+            > .dropdown__menu {
+                inset-inline-start: 100%;
+                inset-inline-end: auto;
+                inset-block-start: 0;
+                min-width: 160px;
+                z-index: 10;
+
+                &.dropdown__menu--submenu-left {
+                    inset-inline-start: auto;
+                    inset-inline-end: 100%;
+                }
+
+                &.upward {
+                    inset-block-start: auto;
+                    inset-block-end: -16px;
+                }
+
+                &.dropdown--align-right {
+                    inset-inline-start: auto;
+                    inset-inline-end: 100%;
+                }
+            }
+
+            &.dropdown--dropup > .dropdown__menu {
+                inset-block-start: auto;
+                inset-block-end: 0;
+            }
+            
+            &:hover {
+                > .dropdown__menu {
+                    display: block;
+                }
+            }
+        }
+    }
+}
+
+.dropdown.dropdown--dropup {
+    &.open {
+        li .dropdown {
+            > .dropdown__menu {
+                inset-block-start: auto;
+                inset-block-end: -16px;
+            }
+        }
+    }
+}
+
+[dir="rtl"] {
+    .dropdown {
+        &.open {
+            li .dropdown {
+                .dropdown__toggle {
+                    &::after {
+                        content: "\e642";
+                    }
+                }
+            }
+        }
+    }
+}

package/app/styles/dropdowns/_other_dropdown.scss

@@ -0,0 +1,59 @@
+
+.sd-widget.metadata {
+    .dropdown {
+        margin-inline-end: -5px;
+
+        .dropdown__toggle {
+            display: inline-block;
+            max-width: 100%;
+            min-width: 40px;
+            box-sizing: border-box;
+            height: 28px;
+            margin-block-start: -5px;
+            border-radius: $border-radius__base--x-small;
+            border: 1px solid #f8f8f8;
+            padding: 4px 10px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        .dropdown__menu {
+            margin: 0;
+            margin-block-start: -5px;
+            box-sizing: border-box;
+            border-radius:0;
+            max-width: $tabpane-width - 40px;
+
+            &:before {
+                display: none;
+            }
+
+            button {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+    &.small {
+        .dropdown {
+            .dropdown__toggle {
+                width: 40px;
+            }
+            
+            .dropdown__menu    {
+                width: 70px;
+                min-width: 0;
+            }
+        }
+    }
+
+    .dropdown-nested {
+        position: absolute;
+        inset-inline-end: 0px;
+        margin-block-start: 0px;
+    }
+}

package/app/styles/dropdowns/dropdown2.scss

@@ -0,0 +1,4 @@
+.dropdown2 {
+    background: #fff;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 3px 1px -2px rgba(0, 0, 0, 0.1);
+}

package/app/styles/editor/_editor-buttons.scss

@@ -0,0 +1,61 @@
+// colors
+$editor-neutral-border: 			var(--sd-editor-colour__controls-border);
+$editor-neutral-bg: 				var(--sd-editor-colour__controls-bg);
+$editor-neutral-color: 				var(--sd-editor-colour__txt);
+
+$editor-styleButton-color: 			var(--sd-editor-colour__txt);
+$editor-styleButton-active-color: 	var(--sd-editor-colour__button-txt--active);
+$editor-styleButton-size: 			3.2rem;
+
+.Editor3-styleButton {
+	color: inherit;
+	cursor: pointer;
+	margin: 0.4rem 0.2rem;
+	height: $editor-styleButton-size;
+	min-width: $editor-styleButton-size;
+	padding: 0.6rem;
+	display: inline-block;
+	border-radius: var(--b-radius--medium);
+	text-align: center;
+	line-height: 1.6rem;
+	transition: all 0.2s ease;
+
+	[class*="icon-"] {
+		transition: opacity 0.2s ease;
+		color: inherit;
+		opacity: 0.8;
+		vertical-align: middle;
+	}
+
+	&:hover {
+		background-color: hsla(214, 13%, 60%, 0.25);
+		[class*="icon-"] {
+			color: inherit;
+			opacity: 1;
+		}
+	}
+
+	.inactive {
+		[class*="icon-"] {
+			opacity: 0.4;
+		}
+		&:hover {
+			[class*="icon-"] {
+				opacity: 0.4;
+			}
+		}
+	}
+	
+	&.Editor3-activeButton, &.Editor3-activeButton:hover {
+		color: var(--color-text-ondark);
+		background-color: var(--color-interactive-default);
+		[class*="icon-"] {
+			opacity: 1;
+		}
+	}
+}
+
+.Editor3-styleButton--short {
+	padding-inline-end: 0.2rem;
+	margin-inline-end: -1rem;
+}