dlux-web/src/less/main.less

   1 /**\r
   2  * This is the main application stylesheet. It should include or import all\r
   3  * stylesheets used throughout the application as this is the only stylesheet in\r
   4  * the Grunt configuration that is automatically processed.\r
   5  */\r
   6 \r
   7 \r
   8 /**\r
   9  * First, we include the Twitter Bootstrap LESS files. Only the ones used in the\r
  10  * project should be imported as the rest are just wasting space.\r
  11  */\r
  12 @import '../../vendor/bootstrap/less/mixins.less';\r
  13 @import '../../vendor/bootstrap/less/bootstrap.less';\r
  14 \r
  15 \r
  16 @import 'mixins.less'; /** this one comes from the template */\r
  17 \r
  18 /**\r
  19  * This is our main variables file. It in turn imports the `variables` file from\r
  20  * Twitter Bootstrap. We must include it last so we can overwrite any variable\r
  21  * definitions in our imported stylesheets.\r
  22  */\r
  23 \r
  24 @import 'variables.less';\r
  25 \r
  26 \r
  27 /**\r
  28  * Typography\r
  29  */\r
  30 \r
  31 @font-face {\r
  32   font-family: 'Roboto';\r
  33   font-style: normal;\r
  34   font-weight: 400;\r
  35   src: local('Roboto Regular'), local('Roboto-Regular'), url(fonts/Roboto-Regular.woff) format('woff');\r
  36 }\r
  37 \r
  38 code, pre, .pre {\r
  39   padding: 5px;\r
  40   margin: 10px 0;\r
  41   background-color: #EFEFEF;\r
  42   border: 1px solid #DADADA;\r
  43  // .border-radius(3px);\r
  44 }\r
  45 \r
  46 code {\r
  47   padding: 0 3px;\r
  48 }\r
  49 \r
  50 pre {\r
  51   margin: 10px 0;\r
  52   padding: 5px;\r
  53 }\r
  54 \r
  55 .page-header {\r
  56   margin-top: 60px;\r
  57 \r
  58   &:first-child {\r
  59     margin-top: 20px;\r
  60   }\r
  61 }\r
  62 \r
  63 h2 {\r
  64   margin: 20px 0;\r
  65   color: #666;\r
  66 }\r
  67 \r
  68 \r
  69 /**\r
  70  * Navigation\r
  71  */\r
  72 \r
  73 \r
  74 \r
  75 /**\r
  76  * Footer\r
  77  */\r
  78 \r
  79 .footer {\r
  80   margin-top: 80px;\r
  81 \r
  82   .footer-inner {\r
  83     padding: 40px 0;\r
  84     border-top: 1px solid #DDD;\r
  85   }\r
  86 \r
  87   .social {\r
  88     float: right;\r
  89     margin: 0;\r
  90     list-style: none;\r
  91 \r
  92     li {\r
  93       float: left;\r
  94       margin-left: 20px;\r
  95 \r
  96       a, a:visited {\r
  97     //    color: @grayLight;\r
  98         text-decoration: none;\r
  99         font-size: 40px;\r
 100         .transition( 250ms ease-in-out );\r
 101 \r
 102         &:hover {\r
 103         //  color: @gray;\r
 104         }\r
 105       }\r
 106     }\r
 107   }\r
 108 }\r
 109 \r
 110 .remove-padding {\r
 111   padding: 0px !important;\r
 112 }\r
 113 \r
 114 \r
 115 /**\r
 116  * Now that all app-wide styles have been applied, we can load the styles for\r
 117  * all the submodules and components we are using. \r
 118  *\r
 119  * TODO: In a later version of this boilerplate, I'd like to automate this.\r
 120  */\r
 121 \r
 122 @import 'design.less';\r
 123 @import 'other.less';\r
 124 @import '../common/navigation/navigation.less';\r
 125 @import '../app/node/node.less';\r
 126 @import '../app/yangui/yangui.less';\r
 127 @import '../app/yangvisualizer/yangvisualizer.less';\r
 128 @import '../app/yangui/abn_tree.less';\r
 129 @import '../common/login/login.less';\r
 130 @import '../common/topbar/topbar.less';\r
 131 @import '../app/topology/topology.less';\r