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