Wysiwyg text + theming

Allowed html elements

<a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <h4> <p> <br/> <img> <table> <thead> <tbody> <tfoot> <tr> <th> <td> <hr/>

wysiwyg.html

<p><strong>Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a <a href="/">ante venenatis dapibus posuere</a> velit aliquet. Aenean lacinia bibendum nulla sed consectetur.</strong></p>
<h2>Nullam quis risus eget urna mollis ornare vel eu leo.</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</p>
<ul>
  <li>Maecenas sed diam eget</li>
  <li>Risus varius blandit sit amet non magna.</li>
  <li>Cum <a href="/">sociis</a> natoque penatibus.
    <ul>
      <li>Aenean lacinia bibendum.</li>
      <li>Nulla sed consectetur.</li>
      <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
    </ul>
  <li>Bet magnis dis parturient montes.</li>
  <li>Nascetur ridiculus mus.</li>
</ul>
<h2>Vivamus sagittis lacus vel augue laoreet</h2>
<p>Rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h3>Eget lacinia odio sem nec elit.</h3>
<p>Qulla vitae elit libero, a pharetra augue. Donec sed odio dui. Praesent commodo cursus magna. Vel scelerisque nisl consectetur et.</p>
<blockquote>Donec sed odio vestibulum id felis euismod semper dui.</blockquote>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue <strong>laoreet rutrum faucibus dolor auctor</strong>. Maecenas sed diam eget risus varius blandit sit amet non magna. <strong>Maecenas faucibus</strong> mollis interdum. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.</p>
<table>
  <thead>
    <tr>
      <th>Duis mollis</th>
      <th>Est non</th>
      <th>Commodo luctus</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nisi erat porttitor ligula</td>
      <td>Eget lacinia odio sem nec elit</td>
      <td>Maecenas</td>
    </tr>
    <tr>
      <td>Faucibus mollis interdum</td>
      <td>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus</td>
      <td>Nisi erat porttitor ligula, </td>
    </tr>
    <tr>
      <td>Eget lacinia odio sem nec elit. </td>
      <td>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia</td>
      <td>Odio sem nec elit</td>
    </tr>
  </tbody>
</table>
<h3>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</h3>
<p><img class="img-float-left" src="http://lorempixel.com/300/200" alt="Magna Porta Fringilla"/> Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas <em>faucibus mollis interdum.</em> Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.</p>
<ol>
  <li>Maecenas sed diam eget</li>
  <li>Risus varius blandit sit amet non magna.</li>
  <li>Cum <a href="/">sociis</a> natoque penatibus.
    <ol>
      <li>Aenean lacinia bibendum.</li>
      <li>Nulla sed consectetur.</li>
      <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
    </ol>
  <li>Bet magnis dis parturient montes.</li>
  <li>Nascetur ridiculus mus.</li>
</ol>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.</p>

wysiwyg.scss

ol, ul {
  padding-left: 20px;
}
ol {
  list-style: decimal;
}
ul {
  list-style: disc;
}
 
/**
 * form elements
 */
input {
  font-size: 1em;
}
select,
input[type="text"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  background: white;
  border: 1px solid $base-text-color;
  border-radius: 2px;
  padding: 0 10px;
  -webkit-appearance: none;
}
input[type="text"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"] {
  height: 30px;
  line-height: 28px;
  width: 100%;
}
input[type="search"] {
  -webkit-appearance: textfield;
  width: auto;
}
.webform-component-select {
  position: relative;
  &:after {
    background: white;
    bottom: 9px;
    content: " ";
    display: block;
    height: 21px;
    pointer-events: none;
    position: absolute;
    right: 33px;
    width: 15px;
    z-index: 3000;
  }
}
select {
  background: white url(../images/select-arrow.png) no-repeat right center;
  height: 33px;
  padding: 6px 32px 4px 10px;
  position: relative;
  width: 100%;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background: $base-text-color;
  border: 1px solid $base-text-color;
  border-radius: 2px;
  cursor: pointer;
  height: 32px;
  line-height: 26px;
  margin: 0;
}
input[type="submit"] {
  background: $base-text-color;
  border-color: $base-text-color;
  color: white;
  @include single-transition(background-color, 0.3s, false, ease);
  &:hover,
  &:focus{
    background: $base-text-color;
    border-color: $base-text-color;
  }
  &:active {
    background: $base-text-color;
    border-color: $base-text-color;
  }
}
// Re-set default cursor for disabled elements
button[disabled],
input[disabled] {
  cursor: default;
}
 
html.js input.form-autocomplete {
  background: url(../images/throbber.gif) no-repeat 100% 17px;
}
html.js input.throbbing {
  background-position: 100% -29px;
}
 
textarea {
  padding: 6px 10px;
}
form .description {
  font-size: 0.8em;
}
.webform-component-checkbox {
  .form-checkboxes {
    float: left;
    margin-right: 1em;
    margin-top: -2px;
  }
}
.form-item {
  margin-bottom: 1em;
  > label {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .description {
    font-size: 0.75em;
    margin-top: 4px;
  }
}
.views-exposed-widget > label {
  font-weight: 700;
}
.form-checkboxes,
.form-radios{
  .form-item {
    margin-bottom: 0.5em;
  }
}
.form-type-checkbox,
.form-type-radio {
  > label {
    //color: $base-text-color;
    display: inline;
    font-size: 1em;
    font-weight: 400;
  }
}
 
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  tr {
    //border-top: 1px solid $tableBorder;
    //border-bottom: 1px solid $tableBorder;
    &.odd {
      //background: $lightGreyBlue;
    }
  }
  thead {
    border-bottom: 3px solid $base-text-color;
    tr {
      background: $bg;
    }
  }
  tbody {
    tr {
      border-bottom: 1px solid $base-text-color;
    }
    td, th {
      vertical-align: top;
    }
  }
  td,
  th {
    padding: 10px;
    text-align: left;
  }
  th {
    font-weight: 700;
  }
}
 
blockquote {
  font-size: 2em;
  font-style: italic;
  line-height: 1.25;
  padding: 0 2em;
  text-align: center;
  p {
    display: inline;
  }
  &:before {
    content: '“';
  }
  &:after {
    content: '”';
  }
}
 
/**
 * general content
 */
.wysiwyg {
  p,
  ol,
  ul,
  table,
  blockquote,
  h2,
  h3,
  h4 {
    margin: 1em 0;
    &:first-child {
      margin: 0 0 1em;
    }
  }
  ol, ul {
    padding-left: 20px;
    ol, ul {
      margin: 0;
    }
    li {
      margin: 0.5em 0;
    }
  }
  p > blockquote {
    margin: 0;
  }
  img {
    display: block;
    margin: 0.5em 0;
  }
  a {
    //color: $skyBlue;
  }
  .img-float-left {
    float: left;
    margin-right: 20px;
  }
  .img-float-right {
    float: right;
    margin-left: 20px;
  }
}