jacopocolo

.BlockLightboxMetadataPane__Dialog-zcu36p-0 {
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
}

.dznTKy > label:first-child {
    flex-basis: 5% !important; 
}

jacopocolo

// let's get a hold on the Sketch API
const sketch = require('sketch');
//let's expose these globally
var document = sketch.fromNative(context.document);
var page = document.selectedPage;
var Rectangle = require('sketch/dom').Rectangle;
var Shape = require('sketch/dom').Shape;
var Style = require('sketch/dom').Style;
var Group = require('sketch/dom').Group;

jacopocolo

Earth from space
https://www.youtube.com/embed/Xjs6fnpPWy4?&autoplay=1&controls=0&iv_load_policy=3&t=1m&mute=1

Sea
https://www.youtube.com/embed/SxWKffqBjMM?&autoplay=1&controls=0&iv_load_policy=3

jacopocolo

#center_pane__contents > div > div > div.loading-boundary.hidden > div > div, .PageHeaderCollapsedStructure, .Topbar, .layerContext {
    background: #141d26;
    background-color: #141d26
}
#grid_views_select > span > span {
    color: #FFFFFF
}
#asana_main > div.full-width-header.full-width-header--expanded.full-width-header-sideElements--medium {
    background: #141d26;
    color: #FFFFFF

jacopocolo

import * as React from "react";
import Avatar from "@collab-ui/react/lib/Avatar";
import "@collab-ui/core/css/collab-ui.min.css";
import "@collab-ui/icons/css/collab-ui-icons.css";
import { PropertyControls, ControlType, Data } from "framer";

const style: React.CSSProperties = {
    margin: "0 0 20px 20px",
    objectFit: "cover"
};

jacopocolo

Quick guide on how to get started with Framer X and the collab-ui components

This guide assumes that you have yarn and a code editor installed on your computer (Visual Studio Code is the recommended one for Framer X, use that). If you don't, get installing:

• Yarn: https://yarnpkg.com/en/
• Visual Studio Code: https://code.visualstudio.com/

One you are done:

1. Create a new project in Framer X

2. Save it

jacopocolo

{
	"main": "build/index.js",
	"license": "MIT",
	"devDependencies": {
		"@types/react": "^16.0.31",
		"framer": "^0.8.0"
	},
	"peerDependencies": {
		"framer": "^0.8.0",
		"react": "^16.3.0",

jacopocolo

Deep Sleep state
  detect proximity -> Half wake with name
  detect presence -> Half wake without names
  
Half wake state
  
  Half wake without names 
    tap -> Awake
    detect proximity -> Awake with names
    

jacopocolo

.SearchNavigation-canopy,.u-bgUserColor {
    display: none;
}

.AdaptiveFiltersBar {
    display: none;
}

.SidebarFilterModule {
    display: none;

jacopocolo

.bsa-native-ad {
    background-color: #efefef;
}