_Print.scss 5.97 KB
Newer Older
1 2 3 4 5 6 7 8 9
@mixin print() {
  .esri-print {
    position: relative;
    padding: $cap-spacing $side-spacing;
    overflow-y: auto;
    section[aria-hidden="true"] {
      display: none;
    }
  }
10

11 12 13
  .esri-print__form-section-container {
    margin: 0 0 $cap-spacing 0;
  }
14

15 16 17 18 19 20
  .esri-print__header-title {
    font-size: $font-size__header-text;
    font-weight: $font-weight--bold;
    padding: 0 0 $cap-spacing;
    margin: 0 auto 0 0;
  }
21

22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
  .esri-print__template-list {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.33);
    border-radius: $border-radius;

    display: flex;
    flex-direction: column;
    padding: 0;
    width: 280px;

    .esri-widget__heading,
    &-footer {
      margin: 0;
      padding: $cap-spacing $side-spacing;
      flex: 1 0 auto;
    }
    &-scroller {
      max-height: 175px;
      overflow-y: auto;
      border-top: 1px solid $border-color;
      border-bottom: 1px solid $border-color;
    }
    .esri-menu__list-item {
      font-size: $font-size__body;
    }
  }
47

48 49 50 51 52 53
  .esri-print__layout-section,
  .esri-print__map-only-section {
    padding: $cap-spacing 0 0;
    margin-bottom: $cap-spacing;
    border-top: 1px solid $border-color;
  }
54

55 56 57 58 59 60 61 62
  .esri-print__layout-tab-list {
    position: relative;
    bottom: -1px;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
  }
63

64 65 66 67 68 69 70 71 72 73
  .esri-print__layout-tab {
    display: inline-block;
    text-align: center;
    margin: 0;
    padding: 5px 5px;
    width: 100%;
    cursor: pointer;
    color: $interactive-font-color;
    border: 1px solid rgba(0, 0, 0, 0);
  }
74

75 76 77 78 79 80
  .esri-print__layout-tab:hover,
  .esri-print__layout-tab:focus {
    color: $font-color;
    background-color: $background-color--hover;
    border-bottom: 1px solid $border-color;
  }
81

82 83 84 85 86 87 88
  .esri-print__layout-tab[aria-selected="true"],
  .esri-print__layout-tab[aria-selected="true"]:hover {
    background-color: $background-color;
    color: $font-color;
    border-color: $border-color;
    border-bottom-color: $background-color;
  }
89

90 91 92
  .esri-print__panel--error {
    color: $font-color--error;
  }
93

94 95 96
  .esri-print__panel-container {
    flex: 1 0;
  }
97

98 99 100 101
  .esri-print__input-text {
    width: 100%;
    margin: 0;
  }
102

103 104 105 106
  .esri-print__scale-input-container {
    display: flex;
    align-items: center;
  }
107

108 109 110 111
  .esri-print__advanced-options-section {
    background-color: $background-color--offset;
    color: $interactive-font-color;
  }
112

113 114 115 116 117 118 119 120 121
  .esri-print__advanced-options-button-container {
    color: $interactive-font-color;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
    width: 100%;
    overflow: visible;
  }
122

123 124 125 126 127 128 129 130
  .esri-print__advanced-options-button {
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: $cap-spacing--half $side-spacing--half;
    width: 100%;
    background-color: transparent;
  }
131

132 133 134 135 136
  .esri-print__advanced-options-button[aria-expanded="true"] .esri-print__advanced-options-button-icon--closed,
  .esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--opened,
  .esri-print__advanced-options-button .esri-print__advanced-options-button-icon--closed-rtl {
    display: none;
  }
137

138 139 140 141
  .esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--closed,
  .esri-print__advanced-options-button[aria-expanded="true"] .esri-print__advanced-options-button-icon--opened {
    display: block;
  }
142

143 144 145 146
  .esri-print__advanced-options-button-title {
    font-size: $font-size--small;
    margin: 0 $side-spacing--quarter;
  }
147

148 149 150 151 152 153 154 155 156 157 158 159
  .esri-print__advanced-options-container {
    font-size: $font-size--small;
    padding: $cap-spacing--half $side-spacing--half;
    .esri-print__form-section-container {
      margin-bottom: $cap-spacing--half;
    }
  }
  .esri-print__size-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
160

161 162 163 164
  .esri-print__advanced-options-section [class*="esri-icon"],
  .esri-print__size-container [class*="esri-icon"] {
    background: transparent;
  }
165

166 167 168
  .esri-print__size-container [class*="esri-icon"] {
    align-self: flex-end;
  }
169

170 171 172
  .esri-print__size-container button {
    color: $interactive-font-color;
  }
173

174 175 176 177
  .esri-print__width-container,
  .esri-print__height-container {
    flex: 0 0 43%;
  }
178

179 180 181 182
  .esri-print__swap-button {
    flex: 0 0 5%;
    border: none;
  }
183

184 185 186 187
  .esri-print__refresh-button {
    border: 1px solid $border-color;
    border-left-width: 0;
  }
188

189 190 191 192
  .esri-print__export-button,
  .esri-print__template-button {
    margin: $cap-spacing--half 0;
  }
193

194 195 196 197 198
  .esri-print__export-panel-container {
    font-size: $font-size--small;
    border-top: 1px solid #ddd;
    padding: $cap-spacing 0;
  }
199

200 201 202 203
  .esri-print__export-panel-container [class*="esri-icon"] {
    margin-right: 0.5em;
    margin-top: 0.15em;
  }
204

205 206 207
  .esri-print__exported-file-link-title {
    @include wordbreak();
  }
208

209 210 211 212 213 214 215 216 217 218
  .esri-print__exported-file-link {
    color: $interactive-font-color;
    display: flex;
    align-items: flex-start;
    margin-bottom: $cap-spacing--half;
    text-decoration: none;
    &:hover {
      color: $interactive-font-color--hover;
    }
  }
219

220 221 222 223
  .esri-print__exported-file--error {
    color: $font-color--error;
    cursor: pointer;
  }
224

225 226 227
  .esri-print .esri-print__exported-file--error:hover {
    color: $font-color--error;
  }
228

229 230 231 232 233 234
  .esri-print__loader {
    height: 40px;
    width: 32px;
    background: url(../base/images/loading-throb.gif) no-repeat center;
    margin: 0 auto;
  }
235 236

  [dir="rtl"] {
237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256
    .esri-print__refresh-button {
      border-left-width: 1px;
      border-right-width: 0;
    }
    .esri-print__export-panel-container [class*="esri-icon"] {
      margin-right: 0;
      margin-left: 0.5em;
    }
    .esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--closed {
      display: none;
    }
    .esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--closed-rtl {
      display: block;
    }
  }
}

@if $include_Print == true {
  @include print();
}