_info.scss 4.53 KB
Newer Older
1 2 3 4 5
div.info-wrapper {
  @extend .table-wrapper;

  section.updates {
    @extend .content;
6
    line-height: lh();
7 8 9 10 11 12 13 14 15 16 17

    > h1 {
      @extend .top-header;
    }

    > p {
      margin-bottom: lh();
    }

    > ol {
      list-style: none;
18
      margin-bottom: lh();
19
      padding-left: 0;
20 21 22

      > li {
        @extend .clearfix;
23
        border-bottom: 1px solid lighten($border-color, 10%);
24
        list-style-type: disk;
25 26
        margin-bottom: lh(1.5);
        padding-bottom: lh(.75);
27 28

        ol, ul {
29
          ol,ul {
Kyle Fiedler committed
30
            list-style-type: disc;
31
          }
32 33 34
        }

        h2 {
35
          font-size: $body-font-size;
36
          font-weight: bold;
Kyle Fiedler committed
37 38
          background: url('../images/calendar-icon.png') 0 center no-repeat;
          padding-left: 20px;
39 40 41
        }

        section.update-description {
Kyle Fiedler committed
42 43 44 45 46
          section {
            &.primary {
              border: 1px solid #DDD;
              background: #F6F6F6;
              padding: 20px;
47

Kyle Fiedler committed
48 49 50 51 52 53 54 55
              p {
                font-weight: bold;
              }
              .author {
                font-weight: normal;
                font-style: italic;
              }
            }
56 57
          }

Kyle Fiedler committed
58 59 60 61 62 63 64
          h3 {
            font-size: 1em;
            font-weight: bold;
            margin: lh(1.5) 0 lh(.5);
          }

          > ul {
kimth committed
65
            list-style-type: disc;
Kyle Fiedler committed
66 67
          }

68 69 70 71 72
          > ol {
            list-style: decimal outside none;
            padding: 0 0 0 1em; 
          }

Kyle Fiedler committed
73 74
          li {
            margin-bottom: lh(.5);
75 76 77 78 79 80 81 82 83
          }
        }
      }
    }
  }

  section.handouts {
    @extend .sidebar;
    @include border-radius(0 4px 4px 0);
84
    border-left: 1px solid #ddd;
85
    @include box-shadow(none);
86
    font-size: 14px;
87

88 89 90 91 92
    &:after {
      left: -1px;
      right: auto;
    }

93
    h1 {
94
      margin-bottom: 0;
95
      padding: 32px 26px 20px 26px;
96 97 98
      font-size: 18px;
      font-style: normal;
      font-weight: bold;
99 100 101 102
    }

    ol {
      li {
103
        margin: 0 26px 14px 26px;
104

105 106
        a {
          display: block;
107 108 109 110 111
          padding: 0;

          &:hover {
            background: transparent;
          }
112
        }
113 114 115

        &.expandable,
        &.collapsable {
116 117 118
          margin: 0 16px 14px 16px;
          @include transition(all .2s);

119
          h4 {
120
            color: $blue;
121
            font-size: 1em;
122
            font-weight: normal;
123 124 125 126 127 128 129 130 131 132 133 134
            padding-left: 30px;
          }
        }

        &.collapsable {
          background: #fff;
          border-radius: 3px;
          padding: 14px 0;
          @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .25));

          h4 {
            margin-bottom: 16px;
135 136 137 138 139 140 141 142 143 144 145 146
          }
        }

        &.multiple {

          a {
            @include inline-block;
            padding: 0;

            &:hover {
              background: transparent;
            }
147 148 149 150 151
          }
        }

        ul {
          background: none;
152
          margin: 0;
153 154 155

          li {
            border-bottom: 0;
156 157 158 159
            border-top: 1px solid #e6e6e6;
            font-size: 0.9em;
            margin: 0;
            padding: 15px 30px;
160 161 162 163 164 165 166 167 168

            a {
              @include inline-block;
              padding: 0;

              &:hover {
                background: transparent;
              }
            }
169 170 171 172
          }
        }

        div.hitarea {
173
          background-image: url('../images/treeview-default.gif') no-repeat;
174 175 176
          display: block;
          height: 100%;
          margin-left: 0;
177
          max-height: 20px;
178 179 180 181 182 183
          position: absolute;
          width: 100%;

          &:hover {
            opacity: 0.6;
            filter: alpha(opacity=60);
184 185

            + h4 {
186 187
              @extend a:hover;
              text-decoration: underline;
188
            }
189 190 191
          }

          &.expandable-hitarea {
192
            background-position: -72px 0px;
193 194 195
          }

          &.collapsable-hitarea {
196
            background-position: -55px -23px;
197 198 199 200 201 202
          }
        }

        h3 {
          border-bottom: 0;
          @include box-shadow(none);
203
          color: #888;
204
          font-size: 1em;
205
          margin-bottom: 0;
206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234
        }

        p {
          letter-spacing: 0;
          margin: 0;
          text-transform: none;

          a {
            padding-right: 8px;

            &:before {
              color: #ccc;
              content: "•";
              @include inline-block();
              padding-right: 8px;
            }

            &:first-child {
              &:before {
                content: "";
                padding-right: 0;
              }
            }
          }
        }
      }
    }
  }
}