theme/boost/scss/moodle/atto.scss

   1 .editor_atto_content_wrap {
   2     background-color: white;
   3     color: #333;
   4 }
   5
   6 .editor_atto_content {
   7     padding: 4px;
   8     resize: vertical;
   9     overflow: auto;
  10 }
  11
  12 .editor_atto_content_wrap,
  13 .editor_atto + textarea {
  14     width: 100%;
  15     padding: 0;
  16 }
  17
  18 .editor_atto + textarea {
  19     border-radius: 0;
  20     resize: vertical;
  21     margin-top: -1px;
  22 }
  23
  24 div.editor_atto_toolbar {
  25     display: block;
  26     background: #f2f2f2;
  27     min-height: 35px;
  28     border: 1px solid $input-border-color;
  29     width: 100%;
  30     padding: 0 0 9px 0;
  31 }
  32
  33 div.editor_atto_toolbar button {
  34     padding: 4px 9px;
  35     background: none;
  36     border: 0;
  37     margin: 0;
  38     border-radius: 0;
  39     cursor: pointer;
  40 }
  41
  42 div.editor_atto_toolbar button + button {
  43     border-left: 1px solid #ccc;
  44 }
  45
  46 div.editor_atto_toolbar button[disabled] {
  47     opacity: .45;
  48     background: none;
  49     cursor: default;
  50 }
  51
  52 .editor_atto_toolbar button:hover {
  53     background-image: radial-gradient(ellipse at center, #fff 60%, #dfdfdf 100%);
  54     background-color: #ebebeb;
  55 }
  56
  57 .editor_atto_toolbar button:active,
  58 .editor_atto_toolbar button.highlight {
  59     background-image: radial-gradient(ellipse at center, #fff 40%, #dfdfdf 100%);
  60     background-color: #dfdfdf;
  61 }
  62
  63 /* Make firefox button sizes match other browsers */
  64 div.editor_atto_toolbar button::-moz-focus-inner {
  65     border: 0;
  66     padding: 0;
  67 }
  68
  69 div.editor_atto_toolbar button .icon {
  70     padding: 0;
  71     margin: 2px 0;
  72 }
  73
  74 div.editor_atto_toolbar div.atto_group {
  75     display: inline-block;
  76     border: 1px solid #ccc;
  77     border-bottom: 1px solid #b3b3b3;
  78     border-radius: 4px;
  79     margin: 9px 0 0 9px;
  80     background: #fff;
  81 }
  82
  83 .editor_atto_content img {
  84     resize: both;
  85     overflow: auto;
  86 }
  87
  88 .atto_hasmenu {
  89     /* IE8 places the images on top of each other if that is not set. */
  90     white-space: nowrap;
  91 }
  92
  93 .atto_menuentry .icon {
  94     width: 16px;
  95     height: 16px;
  96 }
  97
  98 .atto_menuentry {
  99     clear: left;
 100 }
 101
 102 .atto_menuentry h1,
 103 .atto_menuentry h2,
 104 .atto_menuentry p {
 105     margin: 4px;
 106 }
 107
 108 /*.atto_form label.sameline {
 109     display: inline-block;
 110     min-width: 10em;
 111 }*/
 112
 113 .atto_form textarea.fullwidth,
 114 .atto_form input.fullwidth {
 115     width: 100%;
 116 }
 117
 118 .atto_form {
 119     padding: 0.5rem;
 120 }
 121
 122 /*.atto_form label {
 123     display: block;
 124     margin: 0 0 5px 0;
 125 }*/
 126
 127 .atto_control {
 128     position: absolute;
 129     right: -6px;
 130     bottom: -6px;
 131     display: none;
 132     cursor: pointer;
 133 }
 134
 135 .atto_control .icon {
 136     background-color: white;
 137 }
 138
 139 div.editor_atto_content:focus .atto_control,
 140 div.editor_atto_content:hover .atto_control {
 141     display: block;
 142 }
 143
 144 .editor_atto_menu.yui3-menu-hidden {
 145     display: none;
 146 }
 147
 148 /* Get broken images back in firefox */
 149 .editor_atto_content img:-moz-broken {
 150     -moz-force-broken-image-icon: 1;
 151     min-width: 24px;
 152     min-height: 24px;
 153 }
 154
 155 /* Atto menu styling */
 156 .moodle-dialogue-base .editor_atto_menu .moodle-dialogue-content .moodle-dialogue-bd {
 157     padding: 0;
 158     z-index: 1000;
 159 }
 160
 161 .editor_atto_menu .dropdown-menu > li > a {
 162     margin: 3px 14px;
 163 }
 164
 165 .editor_atto_menu .open ul.dropdown-menu {
 166     padding-top: 5px;
 167     padding-bottom: 5px;
 168 }
 169
 170 .editor_atto_wrap {
 171     position: relative;
 172 }
 173 /*rtl:ignore*/
 174 .editor_atto_wrap textarea {
 175     direction: ltr;
 176 }
 177
 178 .editor_atto_notification .atto_info,
 179 .editor_atto_notification .atto_warning {
 180     display: inline-block;
 181     background-color: #f2f2f2;
 182     padding: 0.5em;
 183     padding-left: 1em;
 184     padding-right: 1em;
 185     border-bottom-left-radius: 1em;
 186     border-bottom-right-radius: 1em;
 187 }
 188
 189 .editor_atto_notification .atto_info {
 190     background-color: #f2f2f2;
 191 }
 192
 193 .editor_atto_notification .atto_warning {
 194     background-color: #ffd700;
 195 }
 196
 197 .editor_atto_toolbar,
 198 .editor_atto_content_wrap,
 199 .editor_atto + textarea {
 200     box-sizing: border-box;
 201 }
 202
 203 .editor_atto_content.form-control {
 204     width: 100%;
 205     border-top: 0;
 206 }
 207
 208 /** Atto fields do not have form-control because that would break the layout of the editor.
 209     So they need these extra styles to highlight the editor when there is a validation error. */
 210 .has-danger .editor_atto_content.form-control,
 211 .has-danger .editor_atto_content.form-control-danger {
 212     @include form-validation-state('invalid', $form-feedback-invalid-color, $form-feedback-icon-invalid);
 213 }
 214
 215 .open.atto_menu > .dropdown-menu {
 216     display: block;
 217 }
 218 div.editor_atto_toolbar button .icon {
 219     color: $gray-700;
 220 }