github.com/tarrant/terraform@v0.3.8-0.20150402012457-f68c9eee638e/website/source/assets/stylesheets/_docs.scss (about)

     1  //
     2  // Docs
     3  // --------------------------------------------------
     4  
     5  body.page-sub{
     6  	background-color: $light-black;
     7  }
     8  
     9  body.layout-atlas,
    10  body.layout-consul,
    11  body.layout-dnsimple,
    12  body.layout-dme,
    13  body.layout-docker,
    14  body.layout-cloudflare,
    15  body.layout-cloudstack,
    16  body.layout-google,
    17  body.layout-heroku,
    18  body.layout-mailgun,
    19  body.layout-digitalocean,
    20  body.layout-aws,
    21  body.layout-docs,
    22  body.layout-inner,
    23  body.layout-downloads,
    24  body.layout-intro{
    25  	background: $light-black image-url('sidebar-wire.png') left 62px no-repeat;
    26  
    27  	>.container{
    28  		.col-md-8[role=main]{
    29  			min-height: 800px;
    30  			background-color: white;
    31  
    32  			>div{
    33  				position: relative;
    34  				z-index: 10;
    35  			}
    36  		}
    37  	}
    38  }
    39  
    40  .docs-sidebar{
    41    position: relative;
    42    z-index: 20;
    43    margin-bottom: 30px;
    44  	margin-top: 50px;
    45  	margin-right: 4%;
    46  
    47  	a{
    48  			color: $purple;
    49  	}
    50  
    51  	.docs-sidenav{
    52  		padding-top: 15px;
    53  		padding-bottom: 15px;
    54  
    55  		:last-child{
    56  			border-bottom: none;
    57  		}
    58  
    59  		//all li > a
    60  		li{
    61  			position: relative;
    62  
    63  			> a{
    64  				color: white;
    65  				@include transition( color 0.5s ease );
    66  			}
    67  
    68  			> a:hover,
    69  			> a:focus {
    70  				background-color: transparent !important;
    71  				color: white;
    72  				@include transition( color 0.5s ease );
    73  			}
    74  		}
    75  
    76  
    77  		> li {
    78  			padding: 10px 0;
    79  			margin: 0 30px;
    80  
    81  			>.nav{
    82  				li{
    83  					a{
    84  						color: white;
    85  					}
    86  				}
    87  			}
    88  
    89  			&.active {
    90  				>a{
    91            color: lighten($purple, 4%);
    92  					font-weight: 500;
    93  				}
    94  
    95  				&:before{
    96  					content: '';
    97  					position: absolute;
    98            width: 6px;
    99            height: 8px;
   100            background-color: $purple;
   101            font-weight: 500;
   102            @include skewY(24deg);
   103  					top: 26px;
   104  					left: -10px;
   105  				}
   106  				> a{
   107            -webkit-font-smoothing: antialiased;
   108  				}
   109  
   110  				/*> a:hover,
   111  				> a:focus {
   112  					font-weight: $font-weight-lato-xb;
   113  				}*/
   114  
   115  				.nav {
   116  					display: block;
   117  
   118            li.active a {
   119              color: lighten($purple, 4%);
   120  						font-weight: 500;
   121            }
   122  				}
   123  			}
   124  
   125  			> a {
   126  				text-transform: uppercase;
   127          -webkit-font-smoothing: antialiased;
   128  			}
   129  		}
   130  
   131  		.nav {
   132  			display: none;
   133  			margin-bottom: 15px;
   134  
   135  			> li{
   136  				margin-left: 20px;
   137  
   138  				> a{
   139            -webkit-font-smoothing: antialiased;
   140  					padding: 6px 15px;
   141  				}
   142  			}
   143  		}
   144  
   145          .nav-visible {
   146              display: block;
   147          }
   148  	}
   149  }
   150  
   151  
   152  .bs-docs-section{
   153  	padding-top: 10px;
   154  	padding-left: 3%;
   155  	padding-bottom: 80px;
   156  
   157  	.lead{
   158  		margin-bottom: 48px
   159  	}
   160  
   161  	.doc-sectional{
   162  		margin-bottom: 48px;
   163  	}
   164  
   165  	p, li, .alert {
   166  		font-size: 20px;
   167  		font-family: $font-family-open-sans;
   168  		font-weight: $font-weight-open;
   169      line-height: 1.5em;
   170  		margin: 0 0 18px;
   171      -webkit-font-smoothing: antialiased;
   172  	}
   173  
   174      pre{
   175          margin: 0 0 18px;
   176      }
   177  
   178  	a{
   179  		color: $purple;
   180  		&:hover{
   181  			text-decoration: underline;
   182  		}
   183  	}
   184  
   185      img{
   186          max-width: 650px;
   187          margin-top: 25px;
   188          margin-bottom: 25px;
   189      }
   190  
   191  	h1{
   192  		color: $purple;
   193  		text-transform: uppercase;
   194  		padding-bottom: 24px;
   195      margin-top: 40px;
   196  		margin-bottom: 24px;
   197      border-bottom: 1px solid #eeeeee;
   198      @include lato-light();
   199  	}
   200  
   201  	h2, h3, h4{
   202  		margin-bottom: 16px;
   203  	}
   204  
   205      #graph {
   206          margin-top: 30px;
   207      }
   208  }
   209  
   210  
   211  @media (max-width: 992px) {
   212  	body.layout-docs,
   213  	body.layout-inner,
   214  	body.layout-intro{
   215  		>.container{
   216  			.col-md-8[role=main]{
   217  				min-height: 0;
   218  				&::before {
   219  					border-left: 9999px solid white;
   220  				}
   221  			}
   222  		}
   223  	}
   224  
   225    body.page-sub{
   226      >.container{
   227        background-color: white;
   228      }
   229    }
   230  
   231    .docs-sidebar{
   232      margin-top: 0px;
   233      margin-bottom: 0px;
   234  
   235      .docs-sidenav{
   236        padding-bottom: 0;
   237  
   238        //all li > a
   239        li{
   240          > a{
   241            color: black;
   242            @include transition( color 0.5s ease );
   243          }
   244  
   245          > a:hover,
   246          > a:focus {
   247            color: $purple;
   248            @include transition( color 0.5s ease );
   249          }
   250        }
   251  
   252  
   253        > li {
   254          >.nav{
   255            li{
   256              a{
   257                color: black;
   258  
   259                &:hover{
   260                  color: $purple;
   261                }
   262              }
   263            }
   264          }
   265        }
   266      }
   267    }
   268  
   269    .bs-docs-section{
   270      h1{
   271        padding-top: 24px;
   272        border-top: 1px solid #eeeeee;
   273      }
   274    }
   275  }
   276  
   277  @media (max-width: 480px) {
   278  	.bs-docs-section{
   279          img{
   280              max-width: 450px;
   281          }
   282  
   283  		h1{
   284  			font-size: 32px;
   285  		}
   286  	}
   287  }
   288