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