OpenSlides/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
Emanuel Schütze 311b8abbea UI improvements
Max width for config view and content card in motion detail view.
Improved motion edit view in mobile mode.
2019-01-28 21:52:37 +01:00

277 lines
5.3 KiB
SCSS

span {
margin: 0;
}
.extra-controls-slot {
div {
padding: 0px;
button {
.mat-button-wrapper {
display: inherit;
}
font-size: 100%;
}
span {
font-size: 80%;
}
}
}
.motion-content {
display: flow-root;
}
.motion-text-controls {
float: right;
button {
font-size: 115%;
}
}
.meta-info-panel {
padding-top: 25px;
a:hover {
cursor: pointer;
}
}
.mat-accordion {
display: block;
margin-top: 0px;
}
.mat-expansion-panel {
padding-top: 0;
.expansion-panel-custom-body {
padding-left: 55px;
}
}
.statute-amendment-selector {
mat-form-field {
margin-left: 20px;
}
}
.motion-content {
h4 {
margin: 10px 10px 15px 0;
display: block;
font-weight: 500;
font-size: 110%;
}
h5 {
margin: 15px 10px 10px 0;
display: block;
font-weight: 500;
font-size: 100%;
}
.motion-text {
margin-left: 0px;
}
//the assembly may decide ...
.text-prefix-label {
display: block;
margin: 0 10px 20px 0px;
}
.extra-data {
margin-top: 1em;
}
.content-field {
display: inline-block;
width: 100%;
}
.form-id-title {
display: flex;
.form-identifier {
flex: 0 0 95px;
max-width: 95px;
margin-right: 1em;
}
.form-title {
flex: 1 1 auto;
}
}
}
.desktop-view {
.desktop-left {
width: 30%;
float: left;
padding-right: 25px;
}
.desktop-right {
display: grid;
min-width: calc(70% - 90px);
mat-card {
display: inline;
margin: 0px 40px 10px 10px;
}
.os-card {
max-width: 900px;
min-width: 400px;
margin-left: 0 !important;
margin-top: 0 !important;
}
}
}
/* Line numbers */
// :host ::ng-deep is needed as this styling applies to the motion html that is injected using innerHTML,
// which doesn't have the [ngcontent]-attributes necessary for regular styles.
// An alternative approach (in case ::ng-deep gets removed) might be to change the view encapsulation.
:host ::ng-deep .motion-text {
ins,
.insert {
color: green;
text-decoration: underline;
}
del,
.delete {
color: red;
text-decoration: line-through;
}
li {
padding-bottom: 10px;
}
ol,
ul {
margin-left: 15px;
margin-bottom: 0;
}
.highlight {
background-color: #ff0;
}
&.line-numbers-outside {
padding-left: 40px;
position: relative;
.os-line-number {
display: inline-block;
font-size: 0;
line-height: 0;
width: 22px;
height: 22px;
position: absolute;
left: 0;
padding-right: 55px;
&:after {
content: attr(data-line-number);
position: absolute;
top: 10px;
vertical-align: top;
color: gray;
font-size: 12px;
font-weight: normal;
}
&.selectable:hover:before,
&.selected:before {
position: absolute;
top: 4px;
left: 20px;
display: inline-block;
cursor: pointer;
content: '';
width: 16px;
height: 16px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23337ab7"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
background-size: 16px 16px;
}
}
}
&.line-numbers-inline {
.os-line-break {
display: none;
}
.os-line-number {
display: inline-block;
&:after {
display: inline-block;
content: attr(data-line-number);
vertical-align: top;
font-size: 10px;
font-weight: normal;
color: gray;
margin-top: -3px;
margin-left: 0;
margin-right: 0;
}
}
}
&.line-numbers-none {
.os-line-break {
display: none;
}
.os-line-number {
display: none;
}
}
.os-split-before {
margin-top: 0;
padding-top: 0;
}
.os-split-after {
margin-bottom: 0;
padding-bottom: 0;
}
li.os-split-before {
list-style: none;
}
}
:host ::ng-deep .amendment-view {
.os-split-after {
margin-bottom: 0;
}
.os-split-before {
margin-top: 0;
}
.paragraph-context {
opacity: 0.5;
}
&.amendment-context .paragraph-context {
opacity: 1;
}
}
.main-nav-color {
color: rgba(0, 0, 0, 0.54);
}
.title-line {
display: flex;
}
.create-poll-button {
margin-top: 10px;
button {
padding: 0px;
}
}