mirror of
https://github.com/nasa/openmct.git
synced 2025-01-18 18:57:01 +00:00
Notebook vue styling (#2169)
* Notebook styling WIP - New notebook scss file; - notebook.html converted; * Notebook styling WIP - Entries and embeds - New discreteItem theme constants; * Notebook styling shippable - Notebook entries and embeds finished; - TODO: Fix styling for c-input-inline when SCSS is merged and remove s-input-inline class in entry.html; * Notebook styling shippable - Remove legacy Notebook styles; - Painterro overrides; - Code cleanup * Notebook mobile styling; entry layout still WIP - Entries now layout better in narrow containers but still WIP, particularly for delete icon; - Mobile styling; * Notebook entry markup for better narrow Notebook layout
This commit is contained in:
Charles Hacskaylo
Deep Tailor
parent
5eac6e646b
commit
fbf1c68c7a
@ -38,6 +38,7 @@ define([
|
||||
'./ui/router/Browse',
|
||||
'../platform/framework/src/Main',
|
||||
'./styles-new/core.scss',
|
||||
'./styles-new/notebook.scss',
|
||||
'./ui/components/layout/Layout.vue',
|
||||
'vue'
|
||||
], function (
|
||||
@ -58,6 +59,7 @@ define([
|
||||
Browse,
|
||||
Main,
|
||||
coreStyles,
|
||||
NotebookStyles,
|
||||
Layout,
|
||||
Vue
|
||||
) {
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
<div
|
||||
class="l-flex-row l-entry-embed"
|
||||
v-bind:class="[embed.cssClass]">
|
||||
|
||||
<div
|
||||
class="snap-thumb"
|
||||
<div class="c-ne__embed">
|
||||
<div class="c-ne__embed__snap-thumb"
|
||||
v-if="embed.snapshot"
|
||||
v-on:click="openSnapshot">
|
||||
<img v-bind:src="embed.snapshot.src">
|
||||
</div>
|
||||
|
||||
<div class="embed-info l-flex-col">
|
||||
<div class="embed-title object-header">
|
||||
<a v-on:click="navigate(embed.type)">{{embed.name}}</a>
|
||||
<a class='context-available' v-on:click="toggleActionMenu"></a>
|
||||
<div class="c-ne__embed__info">
|
||||
<div class="c-ne__embed__name">
|
||||
<a class="c-ne__embed__link"
|
||||
v-on:click="navigate(embed.type)"
|
||||
v-bind:class="[embed.cssClass]">{{embed.name}}</a>
|
||||
<a class="c-ne__embed__context-available icon-arrow-down"
|
||||
v-on:click="toggleActionMenu"></a>
|
||||
</div>
|
||||
|
||||
<div class="hide-menu hidden">
|
||||
<div class="menu-element context-menu-wrapper mobile-disable-select">
|
||||
<div class="menu context-menu">
|
||||
@ -28,8 +25,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="embed-date" v-if="embed.snapshot">
|
||||
<div class="c-ne__embed__time" v-if="embed.snapshot">
|
||||
{{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
<li class="l-flex-row has-local-controls l-notebook-entry s-notebook-entry"
|
||||
<li class="c-notebook__entry c-ne has-local-controls"
|
||||
v-on:drop="dropOnEntry(entry.id)"
|
||||
v-on:dragover="dragoverOnEntry"
|
||||
>
|
||||
|
||||
<div class="holder flex-elem l-flex-row grows w-notebook-entry-time-and-content">
|
||||
<div class="holder flex-elem s-notebook-entry-time">
|
||||
<div class="c-ne__time-and-content">
|
||||
<div class="c-ne__time">
|
||||
<span>{{formatTime(entry.createdOn, 'YYYY-MM-DD')}}</span>
|
||||
<span>{{formatTime(entry.createdOn, 'HH:mm:ss')}}</span>
|
||||
</div>
|
||||
|
||||
<div class="holder flex-elem l-flex-col grows l-notebook-entry-content">
|
||||
<div class="flex-elem s-input-inline t-notebook-entry-input s-notebook-entry-text"
|
||||
<div class="c-ne__content">
|
||||
<!-- TODO: fix styling for c-input-inline when SCSS is merged and remove s-input-inline class here -->
|
||||
<div class="c-ne__text c-input-inline s-input-inline"
|
||||
contenteditable="true"
|
||||
ref="contenteditable"
|
||||
v-on:blur="textBlur($event, entry.id)"
|
||||
@ -18,8 +17,7 @@
|
||||
v-bind:key="entry.id"
|
||||
v-html="entry.text">
|
||||
</div>
|
||||
|
||||
<div class="flex-elem entry-embeds l-flex-row">
|
||||
<div class="c-ne__embeds">
|
||||
<notebook-embed
|
||||
v-for="(embed, index) in entry.embeds"
|
||||
v-bind:embed="embed"
|
||||
@ -27,9 +25,11 @@
|
||||
></notebook-embed>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="holder flex-elem local-control local-controls-hidden notebook-entry-delete">
|
||||
<a class="s-icon-button icon-trash" title="Delete Entry" v-on:click="deleteEntry"></a>
|
||||
</div>
|
||||
<div class="c-ne__local-controls--hidden">
|
||||
<a class="c-icon-button icon-trash"
|
||||
title="Delete this entry"
|
||||
v-on:click="deleteEntry"></a>
|
||||
</div>
|
||||
</li>
|
||||
@ -1,17 +1,17 @@
|
||||
<div class="mct-notebook w-notebook l-flex-col">
|
||||
<div class="l-notebook-head holder l-flex-row flex-elem">
|
||||
<div class="c-search flex-elem holder grows">
|
||||
<input class="c-search__search-input"
|
||||
type="text" tabindex="10000"
|
||||
v-model="entrySearch"
|
||||
v-on:keyup="search($event)"/>
|
||||
<a class="c-search__clear-input clear-icon icon-x-in-circle"
|
||||
v-bind:class="[entrySearch ? 'show': '']"
|
||||
v-on:click="entrySearch = ''; search($event)"></a>
|
||||
<div class="c-notebook">
|
||||
<div class="c-notebook__head">
|
||||
<!-- TODO: use search component here -->
|
||||
<div class="c-notebook__search c-search"
|
||||
:class="{ 'is-active': entrySearch }">
|
||||
<input class="c-search__input" type="search"
|
||||
type="text" tabindex="10000"
|
||||
v-model="entrySearch"
|
||||
v-on:keyup="search($event)"/>
|
||||
<a class="c-search__clear-input icon-x-in-circle"
|
||||
v-on:click="entrySearch = ''; search($event)"></a>
|
||||
</div>
|
||||
|
||||
<div class="notebook-view-controls l-flex-row flex-elem holder">
|
||||
<div class="select notebook-view-controls__filter-time">
|
||||
<div class="c-notebook__controls">
|
||||
<div class="select c-notebook__controls__time">
|
||||
<select v-model="showTime">
|
||||
<option value="0" selected="selected">Show all</option>
|
||||
<option value="1">Last hour</option>
|
||||
@ -19,7 +19,7 @@
|
||||
<option value="24">Last 24 hours</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select notebook-view-controls__sort">
|
||||
<div class="select c-notebook__controls__sort">
|
||||
<select v-model="sortEntries">
|
||||
<option value="-createdOn" selected="selected">Newest first</option>
|
||||
<option value="createdOn">Oldest first</option>
|
||||
@ -27,15 +27,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- drag area -->
|
||||
<div class="holder flex-elem l-flex-row icon-plus labeled l-notebook-drag-area" v-on:click="newEntry($event)"
|
||||
id="newEntry" mct-entry-dnd>
|
||||
<span class="label">To start a new entry, click here or drag and drop any object</span>
|
||||
<div class="c-notebook__drag-area icon-plus"
|
||||
v-on:click="newEntry($event)"
|
||||
id="newEntry" mct-entry-dnd>
|
||||
<span class="c-notebook__drag-area__label">To start a new entry, click here or drag and drop any object</span>
|
||||
</div>
|
||||
|
||||
<!-- entries -->
|
||||
<div class="holder flex-elem grows w-notebook-entries t-entries-list" ng-mouseover="handleActive()">
|
||||
<div class="c-notebook__entries" ng-mouseover="handleActive()">
|
||||
<ul>
|
||||
<notebook-entry
|
||||
v-for="entry in filterBySearch(entries, entrySearch)"
|
||||
|
||||
@ -108,9 +108,6 @@ define(
|
||||
done(true);
|
||||
}
|
||||
}).show(snapshot);
|
||||
|
||||
$(document.body).find('.ptro-icon-btn').addClass('s-button');
|
||||
$(document.body).find('.ptro-input').addClass('s-button');
|
||||
});
|
||||
}];
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "constants";
|
||||
|
||||
// Mixins
|
||||
// Functions
|
||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, lighter things come forward - opposite for light interfaces
|
||||
@return darken($c, $p);
|
||||
@ -294,3 +294,16 @@ $colorLoadingBg: rgba($colorLoadingFg, 0.1);
|
||||
// Transitions
|
||||
$transIn: all 50ms ease-in;
|
||||
$transOut: all 250ms ease-out;
|
||||
|
||||
// Discrete items, like Notebook entries, Widget rules
|
||||
@mixin discreteItem() {
|
||||
background: rgba($colorBodyFg,0.1);
|
||||
border: 1px solid $colorInteriorBorder;
|
||||
border-radius: $controlCr;
|
||||
.c-input-inline:hover {
|
||||
background: $colorBodyBg;
|
||||
}
|
||||
}
|
||||
@mixin discreteItemInnerElem() {
|
||||
border: 1px solid $colorBodyBg;
|
||||
border-radius: $controlCr; }
|
||||
|
||||
@ -50,8 +50,9 @@
|
||||
}
|
||||
|
||||
/********* Buttons */
|
||||
// Optionally can include icon in :before
|
||||
.c-button {
|
||||
// Optionally can include icon in :before via markup
|
||||
.c-button,
|
||||
button {
|
||||
@extend %c-button;
|
||||
}
|
||||
|
||||
|
||||
@ -169,6 +169,48 @@ li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/******************************************************** HAS */
|
||||
// Local Controls: Controls placed in proximity to or overlaid on components and views
|
||||
body.desktop .has-local-controls {
|
||||
// Provides hover ability to show local controls
|
||||
&:hover [class*="local-controls--hidden"] {
|
||||
transition: opacity 50ms ease-in-out;
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
}
|
||||
|
||||
[class*="local-controls--hidden"] {
|
||||
transition: opacity 500ms ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
//[class*="local-controls"] {
|
||||
// // An explicit outer holder for controls. Typically placed in upper right.
|
||||
// //font-size: 0.7rem;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: flex-end;
|
||||
//
|
||||
//
|
||||
// &.h-local-controls-overlay-content {
|
||||
// // Imagery controls
|
||||
// $p: $interiorMargin;
|
||||
// position: absolute;
|
||||
// top: $p; right: $p;
|
||||
// z-index: 2;
|
||||
// }
|
||||
|
||||
//.l-btn-set,
|
||||
//.s-button {
|
||||
// &:not(:first-child) {
|
||||
// margin-left: $interiorMargin;
|
||||
// }
|
||||
//}
|
||||
//}
|
||||
|
||||
/************************** LEGACY */
|
||||
|
||||
mct-container {
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
@import "../styles/items/item";
|
||||
@import "../styles/mobile/item";
|
||||
@import "../styles/table";
|
||||
@import "../styles/notebook/notebook";
|
||||
//@import "../styles/notebook/notebook";
|
||||
//
|
||||
//!********************************* TO BE MOVED *!
|
||||
@import "../styles/autoflow";
|
||||
@ -76,4 +76,4 @@
|
||||
//@import "../styles/app-start";
|
||||
|
||||
@import "../styles/conductor/time-conductor-snow";
|
||||
@import "../styles/notebook/notebook-snow";
|
||||
//@import "../styles/notebook/notebook-snow";
|
||||
385
src/styles-new/notebook.scss
Normal file
385
src/styles-new/notebook.scss
Normal file
@ -0,0 +1,385 @@
|
||||
/*********************************************** NOTEBOOK */
|
||||
@import "sass-base.scss";
|
||||
|
||||
|
||||
.c-notebook {
|
||||
//@include test(orange);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
|
||||
> [class*="__"] + [class*="__"] {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
|
||||
&__head,
|
||||
&__controls,
|
||||
&__drag-area,
|
||||
&__entries {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
&__head,
|
||||
&__drag-area,
|
||||
&__controls {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__head {
|
||||
[class*="__"] + [class*="__"] {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__drag-area {
|
||||
background: rgba($colorKey, 0.1);
|
||||
border: 1px dashed rgba($colorKey, 0.7);
|
||||
border-radius: $controlCr;
|
||||
color: rgba($colorBodyFg, 0.7);
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
margin-right: 7px !important;
|
||||
}
|
||||
|
||||
[class*="__label"] {
|
||||
font-style: italic;
|
||||
@include ellipsize();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($colorKey, 0.2);
|
||||
color: $colorBodyFg;
|
||||
}
|
||||
|
||||
&.drag-active,
|
||||
&.is-active {
|
||||
// Not currently working
|
||||
border-color: $colorKey;
|
||||
}
|
||||
|
||||
body.mobile & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__entries {
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
padding-right: $interiorMarginSm;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
[class*="__entry"] + [class*="__entry"] {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/****************************** ENTRIES */
|
||||
.c-ne {
|
||||
// A Notebook entry
|
||||
$p: $interiorMarginSm;
|
||||
@include discreteItem();
|
||||
display: flex;
|
||||
//flex-wrap: wrap;
|
||||
padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
|
||||
|
||||
&__time,
|
||||
&__text,
|
||||
&__local-controls {
|
||||
padding-top: $p;
|
||||
padding-bottom: $p;
|
||||
}
|
||||
|
||||
&__time,
|
||||
&__embed__time {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&__time-and-content {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__time {
|
||||
flex: 0 1 auto;
|
||||
min-width: 130px;
|
||||
margin-right: $interiorMarginLg;
|
||||
|
||||
* {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1 1 auto;
|
||||
|
||||
> [class*="__"] + [class*="__"] {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
min-height: 24px; // Needed in Firefox when field is blank
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.is-blank-notebook-entry {
|
||||
&:not(:focus):before {
|
||||
content: 'Blank entry';
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__embeds {
|
||||
flex-wrap: wrap;
|
||||
|
||||
> [class*="__embed"] {
|
||||
margin: 0 $interiorMarginSm $interiorMarginSm 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/****************************** EMBEDS */
|
||||
@mixin snapThumb() {
|
||||
// LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
|
||||
$d: 50px;
|
||||
border: 1px solid $colorInteriorBorder;
|
||||
cursor: pointer;
|
||||
width: $d;
|
||||
height: $d;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.snap-thumb {
|
||||
// LEGACY,
|
||||
@include snapThumb();
|
||||
}
|
||||
|
||||
.c-ne__embed {
|
||||
@include discreteItemInnerElem();
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
padding: $interiorMargin;
|
||||
|
||||
[class*="__"] + [class*="__"] {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
color: $colorKey;
|
||||
}
|
||||
}
|
||||
|
||||
&__name,
|
||||
&__link {
|
||||
// Holds __link and __context-available
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__link {
|
||||
&:before {
|
||||
display: block;
|
||||
font-size: 0.85em;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__context-available {
|
||||
font-size: 0.7em;
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__snap-thumb {
|
||||
@include snapThumb();
|
||||
}
|
||||
}
|
||||
/****************************** SNAPSHOTTING */
|
||||
// LEGACY: TODO: refactor these names
|
||||
.t-contents,
|
||||
.snap-annotation {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.s-status-taking-snapshot,
|
||||
.overlay.snapshot {
|
||||
// Handle overflow-y issues with tables and html2canvas
|
||||
.l-sticky-headers .l-tabular-body { overflow: auto; }
|
||||
}
|
||||
|
||||
/****************************** PAINTERRO OVERRIDES */
|
||||
.annotation-dialog .abs.editor {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#snap-annotation {
|
||||
$m: $interiorMargin;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: $m; right: 0; bottom: $m; left: 0; // LEGACY, deal with .editor border-radius clipping stuff
|
||||
}
|
||||
|
||||
#snap-annotation-wrapper,
|
||||
#snap-annotation-bar {
|
||||
position: relative;
|
||||
top: auto; right: auto; bottom: auto; left: auto;
|
||||
}
|
||||
|
||||
#snap-annotation-wrapper {
|
||||
background: rgba($colorBodyFg, 0.1);
|
||||
border: 1px solid $colorInteriorBorder;
|
||||
order: 2;
|
||||
flex: 10 0 auto;
|
||||
}
|
||||
|
||||
#snap-annotation-bar {
|
||||
// Holds tool buttons, color selectors, etc.
|
||||
$h: 22px;
|
||||
$fs: 0.8rem;
|
||||
|
||||
order: 1;
|
||||
flex: 0 0 auto;
|
||||
height: auto;
|
||||
background-color: transparent !important;
|
||||
margin-bottom: $interiorMargin;
|
||||
|
||||
> div > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $fs;
|
||||
}
|
||||
|
||||
> div,
|
||||
> div > span,
|
||||
.ptro-icon-btn,
|
||||
.ptro-named-btn,
|
||||
.ptro-color-btn,
|
||||
.ptro-bordered-btn,
|
||||
.ptro-tool-ctl-name,
|
||||
.ptro-color-btn,
|
||||
.tool-controls,
|
||||
.ptro-input {
|
||||
// Lot of resets for crappy CSS in Painterro
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
font-size: $fs !important;
|
||||
height: $h !important;
|
||||
margin: 0 0 0 5px;
|
||||
position: relative;
|
||||
width: auto !important;
|
||||
line-height: $h !important;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ptro-tool-ctl-name {
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
top: auto;
|
||||
font-family: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ptro-color-btn {
|
||||
width: $h !important;
|
||||
}
|
||||
|
||||
.ptro-color-control,
|
||||
.ptro-icon-btn,
|
||||
.ptro-named-btn {
|
||||
// Buttons in toolbar. Why the f* they're named like this is a mystery
|
||||
background-color: $colorBtnBg;
|
||||
color: $colorBtnFg;
|
||||
padding: 0 $interiorMargin;
|
||||
|
||||
&:hover {
|
||||
background: $colorBtnBgHov;
|
||||
color: $colorBtnFgHov;
|
||||
}
|
||||
|
||||
i {
|
||||
display: contents;
|
||||
font-size: $fs * 1.2;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.ptro-color-active-control {
|
||||
background: $colorBtnMajorBg !important;
|
||||
color: $colorBtnMajorFg !important;
|
||||
}
|
||||
|
||||
.ptro-info,
|
||||
.ptro-btn-color-checkers-bar,
|
||||
*[title="Font name"],
|
||||
*[title="Stroke color"],
|
||||
*[title="Stroke width"],
|
||||
*[data-id="fontName"],
|
||||
*[data-id="fontStrokeSize"],
|
||||
*[data-id="stroke"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/****************************** MOBILE */
|
||||
body.mobile {
|
||||
.c-notebook__drag-area { display: none; }
|
||||
.c-notebook__entry {
|
||||
[class*="local-controls"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.phone.portrait {
|
||||
.c-notebook__head,
|
||||
.c-notebook__entry {
|
||||
flex-direction: column;
|
||||
|
||||
> [class*="__"] + [class*="__"] {
|
||||
margin-left: 0;
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.c-notebook__entry {
|
||||
[class*="text"] {
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -47,7 +47,7 @@
|
||||
&__input {
|
||||
background: none !important;
|
||||
box-shadow: none !important; // !important needed to override default for [input]
|
||||
flex: 0 1 100%;
|
||||
flex: 1 1 auto;
|
||||
padding-left: 2px !important;
|
||||
padding-right: 2px !important;
|
||||
min-width: 10px; // Must be set to allow input to collapse below browser min
|
||||
|
||||
Loading…
Reference in New Issue
Block a user