src/resources/scss/components/_ng-wig.scss
/**
*
* RESET BOX MODEL
*
*/
.ng-wig,
[class^="nw-"] {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
/**
* main wrapper for the editor
*
* .ng-wig
*
*/
.ng-wig {
display: block;
margin: 0;
padding: 0;
}
/**
* styling for toolbar and its items
*
* .nw-toolbar
* &__item
*
*/
.nw-toolbar {
background: -webkit-linear-gradient(90deg, #ffffff 0%, #f9f9f9 100%);
background: -moz-linear-gradient(90deg, #ffffff 0%, #f9f9f9 100%);
background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
border: 1px solid #CCCCCC;
border-radius: 3px 3px 0 0;
color: #6B7277;
display: block;
font-size: 12px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.nw-toolbar__item {
border-right: 1px solid #DEDEDE;
display: inline-block;
margin: 0;
vertical-align: top;
}
.nw-toolbar label {
display: inline-block;
line-height: 30px;
padding: 0 6px 0 3px;
}
.nw-toolbar input[type=checkbox] {
margin-right: -1px;
vertical-align: -3px;
}
/**
* styling for the editor part: source code (original textarea) and resulting div
*
* .nw-editor
* &__src
* &__res
*
*/
.nw-editor {
background: #fff;
/* Default when height is not set */
cursor: text;
display: table;
height: 300px;
width: 100%;
}
.nw-editor-container {
border: 1px solid #CCCCCC;
border-radius: 0 0 3px 3px;
border-top: none;
position: relative;
}
.nw-editor__res {
display: table-cell;
min-height: 100%;
padding: 0 8px;
}
.nw-editor__src,
.nw-editor__res {
border: none;
box-sizing: border-box;
margin: 0;
outline: none;
width: 100%;
}
.nw-editor__src-container {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.nw-editor__src {
height: 100%;
padding: 0 8px;
resize: none;
}
.nw-editor--fixed .nw-editor {
display: block;
overflow-y: auto;
}
.nw-editor--fixed .nw-editor__res {
display: block;
padding: 1px 8px;
}
.nw-invisible {
visibility: hidden;
}
.nw-editor--fixed .nw-invisible {
display: none;
}
.nw-editor.nw-disabled {
cursor: default;
}
/**
* styling for toolbar button, has two modifiers: active and type of icon for background
*
* .nw-button
* &--active
* &--{button type}
*
*/
.nw-button {
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
border: none;
border-radius: 2px;
cursor: pointer;
display: block;
font-size: 10px;
height: 30px;
margin: 0;
opacity: 0.5;
padding: 0;
position: relative;
width: 30px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
overflow: hidden;
}
.nw-button:before {
@include material-icons;
font-size: 20px;
height: 30px;
line-height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px;
background-color: $white;
color: $black;
}
.nw-button.bold:before {
content: "format_bold";
}
.nw-button.italic:before {
content: "format_italic";
}
.nw-button.list-ul:before {
content: "format_list_bulleted";
}
.nw-button.list-ol:before {
content: "format_list_numbered";
}
.nw-button.link:before {
content: "insert_link";
}
.nw-button.font-color:before {
content: '\f031';
}
.nw-button.nw-button--source:before {
content: 'code';
}
.nw-button.clear-styles:before {
content: '\f12d';
}
.nw-button:focus {
outline: none;
}
.nw-button:hover,
.nw-button.nw-button--active {
opacity: 1
}
.nw-button--active {
background-color: #EEEEEE;
}
.nw-button:disabled {
cursor: default;
}
.nw-button:disabled:hover {
opacity: 0.5;
}
/**
* styling & formatting of content inside contenteditable div
*
* .nw-content
*
*/
.nw-content {
font-family: sans-serif;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 12px;
}
.nw-select {
background-color: inherit;
border: 0;
color: #555;
height: 30px;
padding: 6px;
}
.nw-select:disabled {
opacity: 0.5;
}
.nw-select:focus {
outline: none;
}
[contenteditable]:empty:before {
color: grey;
content: attr(placeholder);
display: inline-block;
}