github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/themes/default/globals/site.variables (about) 1 /******************************* 2 Site Settings 3 *******************************/ 4 5 /*------------------- 6 Fonts 7 --------------------*/ 8 9 @headerFont : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; 10 @pageFont : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; 11 @fontSmoothing : antialiased; 12 13 @importGoogleFonts : true; 14 @googleFontName : 'Lato'; 15 @googleFontSizes : '400,700,400italic,700italic'; 16 @googleSubset : 'latin'; 17 18 @googleProtocol : 'https://'; 19 @googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}'; 20 21 /*------------------- 22 Base Sizes 23 --------------------*/ 24 25 @emSize : 14px; 26 @fontSize : 14px; 27 28 /*-------------- 29 Page Heading 30 ---------------*/ 31 32 @headerFontWeight : bold; 33 @headerLineHeight : 1.33em; 34 35 @h1 : 2rem; 36 @h2 : 1.714rem; 37 @h3 : 1.28rem; 38 @h4 : 1.071rem; 39 @h5 : 1rem; 40 41 /*------------------- 42 Site Colors 43 --------------------*/ 44 45 /*--- Colors ---*/ 46 @black : #1B1C1D; 47 @blue : #3B83C0; 48 @green : #5BBD72; 49 @grey : #CCCCCC; 50 @orange : #E07B53; 51 @pink : #D9499A; 52 @purple : #564F8A; 53 @red : #D95C5C; 54 @teal : #00B5AD; 55 @yellow : #F2C61F; 56 57 /*--- Light Colors ---*/ 58 @lightBlack : #333333; 59 @lightBlue : #54C8FF; 60 @lightGreen : #2ECC40; 61 @lightOrange : #FF851B; 62 @lightPink : #FF8EDF; 63 @lightPurple : #CDC6FF; 64 @lightRed : #FF695E; 65 @lightTeal : #6DFFFF; 66 @lightYellow : #FFE21F; 67 68 /*--- Neutrals ---*/ 69 @fullBlack : #000000; 70 @darkGrey : #AAAAAA; 71 @lightGrey : #DCDDDE; 72 @offWhite : #FAFAFA; 73 @darkWhite : #F0F0F0; 74 @white : #FFFFFF; 75 76 /*------------------- 77 Brand Colors 78 --------------------*/ 79 80 @primaryColor : @blue; 81 @secondaryColor : @black; 82 83 @lightPrimaryColor : @lightBlue; 84 @lightSecondaryColor : @lightBlack; 85 86 /*------------------- 87 Sizes 88 --------------------*/ 89 90 /* 91 To have sizing resolve to a specified pixel values adjust 92 the numerator to the desired font size and the denominator 93 to the base em size 94 */ 95 96 @miniSize : (10 / 14); 97 @tinySize : (12 / 14); 98 @smallSize : (13 / 14); 99 @mediumSize : (14 / 14); 100 @largeSize : (16 / 14); 101 @bigSize : (18 / 14); 102 @hugeSize : (20 / 14); 103 @massiveSize : (24 / 14); 104 105 /*------------------- 106 Page 107 --------------------*/ 108 109 @pageBackground : #F7F7F7; 110 @pageOverflowX : hidden; 111 112 @lineHeight : 1.33; 113 @textColor : rgba(0, 0, 0, 0.8); 114 115 /*------------------- 116 Paragraph 117 --------------------*/ 118 119 @paragraphMargin : 0em 0em 1em; 120 @paragraphLineHeight : @lineHeight; 121 122 /*------------------- 123 Links 124 --------------------*/ 125 126 @linkColor : #009FDA; 127 @linkUnderline : none; 128 @linkHoverColor : lighten(@linkColor, 5); 129 130 /*------------------- 131 Highlighted Text 132 --------------------*/ 133 134 @highlightBackground : #CCE2FF; 135 @highlightColor : @textColor; 136 137 @inputHighlightBackground : rgba(100, 100, 100, 0.4); 138 @inputHighlightColor : @textColor; 139 140 /*------------------- 141 Loader 142 --------------------*/ 143 144 @loaderSpeed: 0.6s; 145 @loaderLineWidth: 0.2em; 146 @loaderFillColor: rgba(0, 0, 0, 0.1); 147 @loaderLineColor: @darkGrey; 148 149 @invertedLoaderFillColor: rgba(255, 255, 255, 0.15); 150 @invertedLoaderLineColor: @white; 151 152 /*------------------- 153 Grid 154 --------------------*/ 155 156 @columnCount: 16; 157 158 /*------------------- 159 Breakpoints 160 --------------------*/ 161 162 @mobileBreakpoint : 320px; 163 @tabletBreakpoint : 768px; 164 @computerBreakpoint : 992px; 165 @largeMonitorBreakpoint : 1400px; 166 @widescreenMonitorBreakpoint : 1920px; 167 168 /*------------------- 169 Alpha Colors 170 --------------------*/ 171 172 @subtleTransparentBlack : rgba(0, 0, 0, 0.03); 173 @transparentBlack : rgba(0, 0, 0, 0.05); 174 @strongTransparentBlack : rgba(0, 0, 0, 0.10); 175 176 @subtleTransparentWhite : rgba(255, 255, 255, 0.02); 177 @transparentWhite : rgba(255, 255, 255, 0.05); 178 @strongTransparentWhite : rgba(255, 255, 255, 0.07); 179 180 /*------------------- 181 Accents 182 --------------------*/ 183 184 /* 4px @ default em */ 185 @relativeBorderRadius: 0.2857em; 186 @absoluteBorderRadius: 0.2857rem; 187 @defaultBorderRadius: @absoluteBorderRadius; 188 189 /* Differentiating Neutrals */ 190 @subtleGradient: linear-gradient(transparent, @transparentBlack); 191 192 /* Differentiating Layers */ 193 @subtleShadow: 0px 1px 2px 0 @transparentBlack; 194 195 196 /******************************* 197 Power-User 198 *******************************/ 199 200 /*------------------- 201 Paths 202 --------------------*/ 203 204 /* For source only. Modified in gulp for dist */ 205 @imagePath : '../../themes/default/assets/images'; 206 @fontPath : '../../themes/default/assets/fonts'; 207 208 /*------------------- 209 Em Sizes 210 --------------------*/ 211 212 /* Exact pixel values expressed in em */ 213 @mini : unit( round(@miniSize * @emSize) / @emSize, rem); 214 @tiny : unit( round(@tinySize * @emSize) / @emSize, rem); 215 @small : unit( round(@smallSize * @emSize) / @emSize, rem); 216 @medium : unit( round(@mediumSize * @emSize) / @emSize, rem); 217 @large : unit( round(@largeSize * @emSize) / @emSize, rem); 218 @big : unit( round(@bigSize * @emSize) / @emSize, rem); 219 @huge : unit( round(@hugeSize * @emSize) / @emSize, rem); 220 @massive : unit( round(@massiveSize * @emSize) / @emSize, rem); 221 222 @relativeMini : unit( round(@miniSize * @emSize) / @emSize, em); 223 @relativeTiny : unit( round(@tinySize * @emSize) / @emSize, em); 224 @relativeSmall : unit( round(@smallSize * @emSize) / @emSize, em); 225 @relativeMedium : unit( round(@mediumSize * @emSize) / @emSize, em); 226 @relativeLarge : unit( round(@largeSize * @emSize) / @emSize, em); 227 @relativeBig : unit( round(@bigSize * @emSize) / @emSize, em); 228 @relativeHuge : unit( round(@hugeSize * @emSize) / @emSize, em); 229 @relativeMassive : unit( round(@massiveSize * @emSize) / @emSize, em); 230 231 /*------------------- 232 Icons 233 --------------------*/ 234 235 /* Maximum Glyph Width of Icon */ 236 @iconWidth : 1.18em; 237 238 /*------------------- 239 Easing 240 --------------------*/ 241 242 @defaultEasing: ease; 243 244 /*------------------- 245 All Colors 246 --------------------*/ 247 248 /*--- Colored Backgrounds ---*/ 249 @blueBackground : #DFF0FF; 250 @greenBackground : #EBFFED; 251 @orangeBackground : #FFEDDE; 252 @pinkBackground : #FFE3FB; 253 @purpleBackground : #EAE7FF; 254 @redBackground : #FFE8E6; 255 @tealBackground : #E9FFFF; 256 @yellowBackground : #FFF8DB; 257 258 /*--- Colored Text ---*/ 259 @blueTextColor : @blue; 260 @orangeTextColor : @orange; 261 @pinkTextColor : @pink; 262 @purpleTextColor : @purple; 263 @redTextColor : @red; 264 @greenTextColor : #1EBC30; // Green is difficult to read 265 @tealTextColor : #10A3A3; // Teal text is difficult to read 266 @yellowTextColor : #B58105; // Yellow text is difficult to read 267 268 /*--- Colored Headers ---*/ 269 @blueHeaderColor : darken(@blueTextColor, 5); 270 @greenHeaderColor : darken(@greenTextColor, 5); 271 @orangeHeaderColor : darken(@orangeTextColor, 5); 272 @pinkHeaderColor : darken(@pinkTextColor, 5); 273 @purpleHeaderColor : darken(@purpleTextColor, 5); 274 @redHeaderColor : darken(@redTextColor, 5); 275 @tealHeaderColor : darken(@tealTextColor, 5); 276 @yellowHeaderColor : darken(@yellowTextColor, 5); 277 278 279 /*------------------- 280 Emotive Colors 281 --------------------*/ 282 283 /* Positive */ 284 @positiveColor : @green; 285 @positiveBackgroundColor : #EEFFE7; 286 @positiveBorderColor : #B7CAA7; 287 @positiveHeaderColor : #356E36; 288 @positiveTextColor : #3C763D; 289 290 /* Negative */ 291 @negativeColor : @red; 292 @negativeBackgroundColor : #FFF0F0; 293 @negativeBorderColor : #DBB1B1; 294 @negativeHeaderColor : #912D2B; 295 @negativeTextColor : #A94442; 296 297 /* Info */ 298 @infoColor : #31CCEC; 299 @infoBackgroundColor : #E9FAFF; 300 @infoBorderColor : #AAD6DF; 301 @infoHeaderColor : #297187; 302 @infoTextColor : #337B92; 303 304 /* Warning */ 305 @warningColor : #F2C037; 306 @warningBorderColor : #D9CAAB; 307 @warningBackgroundColor : #FFFBE6; 308 @warningHeaderColor : #825C01; 309 @warningTextColor : #876A38; 310 311 312 /*------------------- 313 Neutral Text 314 --------------------*/ 315 316 @darkTextColor : rgba(0, 0, 0, 0.85); 317 @lightTextColor : rgba(0, 0, 0, 0.4); 318 319 @unselectedTextColor : rgba(0, 0, 0, 0.4); 320 @hoveredTextColor : rgba(0, 0, 0, 0.8); 321 @pressedTextColor : rgba(0, 0, 0, 0.8); 322 @selectedTextColor : rgba(0, 0, 0, 0.8); 323 @disabledTextColor : rgba(0, 0, 0, 0.2); 324 325 @invertedTextColor : rgba(255, 255, 255, 1); 326 @invertedLightTextColor : rgba(255, 255, 255, 0.8); 327 @invertedUnselectedTextColor : rgba(255, 255, 255, 0.5); 328 @invertedHoveredTextColor : rgba(255, 255, 255, 1); 329 @invertedPressedTextColor : rgba(255, 255, 255, 1); 330 @invertedSelectedTextColor : rgba(255, 255, 255, 1); 331 @invertedDisabledTextColor : rgba(255, 255, 255, 0.2); 332 333 /*------------------- 334 Brand Colors 335 --------------------*/ 336 337 @facebookColor : #3B579D; 338 @twitterColor : #4092CC; 339 @googlePlusColor : #D34836; 340 @linkedInColor : #1F88BE; 341 @youtubeColor : #CC181E; 342 @instagramColor : #49769C; 343 @pinterestColor : #00ACED; 344 @vkColor : #4D7198; 345 346 /*------------------- 347 Borders 348 --------------------*/ 349 350 @circularRadius : 500rem; 351 352 @borderColor : rgba(39, 41, 43, 0.15); 353 @selectedBorderColor : rgba(39, 41, 43, 0.3); 354 @disabledBorderColor : rgba(39, 41, 43, 0.5); 355 356 @solidBorderColor : #D4D4D5; 357 @solidSelectedBorderColor : #BEBEBF; 358 359 @whiteBorderColor : rgba(255, 255, 255, 0.2); 360 @selectedWhiteBorderColor : rgba(255, 255, 255, 0.8); 361 362 @solidWhiteBorderColor : #555555; 363 @selectedSolidWhiteBorderColor : #999999; 364 365 366 /*------------------- 367 Transitions 368 --------------------*/ 369 370 @transitionDuration : 0.2s; 371 @transitionEasing : ease; 372 373 /*------------------- 374 Derived Values 375 --------------------*/ 376 377 /* Rendered Scrollbar Width */ 378 @scrollbarWidth: 15px; 379 380 /* Used to match floats with text */ 381 @lineHeightOffset : ((@lineHeight - 1em) / 2); 382 @headerLineHeightOffset : (@headerLineHeight - 1em) / 2; 383 384 /* Header Spacing */ 385 @headerTopMargin : ~"calc(2rem - "@headerLineHeightOffset~")"; 386 @headerBottomMargin : 1rem; 387 @headerMargin : @headerTopMargin 0em @headerBottomMargin; 388 389 /* Minimum Mobile Width */ 390 @pageMinWidth : 320px; 391 392 /* Positive / Negative Dupes */ 393 @successColor : @positiveColor; 394 @errorColor : @negativeColor; 395 @successBackgroundColor : @positiveBackgroundColor; 396 @errorBackgroundColor : @negativeBackgroundColor; 397 @successTextColor : @positiveTextColor; 398 @errorTextColor : @negativeTextColor; 399 @successBorderColor : @positiveBorderColor; 400 @errorBorderColor : @negativeBorderColor; 401 @successHeaderColor : @positiveHeaderColor; 402 @errorHeaderColor : @negativeHeaderColor; 403 404 /* Responsive */ 405 @largestMobileScreen : (@tabletBreakpoint - 1px); 406 @largestTabletScreen : (@computerBreakpoint - 1px); 407 @largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px); 408 409 /* Columns */ 410 @oneWide : (1 / @columnCount * 100%); 411 @twoWide : (2 / @columnCount * 100%); 412 @threeWide : (3 / @columnCount * 100%); 413 @fourWide : (4 / @columnCount * 100%); 414 @fiveWide : (5 / @columnCount * 100%); 415 @sixWide : (6 / @columnCount * 100%); 416 @sevenWide : (7 / @columnCount * 100%); 417 @eightWide : (8 / @columnCount * 100%); 418 @nineWide : (9 / @columnCount * 100%); 419 @tenWide : (10 / @columnCount * 100%); 420 @elevenWide : (11 / @columnCount * 100%); 421 @twelveWide : (12 / @columnCount * 100%); 422 @thirteenWide : (13 / @columnCount * 100%); 423 @fourteenWide : (14 / @columnCount * 100%); 424 @fifteenWide : (15 / @columnCount * 100%); 425 @sixteenWide : (16 / @columnCount * 100%); 426 427 @oneColumn : (1 / 1 * 100%); 428 @twoColumn : (1 / 2 * 100%); 429 @threeColumn : (1 / 3 * 100%); 430 @fourColumn : (1 / 4 * 100%); 431 @fiveColumn : (1 / 5 * 100%); 432 @sixColumn : (1 / 6 * 100%); 433 @sevenColumn : (1 / 7 * 100%); 434 @eightColumn : (1 / 8 * 100%); 435 @nineColumn : (1 / 9 * 100%); 436 @tenColumn : (1 / 10 * 100%); 437 @elevenColumn : (1 / 11 * 100%); 438 @twelveColumn : (1 / 12 * 100%); 439 @thirteenColumn : (1 / 13 * 100%); 440 @fourteenColumn : (1 / 14 * 100%); 441 @fifteenColumn : (1 / 15 * 100%); 442 @sixteenColumn : (1 / 16 * 100%); 443 444 445 /******************************* 446 States 447 *******************************/ 448 449 /*------------------- 450 Disabled 451 --------------------*/ 452 453 @disabledOpacity: 0.3; 454 @disabledTextColor: rgba(40, 40, 40, 0.3); 455 @invertedDisabledTextColor: rgba(225, 225, 225, 0.3); 456 457 /*------------------- 458 Hover 459 --------------------*/ 460 461 /*--- Colors ---*/ 462 @primaryColorHover : lighten(@primaryColor, 3); 463 @secondaryColorHover : lighten(@secondaryColor, 3); 464 465 @blueHover : lighten(@blue, 3); 466 @greenHover : lighten(@green, 3); 467 @orangeHover : lighten(@orange, 3); 468 @pinkHover : lighten(@pink, 3); 469 @purpleHover : lighten(@purple, 3); 470 @redHover : lighten(@red, 3); 471 @tealHover : lighten(@teal, 3); 472 @yellowHover : lighten(@yellow, 3); 473 474 @lightBlueHover : lighten(@lightBlue, 3); 475 @lightGreenHover : lighten(@lightGreen, 3); 476 @lightOrangeHover : lighten(@lightOrange, 3); 477 @lightPinkHover : lighten(@lightPink, 3); 478 @lightPurpleHover : lighten(@lightPurple, 3); 479 @lightRedHover : lighten(@lightRed, 3); 480 @lightTealHover : lighten(@lightTeal, 3); 481 @lightYellowHover : lighten(@lightYellow, 3); 482 483 /*--- Emotive ---*/ 484 @positiveColorHover : lighten(@positiveColor, 3); 485 @negativeColorHover : lighten(@negativeColor, 3); 486 487 /*--- Neutrals ---*/ 488 @fullBlackHover : lighten(@fullBlack, 3); 489 @blackHover : @black; 490 491 @lightGreyHover : lighten(@lightGrey, 3); 492 @greyHover : lighten(@grey, 3); 493 @darkGreyHover : lighten(@darkGrey, 3); 494 495 @whiteHover : lighten(@white, 3); 496 @offWhiteHover : lighten(@offWhite, 3); 497 @darkWhiteHover : lighten(@darkWhite, 3); 498 499 @facebookHoverColor : lighten(@facebookColor, 3); 500 @twitterHoverColor : lighten(@twitterColor, 3); 501 @googlePlusHoverColor : lighten(@googlePlusColor, 3); 502 @linkedInHoverColor : lighten(@linkedInColor, 3); 503 @youtubeHoverColor : lighten(@youtubeColor, 3); 504 @instagramHoverColor : lighten(@instagramColor, 3); 505 @pinterestHoverColor : lighten(@pinterestColor, 3); 506 @vkHoverColor : lighten(@vkColor, 3); 507 508 509 /*------------------- 510 Down (:active) 511 --------------------*/ 512 513 514 /*--- Colors ---*/ 515 @primaryColorDown : darken(@primaryColor, 7); 516 @secondaryColorDown : darken(@secondaryColor, 7); 517 518 @blueDown : darken(@blue, 7); 519 @greenDown : darken(@green, 7); 520 @orangeDown : darken(@orange, 7); 521 @pinkDown : darken(@pink, 7); 522 @purpleDown : darken(@purple, 7); 523 @redDown : darken(@red, 7); 524 @tealDown : darken(@teal, 7); 525 @yellowDown : darken(@yellow, 7); 526 527 @lightBlueDown : darken(@lightBlue, 7); 528 @lightGreenDown : darken(@lightGreen, 7); 529 @lightOrangeDown : darken(@lightOrange, 7); 530 @lightPinkDown : darken(@lightPink, 7); 531 @lightPurpleDown : darken(@lightPurple, 7); 532 @lightRedDown : darken(@lightRed, 7); 533 @lightTealDown : darken(@lightTeal, 7); 534 @lightYellowDown : darken(@lightYellow, 7); 535 536 /*--- Emotive ---*/ 537 @positiveColorDown : darken(@positiveColor, 7); 538 @negativeColorDown : darken(@negativeColor, 7); 539 540 /*--- Neutrals ---*/ 541 @fullBlackDown : darken(@fullBlack, 7); 542 @blackDown : darken(@black, 7); 543 @lightBlackDown : darken(@lightBlack, 7); 544 545 @lightGreyDown : darken(@lightGrey, 7); 546 @greyDown : darken(@grey, 7); 547 @darkGreyDown : darken(@darkGrey, 7); 548 549 @whiteDown : darken(@white, 7); 550 @offWhiteDown : darken(@offWhite, 7); 551 @darkWhiteDown : darken(@darkWhite, 7); 552 553 @facebookDownColor : darken(@facebookColor, 7); 554 @twitterDownColor : darken(@twitterColor, 7); 555 @googlePlusDownColor : darken(@googlePlusColor, 7); 556 @linkedInDownColor : darken(@linkedInColor, 7); 557 @youtubeDownColor : darken(@youtubeColor, 7); 558 @instagramDownColor : darken(@instagramColor, 7); 559 @pinterestDownColor : darken(@pinterestColor, 7); 560 @vkDownColor : darken(@vkColor, 7); 561 562 563 /*------------------- 564 Active 565 --------------------*/ 566 567 /*--- Standard ---*/ 568 @primaryColorActive : darken(@primaryColor, 5); 569 @secondaryColorActive : darken(@secondaryColor, 5); 570 571 @blueActive : darken(@blue, 5); 572 @greenActive : darken(@green, 5); 573 @orangeActive : darken(@orange, 5); 574 @pinkActive : darken(@pink, 5); 575 @purpleActive : darken(@purple, 5); 576 @redActive : darken(@red, 5); 577 @tealActive : darken(@teal, 5); 578 @yellowActive : darken(@yellow, 5); 579 580 @lightBlueActive : darken(@lightBlue, 5); 581 @lightGreenActive : darken(@lightGreen, 5); 582 @lightOrangeActive : darken(@lightOrange, 5); 583 @lightPinkActive : darken(@lightPink, 5); 584 @lightPurpleActive : darken(@lightPurple, 5); 585 @lightRedActive : darken(@lightRed, 5); 586 @lightTealActive : darken(@lightTeal, 5); 587 @lightYellowActive : darken(@lightYellow, 5); 588 589 /*--- Emotive ---*/ 590 @positiveColorActive : darken(@positiveColor, 5); 591 @negativeColorActive : darken(@negativeColor, 5); 592 593 /*--- Neutrals ---*/ 594 @fullBlackActive : darken(@fullBlack, 5); 595 @blackActive : darken(@black, 5); 596 @lightBlackActive : darken(@lightBlack, 5); 597 598 @lightGreyActive : darken(@lightGrey, 5); 599 @greyActive : darken(@grey, 5); 600 @darkGreyActive : darken(@darkGrey, 5); 601 602 @whiteActive : darken(@white, 5); 603 @offWhiteActive : darken(@offWhite, 5); 604 @darkWhiteActive : darken(@darkWhite, 5); 605 606 @facebookActiveColor : darken(@facebookColor, 5); 607 @twitterActiveColor : darken(@twitterColor, 5); 608 @googlePlusActiveColor : darken(@googlePlusColor, 5); 609 @linkedInActiveColor : darken(@linkedInColor, 5); 610 @youtubeActiveColor : darken(@youtubeColor, 5); 611 @instagramActiveColor : darken(@instagramColor, 5); 612 @pinterestActiveColor : darken(@pinterestColor, 5); 613 @vkActiveColor : darken(@vkColor, 5);