_shame.scss 4.72 KB
Newer Older
1 2
// edX LMS - shame
// ====================
3 4
// NOTE: use 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
// edx.org marketing site - 7/2013 visual button revamp

// extends btn
9
%m-btn {
10
  @include box-sizing(border-box);
11
  @include transition(color $tmg-f2 ease-in-out, background $tmg-f2 ease-in-out, box-shadow $tmg-f2 ease-in-out);
12 13 14 15 16
  display: inline-block;
  cursor: pointer;
  text-decoration: none;

  &:hover, &:active {
17 18 19

  }

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

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

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

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

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

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

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

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

65
  &:hover, &:active, &:focus {
66
    background: $action-primary-focused-bg;
67
  }
68
  &:focus {
69
    box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow;
70
  }
71 72

  &.current, &.active {
73 74 75
    box-shadow: inset 0 2px 1px 1px $action-primary-active-shadow;
    background: $action-primary-active-bg;
    color: $action-primary-active-fg;
76

77
    &:hover, &:active, &:focus {
78 79
      box-shadow: inset 0 2px 1px 1px $action-primary-active-focused-shadow;
      color: $action-primary-active-focused-fg;
80 81 82
    }
  }

83 84
  &.disabled, &[disabled] {
    box-shadow: none;
85
    background: $action-primary-disabled-bg; // needed for IE currently
86 87
  }
}
88

89
// secondary button
90 91
%m-btn-secondary {
  @extend %m-btn-base;
92 93 94
  box-shadow: 0 2px 1px 0 $action-secondary-shadow;
  background: $action-secondary-bg;
  color: $action-secondary-fg;
95

96
  &:hover, &:active, &:focus {
97
    background: $action-secondary-focused-bg;
98
  }
99
  &:focus {
100
    box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow;
101
  }
102

103
  &.current, &.active {
104 105 106
    box-shadow: inset 0 2px 1px 1px $action-secondary-active-shadow;
    background: $action-secondary-active-bg;
    color: $action-secondary-active-fg;
107

108
    &:hover, &:active, &:focus {
109 110
      box-shadow: inset 0 2px 1px 1px $action-secondary-active-focused-shadow;
      color: $action-secondary-active-focused-fg;
111 112 113
    }
  }

114 115
  &.disabled, &[disabled] {
    box-shadow: none;
116
    background: $action-secondary-disabled-bg; // needed for IE currently
117 118 119 120 121 122 123
  }
}


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

// edx.org marketing site - needed, but bad overrides with importants
124
.view-register, .view-login, .view-passwordreset, .view-survey {
125 126 127 128 129 130 131 132 133 134 135 136

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


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

137

138
// Verification fixes
139 140
.verification-process {

141
  //overriding reset link style for nav/header
142
  .header-global {
143

144
    .logo a:hover, .logo:active, .logo a:focus {
145 146 147 148 149
      border: none;
      text-decoration: none;
      padding-bottom: 0;
    }

150
    .nav-global a:hover, .nav-global a:active, .nav-global a:focus {
151 152 153
      border: none;
    }
  }
154 155 156 157 158

  // overriding ridiculous hover on input type=button
  #content .action-primary:hover {
    background-image: none;
  }
159 160
}

161 162 163 164 165

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


// The Following is to enable themes to display H1s on login and register pages
166 167 168 169 170 171 172
.view-login .introduction header h1,
.view-register .introduction header h1 {
  @include login_register_h1_style;
}

footer .references {
  @include footer_references_style;
173
}
174 175 176 177 178 179 180 181 182 183 184

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

// modal semantic button resetting - overriding the poorly scoped button mixin styling
.close-modal, button.close-modal {
  @extend %ui-reset-button;

  &:focus {
    border: none !important;
  }
}
185 186 187

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

188 189 190 191 192 193 194 195 196 197 198 199 200
// poor definition/scope on ul elements inside .vert-mod element in courseware - override needed for inline discussion editing
.course-content .discussion-post.edit-post-form .topic-menu {
  padding-left: 0;
  list-style: none;

  .topic-menu-item {
    margin-bottom: 0;
  }
}

.course-content .discussion-post.edit-post-form .topic-submenu {
  list-style: none;
}
201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219


// LMS system feedback button overrides
.is-in-course .wrapper-prompt .nav-actions {
  button {
    font-family: inherit;
  }

  .action-primary {
    @extend %t-action4;
  }

  .action-secondary {
    @extend %btn-no-style;
    @extend %t-strong;
    box-shadow: none;
    text-shadow: none;
  }
}