_shame.scss 4.84 KB
Newer Older
1 2 3 4
// edX LMS - shame
// shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
// ====================

5 6 7 8 9 10 11 12 13 14 15
// edx.org marketing site - 7/2013 visual button revamp

// extends btn
.m-btn {
  @include box-sizing(border-box);
  @include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
  display: inline-block;
  cursor: pointer;
  text-decoration: none;

  &:hover, &:active {
16 17 18

  }

19 20 21
  &.disabled, &[disabled] {
    cursor: default;
    pointer-events: none;
22
  }
23
}
24

25 26 27
.m-btn-pill {
  border-radius: ($baseline/5);
}
28

29 30 31
.m-btn-rounded {
  border-radius: ($baseline/2);
}
32

33 34 35 36 37
.m-btn-edged {
  border-radius: ($baseline/10);
}

// primary button
38
.m-btn-base {
39 40 41 42 43 44 45
  @extend .m-btn;
  @extend .m-btn-edged;
  border: none;
  padding:($baseline/2) ($baseline);
  text-align: center;
  text-shadow: none;
  font-weight: 500;
46
  letter-spacing: 0;
47

48
  &.disabled, &[disabled], &.is-disabled {
49
    background: $action-primary-disabled-bg;
50 51

    &:hover {
52
      background: $action-primary-disabled-bg !important; // needed for IE currently
53
    }
54
  }
55
}
56

57 58 59 60 61 62
// primary button
.m-btn-primary {
  @extend .m-btn-base;
  box-shadow: 0 2px 1px 0 $action-primary-shadow;
  background: $action-primary-bg;
  color: $action-primary-fg;
63

64
  &:hover, &:active {
65
    background: $action-primary-focused-bg;
66 67 68
  }

  &.current, &.active {
69 70 71
    box-shadow: inset 0 2px 1px 1px $action-primary-active-shadow;
    background: $action-primary-active-bg;
    color: $action-primary-active-fg;
72

73
    &:hover, &:active {
74 75
      box-shadow: inset 0 2px 1px 1px $action-primary-active-focused-shadow;
      color: $action-primary-active-focused-fg;
76 77 78
    }
  }

79 80
  &.disabled, &[disabled] {
    box-shadow: none;
81
    background: $action-primary-disabled-bg; // needed for IE currently
82 83
  }
}
84

85 86 87 88 89 90
// secondary button
.m-btn-secondary {
  @extend .m-btn-base;
  box-shadow: 0 2px 1px 0 $action-secondary-shadow;
  background: $action-secondary-bg;
  color: $action-secondary-fg;
91 92

  &:hover, &:active {
93
    background: $action-secondary-focused-bg;
94
  }
95

96
  &.current, &.active {
97 98 99
    box-shadow: inset 0 2px 1px 1px $action-secondary-active-shadow;
    background: $action-secondary-active-bg;
    color: $action-secondary-active-fg;
100 101

    &:hover, &:active {
102 103
      box-shadow: inset 0 2px 1px 1px $action-secondary-active-focused-shadow;
      color: $action-secondary-active-focused-fg;
104 105 106
    }
  }

107 108
  &.disabled, &[disabled] {
    box-shadow: none;
109
    background: $action-secondary-disabled-bg; // needed for IE currently
110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
  }
}


// ====================

// edx.org marketing site - needed, but bad overrides with importants
.view-register, .view-login, .view-passwordreset {

  .form-actions button[type="submit"] {
    text-transform: none;
    vertical-align: middle;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }
}




// ====================

// edx.org marketing site - registration iframe band-aid (poor form enough to isolate out)
133
.view-iframe, .view-iframe-content {
134
  background: transparent !important;
135 136 137
  overflow: hidden;
}

138
.view-partial-mktgregister {
139
  background: transparent !important;
140 141 142 143 144 145

  // dimensions needed for course about page on marketing site
  .wrapper-view {
    overflow: hidden;
  }

146
  // nav list
147
  .list-actions {
148 149 150 151 152 153 154 155 156 157
    list-style: none;
    margin: 0;
    padding: 0;

    .item {
      margin: 0;
    }
  }

  .action {
158
    font-size: 16px;
159
    font-weight: 500;
160

161 162
    // register or access courseware
    &.action-register, &.access-courseware {
163
      @extend .m-btn-primary;
164
      display: block;
165 166 167

      .track {
        @include transition(all 0.25s ease-in-out);
168
        color: $white;
169 170
        display: block;
        font-size: 13px;
171 172
        line-height: 2em;
        opacity: 0.6;
173 174 175
      }

      &:hover .track {
176
        opacity: 1.0;
177
      }
178 179 180 181

      &.has-option-verified {
        padding-top: 12px !important;
      }
182
    }
183

184 185
    // already registered but course not started or registration is closed
    &.is-registered, &.registration-closed {
186
      @extend .m-btn-secondary;
187
      pointer-events: none !important;
188
      display: block;
189
    }
190 191

    // coming soon
192
    &.coming-soon {
193
      @extend .m-btn-secondary;
194 195
      pointer-events: none !important;
      outline: none;
196
      display: block;
197
    }
198 199
  }
}
200

201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219
// ====================

// Verification: overriding reset link style for nav/header
.verification-process {

  header.global {

    .logo a:hover, .logo:active {
      border: none;
      text-decoration: none;
      padding-bottom: 0;
    }

    .nav-global a:hover, .nav-global a:active {
      border: none;
    }
  }
}

220 221 222 223 224

// ====================


// The Following is to enable themes to display H1s on login and register pages
225 226 227 228 229 230 231
.view-login .introduction header h1,
.view-register .introduction header h1 {
  @include login_register_h1_style;
}

footer .references {
  @include footer_references_style;
232
}