ui: remove `:visited` color change for nav links (#892)
Test Plan: Note that the nav links are now a lighter color, except when `:active` (e.g., when you’re holding down the mouse button). wchargin-branch: remove-visited
This commit is contained in:
parent
a7f29cb057
commit
a5e0707cb9
|
@ -0,0 +1,21 @@
|
|||
// @flow
|
||||
|
||||
export type HexColor = string;
|
||||
|
||||
export default (Object.freeze({
|
||||
brand: Object.freeze({
|
||||
medium: "#0872A2",
|
||||
dark: "#3A066A",
|
||||
}),
|
||||
accent: Object.freeze({
|
||||
medium: "#FF3201",
|
||||
}),
|
||||
}): {|
|
||||
+brand: {|
|
||||
+medium: HexColor,
|
||||
+dark: HexColor,
|
||||
|},
|
||||
+accent: {|
|
||||
+medium: HexColor,
|
||||
|},
|
||||
|});
|
|
@ -4,6 +4,8 @@ import React, {Component} from "react";
|
|||
import {Link as RouterLink} from "react-router";
|
||||
import {StyleSheet, css} from "aphrodite/no-important";
|
||||
|
||||
import Colors from "./Colors";
|
||||
|
||||
/**
|
||||
* A styled link component for both client-side router links and normal
|
||||
* external links.
|
||||
|
@ -47,12 +49,12 @@ const colorAttributes = (color) => ({
|
|||
});
|
||||
const styles = StyleSheet.create({
|
||||
link: {
|
||||
...colorAttributes("#0872A2"),
|
||||
...colorAttributes(Colors.brand.medium),
|
||||
":visited": {
|
||||
...colorAttributes("#3A066A"),
|
||||
...colorAttributes(Colors.brand.dark),
|
||||
},
|
||||
":active": {
|
||||
...colorAttributes("#FF3201"),
|
||||
...colorAttributes(Colors.accent.medium),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
@ -4,6 +4,7 @@ import React, {type Node} from "react";
|
|||
import {StyleSheet, css} from "aphrodite/no-important";
|
||||
|
||||
import type {Assets} from "./assets";
|
||||
import Colors from "./Colors";
|
||||
import Link from "./Link";
|
||||
import GithubLogo from "./GithubLogo";
|
||||
import TwitterLogo from "./TwitterLogo";
|
||||
|
@ -134,6 +135,10 @@ const style = StyleSheet.create({
|
|||
":hover": {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
":visited:not(:active)": {
|
||||
color: Colors.brand.medium,
|
||||
fill: Colors.brand.medium, // for SVG icons
|
||||
},
|
||||
},
|
||||
navItemLeft: {
|
||||
flex: 1,
|
||||
|
|
Loading…
Reference in New Issue