~ihabunek/triglav

9e9d98fcfde4b068aae5959a8d0deb5d3f25f0e3 — Ivan Habunek 3 months ago 4dc358d 
Migrate scss files to tailwind
patch browse 
7 files changed, 111 insertions(+), 296 deletions(-)

D assets/css/_button.scss
D assets/css/_form.scss
D assets/css/_reset.scss
D assets/css/_utils.scss
A assets/css/app.css
D assets/css/app.scss
A assets/tailwind.config.js

D assets/css/_button.scss => assets/css/_button.scss +0 -38
@@ 1,38 0,0 @@
.button {
  align-items: center;
  background-color: whitesmoke;
  border-radius: 3px;
  border: 1px solid gray;
  color: black;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.9rem;
  height: 2.4rem;
  line-height: 1;
  margin-bottom: 1rem;
  padding: 0 1em;
  text-decoration: none;

  &:hover {
    background-color: Gainsboro;
  }

  &[disabled] {
    cursor: not-allowed;
  }
}

.button-group {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;

  .button {
    margin: 0;
    margin-right: 1px;
    margin-bottom: 1px;
    font-size: 0.9rem;
    flex: 0 0 auto;
  }
}


D assets/css/_form.scss => assets/css/_form.scss +0 -11
@@ 1,11 0,0 @@
form {
  margin-bottom: 1rem;
}

select {
  background-color: white;
  border-radius: 3px;
  border: 1px solid gray;
  height: 2.4rem;
  padding: 0 0.5rem;
}


D assets/css/_reset.scss => assets/css/_reset.scss +0 -40
@@ 1,40 0,0 @@
/* CSS reset from:  https://hankchizljaw.com/wrote/a-modern-css-reset/ */

/* Box sizing rules */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margin */
body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font: inherit;
}


D assets/css/_utils.scss => assets/css/_utils.scss +0 -22
@@ 1,22 0,0 @@
.tag { color: DimGray; white-space: nowrap; }

.no-margin { margin: 0; }
.no-wrap { white-space: nowrap; }
.inline-block { display: inline-block; }
.hidden { visibility: hidden; }
.w-full { width: 100%; }

.bg-red { background-color: rgba($red, 0.2); }
.bg-green { background-color: rgba($green, 0.2); }

.text-bold { font-weight: bold; }
.text-smaller { font-size: 0.9rem; }

.text-gray { color: DimGray; }
.text-red { color: $red; }
.text-green { color: $green; }

.text-left { text-align: left }
.text-center { text-align: center }
.text-right { text-align: right }
.text-justify { text-align: justify }


A assets/css/app.css => assets/css/app.css +95 -0
@@ 0,0 1,95 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  p { @apply mb-4; }
  a { @apply underline text-blue-800 }
  h1 { @apply text-2xl font-bold mb-4 }
  h2 { @apply text-xl font-bold mb-4 }
  h3 { @apply text-lg font-bold mb-4 }

  table { @apply border-collapse mb-4 }
  tbody > tr:hover { @apply bg-gray-100 }
  th, td { @apply px-2 py-1 align-top border-b border-gray-300 }
  th { @apply text-left bg-gray-100 }
  td.success { @apply bg-green-700/20 border-b border-green-700/60 }
  td.error { @apply bg-red-700/20 border-b border-red-700/60 }

  form { @apply mb-4 }
  select { @apply rounded h-10 }
}

