diff --git a/package.json b/package.json index 30a317b2..12e24690 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "vue-popperjs": "^2.0.3", "vue-router": "^3.0.1", "vue-template-compiler": "^2.3.4", - "vue-timeago": "^3.1.2", "vuelidate": "^0.7.4", "vuex": "^3.0.1", "whatwg-fetch": "^2.0.3" diff --git a/src/App.scss b/src/App.scss index 52a786ad..cc00ec31 100644 --- a/src/App.scss +++ b/src/App.scss @@ -182,7 +182,43 @@ input, textarea, .select { flex: 1; } - &[type=radio], + &[type=radio] { + display: none; + &:checked + label::before { + box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset; + box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset; + background-color: var(--link, $fallback--link); + } + &:disabled { + &, + & + label, + & + label::before { + opacity: .5; + } + } + + label::before { + display: inline-block; + content: ''; + transition: box-shadow 200ms; + width: 1.1em; + height: 1.1em; + border-radius: 100%; // Radio buttons should always be circle + box-shadow: 0px 0px 2px black inset; + box-shadow: var(--inputShadow); + margin-right: .5em; + background-color: $fallback--fg; + background-color: var(--input, $fallback--fg); + vertical-align: top; + text-align: center; + line-height: 1.1em; + font-size: 1.1em; + box-sizing: border-box; + color: transparent; + overflow: hidden; + box-sizing: border-box; + } + } + &[type=checkbox] { display: none; &:checked + label::before { diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index e59e7497..896c6d52 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -1,6 +1,7 @@ import Status from '../status/status.vue' import UserAvatar from '../user_avatar/user_avatar.vue' import UserCard from '../user_card/user_card.vue' +import Timeago from '../timeago/timeago.vue' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' @@ -13,7 +14,10 @@ const Notification = { }, props: [ 'notification' ], components: { - Status, UserAvatar, UserCard + Status, + UserAvatar, + UserCard, + Timeago }, methods: { toggleUserExpanded () { diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 3427b9c5..5ad365ad 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -30,12 +30,12 @@