_textbook.scss 3.9 KB
Newer Older
1
div.book-wrapper {
2
  @extend .table-wrapper;
3 4 5 6
  display: table;
  table-layout:  fixed;
  padding: 1em 8em; 

7

8 9 10 11
  #open_close_accordion {
    display: none;
  }

12
  section.book-sidebar {
13
    @extend .sidebar;
14
    @extend .tran;
15
    @include box-sizing(border-box);
16 17
    padding: 10px 0;
    border-radius: 3px 0 0 3px;
18 19 20
    border: 1px solid #ccc;
    border-right: none;
    width: 250px;
21

22
    ul#booknav {
23
      font-size: em(14);
24

25 26 27 28 29 30 31 32 33
      .chapter-number {
      }

      .chapter {
        float: left;
        width: 87%;
        line-height: 1.4em;
      }

34 35
      .page-number {
        float: right;
36
        width: 12%;
37
        font-size: .8em;
38 39
        line-height: 2.1em;
        text-align: right;
40
        color: #9a9a9a;
41 42
        opacity: 0;
        @include transition(opacity .15s);
43 44
      }

45
      li {
46
        background: none;
47
        border-bottom: 0;
48
        padding-left: lh();       
49 50 51

        a {
          padding: 0;
52
          @include clearfix;
53 54 55

          &:hover {
            background-color: transparent;
56 57 58 59

            .page-number {
              opacity: 1;
            }
60 61
          }
        }
62 63

        div.hitarea {
64
          background-image: url('../images/treeview-default.gif');
65
          
66 67 68 69 70
          position: relative;
          top: 4px;

          &:hover {
            filter: alpha(opacity=60);
71
            opacity: 0.6;
72 73 74 75 76
          }
        }

        ul {
          background: none;
77 78 79 80
          margin-top: lh(.25);
          padding-top: lh(.25);

          li {
81
            padding-bottom: 10px;
82
          }
83
        }
84
      }
85

86
      > li {
87 88
        padding: 5px 6px;
        margin: 0 16px 5px 25px;
89
      }
90
    }
91 92 93
  }

  section.book {
94
    @extend .content;
95 96
    padding: 0;
    width:76%;
97 98

    nav {
99
      @extend .clearfix;
100

101 102
      a {
        @extend .block-link;
Kyle Fiedler committed
103
        padding: 0 lh();
104 105
      }

106 107 108
      ul {
        @extend .clearfix;

109
        li {
110 111 112
          position: absolute;
          height: 100%;
          width: flex-grid(2, 8);
113
          z-index: 1;
114 115

          a {
116 117
            background-color: rgba(#000, .7);
            background-position: center;
118 119 120 121
            background-repeat: no-repeat;
            @include box-sizing(border-box);
            display: table;
            height: 100%;
122 123
            opacity: 0;
            filter: alpha(opacity=0);
124
            text-indent: -9999px;
125 126 127
            @include transition;
            vertical-align: middle;
            width: 100%;
128 129 130 131 132 133

            &:hover {
              opacity: 1;
              filter: alpha(opacity=100);
            }
          }
134

135
          &.last {
136
            left: 0;
137 138 139 140

            a {
              background-image: url('../images/textbook/textbook-left.png');
            }
141 142 143
          }

          &.next {
144
            right: 0;
145 146 147 148

            a {
              background-image: url('../images/textbook/textbook-right.png');
            }
149
          }
150

151 152
        }
      }
153 154 155

      &.bottom-nav {
        border-bottom: 0;
156 157
        margin-bottom: -(lh());
        margin-top: lh();
158
      }
159
    }
160

161
    section.page {
162
      border: 1px solid $border-color;
163
      background-color: #fff;
164 165
      position: relative;
      text-align: center;
166 167 168
      padding: lh();
      margin-right:10%;
      border-radius: 0 3px 3px 0;
169

170
      img {
171
        max-width: 100%;
172
      }
173 174 175

      div {
        text-align: left;
marco committed
176 177
      	line-height: 1.6em;
      	margin: 5px;
178 179 180 181
	
	.Paragraph, h2 {
	   margin-top: 10px;
	}	   
182
      }
183
    }
184
  }
185 186 187 188 189 190 191 192 193

  &.closed {
    section.book-sidebar {
      width: flex-grid(.6);

      header#open_close_accordion {
        padding: 0;

        a {
194
          background-image: url('../images/slide-right-icon.png');
195 196 197
        }

        h2 {
198
          padding: 0;
199 200 201 202 203 204
          visibility: hidden;
          width: 10px;
        }
      }

      ul#booknav {
205 206 207
        max-height: 100px;
        overflow: hidden;
        padding: 0;
208 209 210 211 212 213 214 215 216
        visibility: hidden;
        width: 10px;
      }
    }

    section.course-content {
      width: flex-grid(11.5) + flex-gutter();
    }
  }
217
}