diff options
| author | Sam Wilkins <abdullah_ahmed@brown.edu> | 2019-05-09 20:59:10 -0400 |
|---|---|---|
| committer | Sam Wilkins <abdullah_ahmed@brown.edu> | 2019-05-09 20:59:10 -0400 |
| commit | 47ecf8d30f4aa5e25a659fc7f3c0c1487420150e (patch) | |
| tree | cbae92b4aca6cc8427410cc2ec51b0afff1d8ea2 /src/client/views/DocumentDecorations.scss | |
| parent | ff5e275d4d9bb17866a432459884274cd870a640 (diff) | |
merge with master, but haven't reconciled internal and external linking
Diffstat (limited to 'src/client/views/DocumentDecorations.scss')
| -rw-r--r-- | src/client/views/DocumentDecorations.scss | 128 |
1 files changed, 89 insertions, 39 deletions
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index c1a949639..6a2e33836 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -1,20 +1,22 @@ @import "globalCssVariables"; +$linkGap : 3px; .documentDecorations { position: absolute; } -#documentDecorations-container { + +.documentDecorations-container { + z-index: $docDecorations-zindex; position: absolute; top: 0; - left:0; + left: 0; display: grid; - z-index: $docDecorations-zindex; grid-template-rows: 20px 8px 1fr 8px; - grid-template-columns: 8px 8px 1fr 8px 8px; + grid-template-columns: 8px 16px 1fr 8px 8px; pointer-events: none; #documentDecorations-centerCont { - grid-column:3; + grid-column: 3; background: none; } @@ -39,8 +41,8 @@ #documentDecorations-bottomRightResizer, #documentDecorations-topRightResizer, #documentDecorations-rightResizer { - grid-column-start:5; - grid-column-end:7; + grid-column-start: 5; + grid-column-end: 7; } #documentDecorations-topLeftResizer, @@ -63,16 +65,17 @@ cursor: ew-resize; } .title{ - width:100%; background: lightblue; - grid-column-start:3; + grid-column-start: 3; grid-column-end: 4; pointer-events: auto; + overflow: hidden; } } + .documentDecorations-closeButton { - background:$alt-accent; + background: $alt-accent; opacity: 0.8; grid-column-start: 4; grid-column-end: 6; @@ -80,15 +83,22 @@ text-align: center; cursor: pointer; } + .documentDecorations-minimizeButton { - background:$alt-accent; + background: $alt-accent; opacity: 0.8; grid-column-start: 1; grid-column-end: 3; pointer-events: all; text-align: center; cursor: pointer; + position: absolute; + left: 0px; + top: 0px; + width: $MINIMIZED_ICON_SIZE; + height: $MINIMIZED_ICON_SIZE; } + .documentDecorations-background { background: lightblue; position: absolute; @@ -96,8 +106,8 @@ } .linkFlyout { - grid-column: 1/4; - margin-left: 25px; + grid-column: 2/4; + margin-top: $linkGap; } .linkButton-empty:hover { @@ -112,35 +122,34 @@ cursor: pointer; } +.link-button-container { + grid-column: 1/4; + width: auto; + height: auto; + display: flex; + flex-direction: row; +} + .linkButton-linker { - position:absolute; - bottom:0px; - left: 0px; + margin-left: 5px; + margin-top: $linkGap; height: 20px; width: 20px; - margin-top: 10px; - margin-right: 5px; + text-align: center; border-radius: 50%; - opacity: 0.9; pointer-events: auto; color: $dark-color; border: $dark-color 1px solid; - text-transform: uppercase; - letter-spacing: 2px; - font-size: 75%; - transition: transform 0.2s; - text-align: center; - display: flex; - justify-content: center; - align-items: center; } -.linkButton-tray { - grid-column: 1/4; + +.linkButton-linker:hover { + cursor: pointer; + transform: scale(1.05); } -.linkButton-empty { + +.linkButton-empty, .linkButton-nonempty { height: 20px; width: 20px; - margin-top: 10px; border-radius: 50%; opacity: 0.9; pointer-events: auto; @@ -154,17 +163,19 @@ display: flex; justify-content: center; align-items: center; + + &:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; + } } -.linkButton-nonempty { - height: 20px; - width: 20px; - margin-top: 10px; - border-radius: 50%; - opacity: 0.9; +.templating-menu { + position: absolute; + bottom: 0; + left: 50px; pointer-events: auto; - background-color: $dark-color; - color: $light-color; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -173,4 +184,43 @@ display: flex; justify-content: center; align-items: center; +} + +.fa-icon-link { + margin-top: 3px; +} +.templating-button { + width: 20px; + height: 20px; + border-radius: 50%; + opacity: 0.9; + font-size:14; + background-color: $dark-color; + color: $light-color; + text-align: center; + cursor: pointer; + + &:hover { + background: $main-accent; + transform: scale(1.05); + } +} + +#template-list { + position: absolute; + top: 0; + left: 30px; + width: max-content; + font-family: $sans-serif; + font-size: 12px; + background-color: $light-color-secondary; + padding: 2px 12px; + list-style: none; + .templateToggle { + text-align: left; + } + + input { + margin-right: 10px; + } }
\ No newline at end of file |