@layer components {
  .container {
    max-width: 1280px;
    margin:  auto;
    padding: 1rem;
  }

  .container-wide {
    max-width: 100%;
    padding: 1rem;
  }

  .button {
    @apply inline-flex items-center rounded h-10 px-4 cursor-pointer;
    @apply bg-gray-100 border border-gray-500 text-black no-underline;
  }
  .button:hover { background-color: Gainsboro }
  .button[disabled] { cursor: not-allowed }

  .box {
    border: 1px solid black;
    border-radius: 3px;
    color: black;
    display: inline-block;
    padding: 0px 5px;
    text-decoration: none;
  }
  .box:hover { background-color: WhiteSmoke }

  .josm-remote {
    border: 1px solid black;
    border-radius: 3px;
    color: black;
    display: inline-block;
    padding: 0px 5px;
    text-decoration: none;
  }
  .josm-remote:hover { @apply bg-gray-200 }
  .josm-remote.success { @apply bg-green-700/20 }
  .josm-remote.error { @apply bg-red-700/20 }

  .callout {
    border: 1px solid gray;
    padding: 1rem;
    margin-bottom: 1rem;
    max-width: 800px;
    background-color: WhiteSmoke;
  }
  .callout > p:last-child { margin-bottom: 0 }
  .callout.error { @apply bg-red-700/20 }
  .callout.warning { @apply bg-orange-500/20 }
  .callout.success { @apply bg-green-700/20 }

  .tag { @apply text-gray-600 whitespace-nowrap }

  .osm-link { white-space: nowrap }
  .osm-link > img {
    display: inline-block;
    height: .8rem;
  }

  .icon {
    width: 1em;
    height: 1em;
    display: inline-block;
  }

  ul.breadcrumbs { @apply flex }
  ul.breadcrumbs > li:not(:first-child):before {
    @apply px-3 text-gray-500;
    content: ">";
  }
}


D assets/css/app.scss => assets/css/app.scss +0 -185
@@ 1,185 0,0 @@
// Palette
$red: FireBrick;
$orange: DarkOrange;
$green: ForestGreen;

@import "reset";
@import "button";
@import "form";
@import "utils";

html {
  font-family: monospace;
  font-size: 14px;
}

section + section {
  margin-top: 1rem;
}

hr {
  border-top: none;
  border-bottom: 1px solid LightGray;
  margin: 1rem 0;
}

p,
table,
h1, h2, h3, h4, h5 {
  margin-bottom:  1rem;
}

ul {
  margin: 0 0 1rem 0;
  padding: 0 0 0 1.5rem;
}

table {
  border-collapse: collapse;

  th, td {
    padding: 4px 8px;
    margin:  0;
    border-bottom: 1px solid LightGray;
    vertical-align: top;
  }

  td.success {
    background-color: rgba($green, 0.2);
    border-bottom: 1px solid rgba($green, 0.4);
  }

  td.error {
    background-color: rgba($red, 0.2);
    border-bottom: 1px solid rgba($red, 0.4);
  }

  th {
    background-color: WhiteSmoke;
    text-align: left;
  }

  tbody > tr:hover {
    background-color: WhiteSmoke;
  }
}

summary {
  cursor:  pointer;
}

.topnav {
  background-color: $red;
  color:  white;
  font-weight: bold;

  a {
    color:  white;
  }

  > .container {
    display: flex;
    align-items: baseline;
  }

  .topnav-title {
    font-size: 1.5rem;
  }

  .topnav-links {
    display: flex;
  }

  .topnav-links > a {
    display:  block;
    text-transform: uppercase;
    margin-left: 2rem;
  }
}

.container {
  max-width: 1280px;
  margin:  auto;
  padding: 1rem;
}

.container-wide {
  max-width: 100%;
  padding: 1rem;
}

.callout {
  border: 1px solid gray;
  padding: 1rem;
  margin-bottom: 1rem;
  max-width: 800px;
  background-color: WhiteSmoke;

  p:last-child {
    margin-bottom: 0;
  }

  &.error {
    background-color: rgba($red, 0.2);
  }

  &.warning {
    background-color: rgba($orange, 0.2);
  }

  &.success {
    background-color: rgba($green, 0.2);
  }
}

// Components

span.osm-link {
  white-space: nowrap;
  img {
    display: inline-block;
    height: .8rem;
  }
}

.box {
  border: 1px solid black;
  border-radius: 3px;
  color: black;
  display: inline-block;
  padding: 0px 5px;
  text-decoration: none;

  &:hover {
    background-color: WhiteSmoke;
  }
}

a.josm-remote {
  @extend .box;

  &.success {
    background-color: rgba($green, 0.3);
  }

  &.error {
    background-color: rgba($red, 0.3);
  }
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
}

ul.breadcrumbs {
  padding: 0;
  list-style-type: none;
  display: flex;

  li:not(:first-child):before {
    content: ">";
    padding: 0 .75rem;
  }
}


A assets/tailwind.config.js => assets/tailwind.config.js +16 -0
@@ 0,0 1,16 @@
// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex'
  ],
  theme: {
    extend: {
    },
  },
  plugins: [
    require('@tailwindcss/forms')
  ]
}